잃어버린 접근성을 찾아서

이 게시물은 상품 상세 페이지에서 스크린 리더(VoiceOver/TalkBack) 사용자가 겪는 심각한 불편을 직접 측정하고, 발화 기준으로 접근성을 개선한 과정을 설명합니다.

문제: 점수보다 중요한 실제 사용성

• Lighthouse 접근성 점수는 개선 가능했지만, 실제로는 구매하기 버튼까지 300번 이상 스와이프가 필요했습니다.
• 모든 요소를 순차 탐색해야 하는 피로, 텍스트가 분리되어 읽히는 파편화, 버튼 역할이 모호하게 읽히는 문제가 있었습니다.

개선 1: 탐색 단위 만들기(랜드마크/머리말)

• 페이지를 의미 있는 섹션으로 나누고 section+heading+aria-labelledby 구조를 적용해 로터/단위 탐색이 가능하도록 했습니다.
• VoiceOver에서 list-style: none인 목록은 목록으로 인식되지 않아 role="list"를 명시해야 함을 다룹니다.

개선 2~3: 발화 품질과 상호작용 명확화

• 템플릿 리터럴 또는 시각적으로 숨긴 텍스트(aria-hidden과 조합)로 텍스트를 자연스럽게 읽히게 했고, iOS에서 span/div의 aria-label이 무시될 수 있음을 공유합니다.
• aria-pressed, aria-haspopup, aria-expanded 등으로 토글/팝업 버튼의 상태와 동작 맥락을 명확히 했습니다.

결과

개선 후 구매하기 버튼까지 스와이프가 20회 미만으로 줄어 90% 이상 개선되었고, 시맨틱 태그 도입으로 코드 가독성과 role 기반 테스트 작성에도 이점이 있었다고 정리합니다.