웹 접근성, 시작하는 법

스크린 리더를 켜보고 부끄러워졌다

접근성에 관심을 갖게 된 계기는 단순하다. 시각 장애인 개발자 발표 영상을 우연히 봤는데, 스크린 리더로 웹을 탐색하는 장면이 충격이었다. 궁금해져서 내 블로그에 스크린 리더를 켜봤다.

"버튼", "버튼", "링크", "이미지". 뭐가 어떤 기능인지 전혀 알 수 없었다. 테마 토글은 그냥 "버튼", 포스트 썸네일은 alt 없이 "이미지". 부끄러웠다. 그래서 고치기 시작했다.

제일 먼저 할 것: 태그를 제대로 쓰자

접근성의 8할은 올바른 HTML 태그 쓰는 것만으로 해결된다. <div onClick> 대신 <button>, <div class="header"> 대신 <header>, <div class="nav"> 대신 <nav>.

내 블로그에서 div로 만든 클릭 가능 요소가 7개 있었다. 전부 button이나 a로 바꿨다. 이것만으로 키보드 네비게이션이 되기 시작했다. Tab으로 이동, Enter로 클릭. div에는 이게 기본으로 안 된다. 가장 쉬운 접근성 개선이 "올바른 태그 쓰기"이고, 가장 흔한 접근성 위반도 "잘못된 태그 쓰기"다.

아이콘 버튼에 aria-label 붙이기

시맨틱 HTML만으로 안 되는 경우가 있다. 아이콘만 있는 버튼. 달 모양 아이콘의 테마 토글은 눈으로 보면 의미가 전달되는데, 스크린 리더는 그냥 "버튼"이라고 읽는다.

aria-label="다크 모드 전환" 추가하면 "다크 모드 전환, 버튼"이라고 읽어준다. 검색 아이콘에 "검색 열기", 닫기 아이콘에 "닫기". 모든 아이콘 버튼에 aria-label 추가하는 데 20분 걸렸다. 20분이다. (근데 이 20분을 왜 지금까지 안 했는지 자문하게 된다.)

검색 모달에서 포커스가 탈출했다

마우스 없이 키보드로만 조작하는 사람은 Tab, Enter, Escape가 전부다. 내 검색 모달에서 문제를 발견했다. 모달 열린 상태에서 Tab 누르면 포커스가 모달 밖으로 나가버렸다. 모달이 열려 있는 동안 포커스가 안에 갇혀 있어야 한다. "포커스 트랩"이라고 부른다.

포커스 트랩 구현하고, Escape로 닫을 수 있게 하고, 닫히면 포커스가 원래 위치로 돌아가게 했다. 이 세 가지만 해도 키보드 사용자의 모달 경험이 확 나아진다.

색상 대비 기준 미달이었다

WCAG 기준 일반 텍스트는 배경 대비 4.5:1 이상이어야 한다. Chrome DevTools Color Picker에서 확인해봤더니 내 회색 텍스트(#999999)가 흰 배경에서 2.85:1이었다. 기준 미달. #666666으로 바꾸니 4.48:1로 통과. 미묘한 색상 차이인데, 저시력 사용자한테는 읽을 수 있고 없고의 차이다.

자동 검사 도구를 돌렸더니

axe DevTools 브라우저 확장을 설치하고 돌려봤다. 23개 위반이 나왔다. 하나씩 고치는 데 이틀 걸렸다. ESLint의 eslint-plugin-jsx-a11y도 설정해서 새 코드에서 위반이 안 생기게 예방했다. 근데 자동 도구가 잡지 못하는 것도 있다. 실제로 스크린 리더로 한번 써봐야 진짜 문제가 보인다.

완벽하지 않아도 시작하면 된다

접근성은 "완벽하게 하거나 안 하거나"가 아니다. 100%를 목표로 하면 시작조차 못한다. 오늘 alt 텍스트 하나, 내일 aria-label 하나. 그것만으로도 누군가의 경험이 나아진다.

나도 아직 완벽하지 않다. 근데 스크린 리더로 내 블로그를 읽었을 때, "버튼, 버튼, 버튼" 대신 "다크 모드 전환 버튼, 검색 열기 버튼, React 19 포스트 링크"라고 읽히게 된 것만으로도 의미 있는 진전이다. 시작이 반이라는 말이 여기서는 진짜 맞다.