쓱닷컴이 접근성을 대하는 방식

이 글은 쓱닷컴 WEB개발팀이 웹 접근성을 우선순위 뒤로 밀리던 상황에서 실제 키보드·스크린리더 사용 흐름을 겪고 개선 기록을 정리한 내용입니다. 디자인 시스템에서는 Chakra UI의 내장 접근성 기반에 focus 표시(focusVisibleRing), :focus vs :focus-visible 분리, ARIA 상태 전달(aria-label, aria-pressed), prefers-reduced-motion 적용을 덧붙여 일관된 사용자 경험을 만드는 방식으로 접근합니다. 이미지에 담긴 텍스트는 상품 상세 OCR 기반 대체 텍스트를 제공하되, alert() 대신 aria-live="polite" 상태 영역과 결과 영역에 포커스를 이동해 스크린리더 흐름을 방해하지 않게 고도화합니다. 또한 OCR 처리 로직을 공통 함수로 통합하고 캐싱으로 API 호출을 줄이며, innerHTML 대신 textContent로 XSS 위험을 낮추고 PC/MW 스크립트를 분리해 유지보수성을 높입니다. 접근성 개선이 성능을 떨어뜨릴지에 대해 Lighthouse 자동화를 n8n+GitHub 조합으로 구축해 주기적 측정과 보고(팀 알림, Issue 등록)를 운영합니다.