화면낭독기로 내 사이트 직접 들어보기
자동 검사 도구는 접근성 문제의 30~40%만 잡습니다. 나머지를 찾는 가장 빠른 방법은 직접 화면낭독기를 켜고 내 페이지를 들어 보는 것입니다. 완벽하게 다룰 필요는 없습니다. 단축키 대여섯 개면 "이 페이지가 소리로는 어떻게 들리는지"를 알 수 있고, 그것만으로 큰 문제들이 드러납니다.
1. 무엇을 설치하나
| OS | 화면낭독기 | 비고 |
|---|---|---|
| Windows | NVDA (무료, nvaccess.org) | 가장 널리 쓰임. 테스트 1순위 |
| Windows | 내레이터 (내장) | 설치 없이 Ctrl+Win+Enter |
| macOS | VoiceOver (내장) | Cmd+F5로 토글 |
| iOS | VoiceOver (내장) | 설정 → 손쉬운 사용 |
| Android | TalkBack (내장) | 설정 → 접근성 |
브라우저 조합도 영향을 줍니다. 실사용자 분포상 NVDA + Chrome/Firefox, VoiceOver + Safari가 우선순위가 높습니다. 하나만 골라야 한다면 Windows에서 NVDA + Chrome으로 시작하세요.
2. NVDA 핵심 단축키 (Windows)
NVDA는 Insert 키를 "NVDA 키"로 씁니다(노트북은 CapsLock으로 설정 가능). 브라우저에서 페이지를 읽을 때는 "브라우즈 모드"가 기본입니다.
| 키 | 동작 |
|---|---|
| Insert + ↓ | 현재 위치부터 쭉 읽기 |
| ↓ / ↑ | 한 줄씩 이동 |
| H / Shift+H | 다음/이전 제목으로 |
| 1~6 | 해당 레벨 제목으로 |
| K | 다음 링크로 |
| F | 다음 폼 요소로 |
| B | 다음 버튼으로 |
| D | 다음 랜드마크(region)로 |
| T | 다음 표로 |
| Insert + F7 | 요소 목록(제목·링크·랜드마크 한눈에) |
| Insert + Q | NVDA 종료 |
VoiceOver(macOS)는 Ctrl+Option("VO 키")이 기본입니다. VO+A 읽기 시작, VO+Cmd+H 다음 제목, VO+U로 로터(제목/링크/폼 목록)를 엽니다.
3. 30분 테스트 순서
① 요소 목록부터 (5분)
Insert+F7(NVDA)이나 로터(VoiceOver)로 제목 목록을 먼저 봅니다. 확인할 것:
h1이 하나 있고, 페이지 주제를 나타내는가?- 제목만 읽어도 페이지 구조(목차)가 말이 되는가?
h2다음에h4로 건너뛰지 않는가?
이어서 링크 목록을 봅니다.
- "여기", "클릭", "자세히 보기"가 몇 개나 되는가? (목적지 없이 반복되면 문제)
- 같은 이름인데 다른 곳으로 가는 링크가 있는가?
- URL이 그대로 읽히는 링크(
https://...)가 있는가?
② 위에서 아래로 통독 (10분)
Insert+↓로 페이지를 처음부터 끝까지 듣습니다. 귀를 기울일 지점:
- 이미지 — "그래픽 IMG_2481" 처럼 파일명이 읽히면 alt 누락입니다.
의미 없는 장식이 일일이 읽히면
alt=""처리가 안 된 것입니다. - 버튼·아이콘 — "버튼"이라고만 하고 이름이 없으면
aria-label누락입니다. - 폼 — 입력칸에서 "편집 창"이라고만 하고 무슨 칸인지 안 나오면 레이블 누락입니다.
- 언어 — 한국어 페이지인데 영어 발음으로 읽으면
<html lang="ko">가 없는 것입니다. - 읽는 순서 — 소리로 듣는 순서가 화면에서 보는 순서와 다르면 DOM 순서 문제입니다.
- 테이블 — 셀을 이동할 때 행/열 머리글을 함께 읽어 주는가?(
th scope확인)
③ 핵심 흐름 실행 (10분)
메뉴 열기, 검색, 모달 띄우기, 폼 제출 등 실제 과업을 소리만 듣고 해봅니다.
- 드롭다운 메뉴를 열었을 때 "확장됨/축소됨"(
aria-expanded)이 들리는가? - 모달이 열리면 포커스가 그 안으로 가고, Esc로 닫히는가?
- 탭 UI에서 "선택됨" 상태가 들리는가?
- 폼을 틀리게 제출했을 때 오류가 소리로 즉시 안내되는가?(
role="alert"/aria-live) - "장바구니에 담김" 같은 동적 알림이 낭독되는가, 아니면 조용히 지나가는가?
4. 자주 듣게 되는 문제와 원인
| 이렇게 들리면 | 원인 |
|---|---|
| "그래픽 logo-2 dot png" | 이미지 alt 누락 |
| "링크" (이름 없음) | 아이콘 링크에 접근 이름 없음 |
| "편집 창" (레이블 없음) | <label> 미연결 |
| "클릭 가능" (역할 불명) | div에 클릭 핸들러, 버튼 아님 |
| 같은 문구가 두 번 연속 | 링크/버튼 안 이미지 alt 중복 |
| 메뉴 상태 변화가 안 들림 | aria-expanded 미갱신 |
| 오류 메시지가 안 들림 | aria-live/role=alert 없음 |
| 페이지 전체가 한 덩어리로 읽힘 | header/nav/main/footer 랜드마크 없음 |
5. 마음가짐
- 완벽히 배우려 하지 마세요. 위 단축키 5~6개면 개발자 테스트로는 충분합니다.
- 처음엔 음성 속도가 빠르게 느껴집니다. NVDA 설정에서 낮추고 시작하세요.
- 테스트는 실사용자를 대체하지 않습니다. 익숙한 사용자는 훨씬 빠르고 다르게 씁니다. 가능하면 실제 화면낭독기 사용자의 피드백을 받는 것이 가장 정확합니다.
- 눈을 감거나 화면을 꺼놓고 해보면 "봐서 보완하던" 부분이 드러납니다.
이 도구의 자동 검사로 명백한 항목(alt·레이블·랜드마크·버튼 이름)을 먼저 정리한 뒤, 남은 부분을 화면낭독기로 확인하면 시간을 크게 아낄 수 있습니다.