도입 스토리
"맥은 NVDA 안 되는 거 맞죠?" 김개발이 맥북을 보며 물었습니다.
"VoiceOver가 기본 내장되어 있어요. 설치 필요 없어요." 박멘토가 맥북을 켰습니다.
"Command+F5를 눌러봐요."
즉시 음성이 나왔습니다. "VoiceOver 켜짐. 크롬. 웹 콘텐츠."
"그리고 iOS에서도 동일하게 VoiceOver가 있어요. 스마트폰 사용자의 접근성은 모바일 VoiceOver로 테스트해야 해요. 스크린 터치 방식이 완전히 달라지거든요."
핵심 개념 설명
macOS VoiceOver 시작
VoiceOver 켜기/끄기: Command+F5 (또는 Touch ID 세 번 클릭)
VoiceOver는 VO 키 (기본: Caps Lock 또는 Control+Option)를 수정자 키로 사용합니다.
주요 단축키:
| 동작 | 단축키 |
|---|---|
| VoiceOver 켜기/끄기 | Command+F5 |
| 다음 요소 | VO+오른쪽 화살표 |
| 이전 요소 | VO+왼쪽 화살표 |
| 활성화 (클릭) | VO+Space |
| 로터 열기 | VO+U |
| 탐색 시작 | VO+Shift+방향키 |
| 웹 항목 이동 | VO+Command+H (제목) |
| 링크 이동 | VO+Command+L |
| 폼 요소 이동 | VO+Command+J |
VoiceOver 로터
로터는 VoiceOver의 핵심 탐색 도구입니다. VO+U로 열면 다양한 요소 목록을 볼 수 있습니다.
로터 항목:
- 링크: 페이지 내 모든 링크 목록
- 제목: 헤딩 계층 구조
- 양식 제어: 입력 필드, 버튼
- 표: 테이블 목록
- 랜드마크: 랜드마크 역할 목록
- 이미지: 이미지 목록
로터를 열면 각 항목이 목록으로 표시되어 직접 이동할 수 있습니다.
Safari vs Chrome with VoiceOver
macOS에서 VoiceOver 테스트는 Safari와 함께 사용하는 것이 가장 정확합니다. Apple이 VoiceOver와 Safari의 호환성을 직접 관리하기 때문입니다.
Chrome에서도 VoiceOver를 사용할 수 있지만, 일부 ARIA 속성이 Safari만큼 잘 동작하지 않을 수 있습니다.
테스트 조합 권장:
Windows: NVDA + Chrome / Firefox
macOS: VoiceOver + Safari
iOS: VoiceOver + Safari
Android: TalkBack + Chrome
iOS VoiceOver
iOS에서는 손가락 제스처로 탐색합니다.
VoiceOver 켜기: 설정 → 손쉬운 사용 → VoiceOver (또는 Siri에게 "VoiceOver 켜줘")
| 제스처 | 동작 |
|---|---|
| 한 손가락 오른쪽 스와이프 | 다음 요소 |
| 한 손가락 왼쪽 스와이프 | 이전 요소 |
| 한 손가락 더블 탭 | 활성화 |
| 세 손가락 스와이프 | 스크롤 |
| 두 손가락 탭 | 읽기 멈춤/시작 |
| 두 손가락 회전 | 로터 변경 |
로터: 두 손가락으로 시계방향 또는 반시계방향으로 돌리면 탐색 모드 변경 (링크, 제목, 문자 등).
모바일 접근성의 특수성
모바일에서만 나타나는 접근성 문제들이 있습니다.
터치 타겟 크기 (WCAG 2.5.8):
/* 최소 터치 타겟 크기: 24×24dp *//* 권장: 44×44dp */button { min-height: 44px; min-width: 44px; padding: 12px 16px;}/* 작은 아이콘 버튼의 타겟 확장 */.icon-btn { position: relative; width: 24px; height: 24px;}.icon-btn::before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px;}줌 허용:
<!-- 잘못된 예: 사용자 줌 비활성화 --><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- 올바른 예: 줌 허용 --><meta name="viewport" content="width=device-width, initial-scale=1">user-scalable=no는 저시력 사용자가 화면을 확대할 수 없게 만듭니다. WCAG 1.4.4 위반입니다.
단계별 실습
따라하기: macOS VoiceOver 웹 테스트
- Command+F5로 VoiceOver를 켭니다.
- Safari에서 테스트 페이지를 엽니다.
- VO+U로 로터를 열고 "제목" 항목에서 헤딩 구조를 확인합니다.
- VO+U → "링크" 탭에서 모호한 링크가 없는지 확인합니다.
- Tab 또는 VO+오른쪽으로 폼을 탐색하며 레이블이 읽히는지 확인합니다.
- Command+F5로 끕니다.
변형하기: iOS VoiceOver 테스트 시나리오
iOS VoiceOver를 켜고 스마트폰으로 사이트를 방문합니다.
테스트 시나리오:
- 스와이프만으로 메인 메뉴에 접근 가능한가.
- 상품 카드의 이름과 가격이 정확히 읽히는가.
- 폼 필드에 더블 탭으로 입력 시작 후 가상 키보드가 올라오는가.
- 모달이 열릴 때 포커스가 모달 안으로 이동하는가.
정리와 확인
핵심 내용 요약
- VoiceOver: macOS/iOS 내장 스크린리더, Command+F5
- VO 키: Caps Lock 또는 Control+Option — 단축키 수정자
- 로터(VO+U): 링크, 제목, 폼 요소 목록으로 빠른 이동
- iOS 제스처: 오른쪽 스와이프(다음), 더블 탭(활성화)
user-scalable=no금지: 저시력 사용자의 확대 기능을 막음
확인 문제
문제 1. VoiceOver 테스트에서 Safari를 권장하는 이유는?
Apple이 VoiceOver와 Safari의 호환성을 직접 관리합니다.
실제 VoiceOver 사용자의 대부분이 Safari를 사용하므로
테스트 환경도 사용자와 동일하게 맞추는 것이 중요합니다.
문제 2. <meta viewport>에서 user-scalable=no가 WCAG를 위반하는 이유는?
WCAG 1.4.4는 텍스트를 200%까지 확대할 수 있어야 한다고 요구합니다.
user-scalable=no는 이 기능을 완전히 차단하므로 직접 위반입니다.
다음 챕터에서는 스크린리더 테스트를 자동화 도구와 결합하는 방법을 다룹니다. axe, Lighthouse, WAVE를 효과적으로 사용하는 전략을 알아봅니다.