쓱닷컴이 접근성을 대하는 방식
프론트엔드
쓱닷컴이 접근성을 대하는 방식
두줄요약
쓱닷컴 WEB개발팀의 웹 접근성 개선 사례를 소개했습니다. 컴포넌트, OCR, 성능 측정을 함께 다루며 실무 적용 방안을 정리했습니다.
핵심 내용
- 쓱닷컴 WEB개발팀의 웹 접근성 개선 경험 정리
- Chakra UI 기반의 포커스 관리, ARIA 속성 보강, 움직임 줄이기 설정 반영
- 상품 상세 OCR 결과 안내를 aria-live와 포커스 이동으로 재구성
- Lighthouse 측정 자동화와 n8n, GitHub Issue 연동으로 성능 검증 체계 구축
선택 이유
- 접근성을 별도 작업이 아닌 디자인 시스템과 기본 컴포넌트 수준에서 흡수
- 스크린리더 흐름을 해치던 alert과 분산 결과 표시를 개선
- 측정과 리포팅을 자동화해 접근성 개선의 성능 우려를 수치로 확인
적용해볼 점
- focus-visible 기반 포커스 표시와 aria-label, aria-pressed 활용
- aria-live와 tabindex 조합으로 비동기 결과 안내 구조화
- 반복 측정, 캐싱, textContent 사용으로 안전성과 운영 효율 확보