스킬 자체의 표현으로
macOS, Windows, iOS, Android 플랫폼에서 VoiceOver, NVDA, JAWS, TalkBack, Narrator 스크린 리더로 웹 애플리케이션을 테스트합니다. 실제 스크린 리더를 이용한 실습 테스트를 통해 스크린 리더 호환성을 검증하고, 보조 기술 관련 문제를 디버깅하며, 올바른 ARIA 구현을 보장합니다.
내비게이션, 폼, 동적 콘텐츠 알림, 포커스 관리, 모달 다이얼로그를 다룹니다. 플랫폼별 명령어, 테스트 체크리스트, 일반적인 접근성 패턴에 대한 코드 예제를 제공합니다. 다양한 스크린 리더 모드(browse, focus, application)에서의 테스트를 강조하며, 시맨틱 HTML을 우선하고 ARIA는 보조적 강화로 활용할 것을 권장합니다.
산출물
- 페이지 로드, 내비게이션, 링크, 폼, 동적 콘텐츠, 표를 다루는 VoiceOver 테스트 체크리스트
- 초기 로드, 랜드마크, 헤딩, 폼, 인터랙티브 요소, 동적 콘텐츠에 대한 단계별 지침을 담은 NVDA 테스트 스크립트
- 레이블 없는 버튼, 알림이 없는 동적 콘텐츠, 폼 오류 등 흔한 문제에 대한 접근성 패턴과 해결 방법을 보여주는 HTML 코드 예시
- 모달 다이얼로그, 포커스 트래핑, 탭 인터페이스 키보드 내비게이션을 포함한 포커스 관리용 JavaScript 코드
작동 방식
- 01플랫폼별 주요 스크린 리더로 테스트하기
Windows에서는 Firefox와 함께 NVDA(사용률 31%)를, macOS 및 iOS에서는 Safari와 함께 VoiceOver(사용률 15%)를, Chrome과 함께 JAWS(사용률 40%)를, Android에서는 TalkBack(사용률 10%)을, Edge와 함께 Narrator(사용률 4%)를 사용합니다.
- 02스크린 리더별 명령어로 탐색하기
VoiceOver 요소 탐색을 위한 VO+오른쪽 화살표, NVDA 헤딩 이동을 위한 H, JAWS 링크 목록을 위한 Insert+F7, TalkBack 스크롤을 위한 두 손가락 스와이프와 같은 명령을 실행합니다.
- 03브라우즈 모드와 포커스 모드에서 테스트하기
콘텐츠를 읽기 위한 브라우즈 모드와 폼 컨트롤과 상호작용하기 위한 포커스 모드 사이를 스크린 리더가 올바르게 전환하는지 확인하고, 모드 전환 알림을 주의해서 확인합니다.
- 04시맨틱 구조와 ARIA 검증하기
헤딩이 로터나 요소 목록을 통해 발견 가능한지, 랜드마크에 올바른 레이블이 지정되어 있는지, 라이브 리전이 업데이트를 알리는지, dialog, tab, progressbar와 같은 역할이 올바르게 구현되어 있는지 확인합니다.
- 05포커스 관리와 키보드 상호작용 검증하기
폼 제출 후 포커스가 오류로 이동하는지, 모달이 포커스를 올바르게 가두고 닫힐 때 포커스를 복원하는지, 탭 인터페이스가 화살표 키, Home, End에 반응하는지 확인합니다.
- 06동적 콘텐츠 알림 테스트하기
콘텐츠 업데이트를 트리거하여 aria-live="polite"가 지정된 role="status"는 현재 음성 출력이 끝난 후 변경 사항을 알리고, role="alert"는 즉시 알림을 중단시키는지 확인합니다.