웹 접근성 인증, 탭 메뉴, 초점 이동, title 속성 누락 등 실전 노하우 공개
웹 접근성 인증마크 갱신 과정에서 탭 메뉴(Tab Menu) 탐색 오류를 발견, 방향키 조작 누락을 확인
활성/비활성 상태의 title 속성 누락과 테이블 caption 내용 불일치 등 다양한 접근성 문제점을 지적
논리적 구조와 시각적 구조의 불일치로 인한 키보드 탐색(Keyboard Navigation) 문제를 해결
팝업/모달 창 닫기 후 초점(Focus) 위치 회귀 처리가 미흡하여 심사에서 많은 오류 발생
role="tab" 사용 시 키보드 탐색 처리
본문에서는 `role="tab"` 속성을 사용한 탭 메뉴 구현 시, 키보드 탐색(Keyboard Navigation) 처리가 중요하다고 강조한다.
방향키(Arrow Keys)로 탭 메뉴 간 이동, Tab 키로 탭 콘텐츠 영역으로 초점 이동 구현
WAI-ARIA(WAI-ARIA) 명세 준수와 별개로 방향키 조작(Arrow Key Control) 부재 시 접근성 오류 발생
예시 코드에서 `keydown` 이벤트를 활용하여 Home/End 키, Tab 키, 방향키 조작을 처리
결과적으로 ARIA 속성만으로는 충분하지 않으며, 키보드 조작(Keyboard Control)을 위한 별도 구현이 필수적이다.
활성/비활성 상태에서의 title 속성 누락
글에서는 버튼(Button)이나 링크(Link) 요소의 활성/비활성 상태에 따른 title 속성(Title Attribute) 누락을 지적한다.
스크린 리더(Screen Reader) 사용자를 위해 적절한 보조 텍스트(Assistive Text) 제공의 중요성 강조
시각적 상태 변경과 더불어 title 속성(Title Attribute)을 통한 정보 제공 필요
테이블 caption 내용 불일치로 인한 데이터 불일치(Data Inconsistency) 문제 발생
결론적으로, 시각적 상태 변화에 따른 title 속성(Title Attribute) 업데이트는 접근성 준수를 위한 기본이다.
논리적 구조와 시각적 구조의 불일치
본문에서는 시각적 구조와 논리적 구조의 불일치로 인한 키보드 사용자(Keyboard User)의 불편함을 지적한다.
자동 완성(Autocomplete) 컨텐츠를 입력창 위에 배치하는 UI 구조에서 Tab 키 탐색 문제 발생
자동 완성 컨텐츠 탐색을 위해 Shift + Tab 키 조합 필요
키보드 사용자를 위해 입력창 다음에 자동 완성 컨텐츠 배치 권장
결과적으로, 시각적 디자인(Visual Design)과 키보드 탐색(Keyboard Navigation) 간의 일관성 확보가 중요하다.
초점 이동 및 회귀
글에서는 동적으로 팝업(Popup)이나 모달 창(Modal Window) 구현 시 초점 이동(Focus Management) 및 회귀(Focus Return) 처리의 중요성을 강조한다.
팝업/모달 창 닫기 후 초점(Focus)이 원래 위치로 돌아가지 않는 문제 발생
접근성 심사에서 가장 많은 오류(Focus Error)가 발생한 항목
UI 구현과 기능 구현의 분리(Separation)로 인해 초점 관리(Focus Control) 누락
결론적으로, 초점 이동(Focus) 및 회귀(Focus Return) 처리는 접근성 준수를 위한 핵심 요소이며, UI/UX(UI/UX) 측면에서도 중요하다.
