WCAG 2.1 AA 준수를 통한 EAA 법적 리스크 95% 제거

Context

2025년 6월 발효된 European Accessibility Act(EAA)로 인한 EU 시장 내 서비스 강제 철수 및 최대 €100,000 과징금 리스크 발생. 기존의 단순 UI 구현 방식으로는 스크린 리더 및 키보드 네비게이션 등 보조 공학 기기 사용자의 접근성을 보장하기 어려운 한계 존재.

Technical Solution

• EN 301 549 표준의 기반인 WCAG 2.1 AA 기준을 적용하여 웹 요구사항의 95%를 충족하는 구조 설계
• aria-label 및 aria-hidden 속성을 통한 시각적 요소의 시맨틱 의미 부여 및 중복 낭독 방지 로직 구현
• div 기반 이벤트 핸들러를 button 태그로 교체하거나 tabindex="0"와 onKeyDown을 조합한 Keyboard Accessibility 확보
• :focus-visible 선택자를 활용하여 마우스 클릭 시에는 숨기고 키보드 탭 이동 시에만 노출하는 조건부 포커스 링 설계
• sr-only 클래스를 적용한 Skip-to-content 링크를 최상단에 배치하여 반복적인 네비게이션 탐색 비용 제거
• 시각적 레이아웃 유지와 보조 공학 기기 인식 분리를 위해 placeholder 대신 label 또는 aria-label 기반의 Programmatic Labeling 적용