프론트엔드
SI 퍼블리셔를 위한 웹 접근성(A11y) 실전 가이드
두줄요약
React SPA에서 자주 발생하는 웹 접근성 결함과 JSX 마크업 규칙을 정리했습니다. 모달·아코디언·동적 알림의 ARIA 및 초점 제어 검증 방법을 제시합니다.
문제 상황
- 정적 HTML 중심 SI 환경에서 React·Vue 기반 SPA 전환 후 동적 UI 접근성 결함 증가
- 모달 초점 이탈, 화면 갱신 미낭독, 토글 상태 미전달, 아이콘 버튼 목적 미안내
- 인증 검수 시점의 상태 설계 재작업과 납기 지연 위험
해결 방법
- 네이티브 시맨틱 태그 우선 사용, JSX의
aria-*하이픈 표기와 Fragment 기반 DOM 구조 유지 - VisuallyHidden 텍스트, 아코디언의
aria-expanded·연결 ID, 모달의 focus trap·초점 복귀 적용 - 동적 오류의
aria-live알림과 동영상track기반 WebVTT 자막 제공
구조와 흐름
- React 상태값과 WAI-ARIA 속성의 직접 동기화
- 모달 열림 시 첫 초점 이동, Tab 순환, Escape 닫기, 닫힘 후 이전 요소 복귀
- 시각장애인의 키보드·스크린 리더 사용과 청각장애인의 자막·시각 피드백 고려
적용해볼 점
- 키보드 단독 탐색으로 초점 표시와 모달 내부 순환 점검
- axe DevTools·Chrome Lighthouse로 명도 대비, alt, 폼 레이블 자동 진단
- VoiceOver·NVDA로 실제 낭독 순서와 버튼 목적 확인
