도입 스토리
"NVDA 설치했어요." 김개발이 노트북을 열었습니다. "근데 켰더니 너무 무서워요. 끄는 방법부터 알려주세요."
박멘토가 웃었습니다. "Insert+Q예요. 언제든지 끌 수 있어요."
NVDA를 켰습니다. 기계 음성이 즉시 말하기 시작했습니다. "NVDA가 시작됩니다. 구글 크롬."
"화면에 아무것도 안 했는데도 읽어줘요."
"NVDA는 포커스가 있는 곳을 읽어요. 탭 키를 눌러보세요."
"웹접근성 실습 — 구글 크롬. 제목 레벨 1. 웹접근성 실습."
"이게 스크린리더 사용자의 첫인상이에요."
핵심 개념 설명
NVDA 설치와 기본 설정
NVDA(NonVisual Desktop Access)는 무료 오픈소스 Windows 스크린리더입니다.
설치:
https://www.nvaccess.org/download/에서 다운로드- 설치 또는 포터블 버전으로 실행
- Insert 키가 NVDA 수정자 키(NVDA Key)로 동작
기본 단축키:
| 동작 | 단축키 |
|---|---|
| NVDA 켜기/끄기 | Insert+Q |
| 읽기 중단 | Control |
| 계속 읽기 | Insert+방향키 아래 |
| 다음 요소 | Tab |
| 이전 요소 | Shift+Tab |
| 다음 제목 | H |
| 다음 링크 | K |
| 다음 폼 필드 | F |
| 요소 목록(헤딩·링크·랜드마크) | Insert+F7 |
탐색 모드와 포커스 모드
NVDA에는 두 가지 모드가 있습니다.
탐색 모드 (Browse Mode, 기본):
- 문서 전체를 읽음
- H, K, F 같은 단일 키 단축키 사용
- Tab, 화살표 키로 탐색
포커스 모드 (Focus Mode):
- Enter 또는 폼 요소 포커스 시 자동 전환
- 단일 키 단축키 비활성화 — 타이핑 가능
- Escape로 탐색 모드 복귀
탐색 모드: 화살표 키 → 다음/이전 텍스트로 이동
포커스 모드: 화살표 키 → 텍스트 커서 이동 또는 옵션 선택
NVDA + Chrome 테스트 흐름
웹 개발자를 위한 기본 테스트 흐름입니다.
1단계 — 페이지 제목 확인:
NVDA가 페이지를 열 때 제목(<title>)을 읽어주는지 확인합니다.
2단계 — 헤딩 구조 탐색:
H 키로 헤딩을 순서대로 이동합니다. 논리적인 순서로 탐색되는지 확인합니다.
3단계 — 랜드마크 탐색:
Insert+F7 → 랜드마크 탭. banner, navigation, main, contentinfo 등이 표시되는지 확인합니다.
4단계 — 폼 탐색:
F 키로 폼 필드 간 이동. 각 필드의 레이블이 읽히는지 확인합니다.
5단계 — 링크 탐색:
Insert+F7 → 링크 탭. 링크 목록에서 "자세히 보기"가 여러 개 있는지 확인합니다.
6단계 — 이미지 탐색:
G 키로 이미지로 이동. 이미지 alt 텍스트가 읽히는지 확인합니다.
주요 탐색 단축키 체계
요소별 이동 (탐색 모드):
H = 제목(Heading)
1~6 = 특정 레벨 제목
K = 링크(linK)
F = 폼 필드(Form field)
B = 버튼(Button)
T = 테이블(Table)
G = 그래픽(Graphic)
L = 목록(List)
I = 목록 항목(list Item)
Q = 인용(Quotation)
역방향 이동: Shift + 해당 키
실제 테스트 체크리스트
스크린리더로 웹페이지를 테스트할 때 사용하는 체크리스트입니다.
## NVDA 테스트 체크리스트
### 페이지 구조
- [ ] 페이지 로드 시 제목(<title>)이 읽힘
- [ ] h1이 정확히 하나 존재하고 내용이 적절함
- [ ] H 키로 헤딩을 순서대로 탐색 가능
- [ ] 랜드마크(header, nav, main, footer)가 표시됨
### 이미지
- [ ] 모든 정보 이미지에 의미 있는 alt 텍스트
- [ ] 장식 이미지에 alt="" 설정
### 링크와 버튼
- [ ] 모든 링크 텍스트가 목적지를 설명
- [ ] 모든 버튼에 이름이 있음
- [ ] 링크 목록에 "더 보기", "클릭" 등 모호한 텍스트 없음
### 폼
- [ ] 모든 입력 필드에 레이블이 연결됨
- [ ] 필수 입력 표시가 읽힘
- [ ] 오류 메시지가 해당 필드와 연결됨
### 동적 콘텐츠
- [ ] 알림, 토스트가 자동으로 읽힘
- [ ] 모달이 열릴 때 포커스 이동
- [ ] 모달이 닫힐 때 포커스 복원
단계별 실습
따라하기: NVDA로 회원가입 폼 테스트
- NVDA를 켭니다 (Insert+Q로 켜기).
- Chrome에서 회원가입 페이지를 엽니다.
- H 키로 페이지 제목을 확인합니다.
- F 키로 폼 필드를 하나씩 이동하며 각 필드의 레이블이 읽히는지 확인합니다.
- Enter로 제출을 시도하고 오류 메시지가 읽히는지 확인합니다.
- NVDA를 끕니다 (Insert+Q).
변형하기: 헤딩 목차 추출
NVDA Insert+F7 → 헤딩 탭에서 페이지 전체 헤딩 목차를 확인합니다. 이것이 페이지의 논리적 구조입니다. 목차가 의미 있게 구성되어 있는지 평가합니다.
정리와 확인
핵심 내용 요약
- NVDA: 무료 Windows 스크린리더, nvaccess.org
- 탐색 모드: H(제목), K(링크), F(폼), B(버튼), G(이미지)
- 포커스 모드: 폼 입력 시 자동 전환, Escape로 복귀
- Insert+F7: 요소 목록(헤딩, 링크, 랜드마크)
- Insert+Q: NVDA 종료
확인 문제
문제 1. NVDA 탐색 모드에서 H 키를 누르면 어떤 효과가 있는가?
다음 헤딩 요소(<h1>~<h6>)로 포커스를 이동합니다.
Shift+H는 이전 헤딩으로 이동합니다.
문제 2. 폼 입력란에서 NVDA가 자동으로 포커스 모드로 전환되는 이유는?
탐색 모드에서는 F 키가 "다음 폼 필드로 이동"으로 동작합니다.
입력 모드에서는 F 키를 타이핑에 사용해야 하므로
폼 필드에 포커스하면 자동으로 포커스 모드로 전환됩니다.
다음 챕터에서는 VoiceOver를 다룹니다. macOS와 iOS에서 기본 제공되는 스크린리더 VoiceOver의 사용법과 웹 테스트 방법을 알아봅니다.