핵심 요약
SSG.COM은 웹 접근성을 핵심 가치로 삼아 Chakra UI 기반 디자인 시스템, 이미지 OCR 대체 텍스트, ARIA/포커스 관리, 그리고 모션 제어를 도입해 사용자 경험을 개선했습니다.
구현 방법
- Chakra UI의 ARIA 준수 및 포커스 트랩/ Esc 닫기 기능으로 기본 접근성 확보
- 포커스 스타일은 :focus-visible로만 강조하고 전체적으로 일관성 유지
- 아이콘 버튼에 aria-label과 aria-pressed로 상태를 전달
- 이미지 OCR 대체 텍스트를 aria-live로 비동기 업데이트
- OCR 로직 PC/MW 분리 및 textContent로 보안 강화
주요 결과
- 키보드 탐색 및 스크린리더 사용성 크게 향상
- 성능 영향 최소화 및 시맨틱 HTML로 렌더링 최적화
- 가이드라인 및 자동화 도구 도입으로 팀의 접근성 문화 확산
