개발자가 놓치기 쉬운 웹 접근성 최소 세트

접근성은 "나중에 여유 되면"의 영역으로 밀리기 쉽다. 그런데 최소 세트만 지켜도 스크린리더 사용자뿐 아니라 키보드 유저, 저시력 유저, 그리고 검색엔진까지 이득을 본다. 비용 대비 효과 순으로 정리한다.

1. 버튼과 링크를 구별하라 (5분)

• 페이지 이동 → <a>, 동작 실행 → <button>
• div에 onClick을 붙이면 키보드로 도달할 수 없고(Tab 불가), 스크린리더가 뭔지 모른다
• 아이콘만 있는 버튼엔 aria-label 하나 붙이기: <button aria-label="닫기">✕</button>

2. 폼에는 라벨 (10분)

placeholder는 라벨이 아니다 — 입력을 시작하면 사라지고, 스크린리더가 못 읽는 경우도 있다. label과 input을 htmlFor/id로 묶거나, 시각적으로 숨긴 라벨이라도 넣자.

3. 이미지 alt의 3분법 (10분)

• 정보가 있는 이미지: 내용을 설명하는 alt
• 장식 이미지: alt="" (비우면 스크린리더가 건너뜀 — 생략과 다르다!)
• 링크 안의 유일한 콘텐츠가 이미지면: alt가 곧 링크 텍스트

4. 키보드로 한 바퀴 돌아보기 (15분)

마우스를 치우고 Tab / Enter / Esc만으로 핵심 플로우를 완주해 보자.

• 포커스가 어디 있는지 안 보인다 → outline을 지웠다면 :focus-visible 스타일을 돌려놓기
• 모달이 열렸는데 뒤 콘텐츠로 Tab이 샌다 → 포커스 트랩 필요
• Esc로 모달이 안 닫힌다 → keydown 핸들러 추가

5. 색 대비 4.5:1 (검사 1분)

회색 글자(#999 on #fff)는 대부분 기준 미달이다. 개발자 도구의 색상 피커가 대비율을 바로 보여준다. 본문 텍스트만이라도 4.5:1을 맞추자.

마무리

이 다섯 개는 다 합쳐도 반나절이 안 걸린다. 완벽한 접근성은 멀지만, "키보드로 쓸 수 있고, 라벨이 있고, 대비가 충분한" 사이트는 오늘 만들 수 있다. 시맨틱 HTML을 쓰는 습관이 이 모든 것의 8할이다.