잃어버린 접근성을 찾아서
프론트엔드
잃어버린 접근성을 찾아서
두줄요약
상품 상세 페이지의 접근성을 스크린 리더 기준으로 점검해 탐색 단위, 텍스트 발화, 버튼 역할을 개선했습니다. 구매하기까지 스와이프 횟수를 20회 미만으로 줄이고 실제 사용 경험을 크게 높였습니다.
문제 상황
- 상품 상세 페이지에서 스크린 리더 기준 탐색 효율이 매우 낮아 구매하기 버튼까지 300회 이상 스와이프 필요
- 텍스트가 분리되어 읽히고 버튼의 역할·상태가 모호해 맥락 파악과 조작이 어려움
원인 분석
- 랜드마크와 머리말 구조 부재로 순차 탐색에만 의존
- aria 속성만으로 해결되지 않는 요소 분리·발화 차이와 시맨틱 구조 부족
- 시각 중심 UI 구성으로 스크린 리더 사용 흐름이 배려되지 않음
해결 방법
- section, heading, aria-labelledby를 활용해 의미 있는 탐색 단위 구성
- 템플릿 리터럴과 aria-hidden, NoScreen 컴포넌트로 파편화된 텍스트 통합
- aria-label, aria-pressed, aria-haspopup, aria-expanded로 버튼 역할과 상태 명시
적용해볼 점
- Lighthouse 점수만 보지 말고 실제 스크린 리더 탐색으로 검증
- role 기반 테스트와 접근성 체크리스트를 코드 리뷰에 반영
- 재사용 가능한 접근성 컴포넌트와 규칙을 미리 마련