한국형 웹콘텐츠 접근성 지침의 검사항목 중 헤딩과 관련된 항목이 있다.
2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
검사항목을 준수하고 페이지를 구조적으로 마크업하기 위해 콘텐츠 블럭의 제목으로 헤딩(heading)을 많이 제공하고 있다. 제공된 헤딩 정보는 화면낭독기를 이용하는 사용자가 웹페이지의 구조를 파악하고 페이지를 빠르게 탐색하는데 매우 효과적으로 이용된다.
우선 헤딩의 존재만으로 콘텐츠 블럭을 구분하는 효과가 있다. 시각장애인은 한번에 하나의 요소에만 접근할 수 있기 때문에 전체적인 구조와 맥락을 파악하는 것이 쉽지 않다. 이 때 헤딩정보가 요소와 요소를 구분하고 단락을 구분하고 묶어 줄 수 있는 정보로 활용된다.
또한 헤딩의 숫자는 콘텐츠의 포함관계와 계층구조를 이해할 수 있게 한다. h1은 로고, h2는 메뉴, h3은 콘텐츠영역의 제목 등 일반적으로 많이 사용되는 헤딩숫자에 대한 구조적인 의미를 이해할 수 있고, h2가 나오다가 h3이 나온 경우 하위에 포함된 콘텐츠로 계층구조를 인지할 수 있다.
다들 이렇게 알고 있지만 실제로 화면낭독기가 헤딩을 어떻게 음성출력하는지 알고 있는 사람은 많지 않다
헤딩에 많이 사용되는 텍스트, 이미지, 텍스트링크, 이미지링크를 조합해서 화면낭독기가 어떻게 읽어주고 있는지 확인해보자
테스트환경
Windows 7 32bit / Internet Explorer 8
센스리더 3.2.2.0
센스리더 4.0 beta4
JAWS 13 한글
JAWS 15 영문
NVDA development 10114
헤딩 테스트 샘플 페이지
http://haeppa.kr/test/heading201406.html
기능 | 센스리더 3.2.2.0 | 센스리더 4.0 beta4 | JAWS 13 한글 | JAWS 15 영문 | NVDA development 10114 |
---|---|---|---|---|---|
헤딩단위 이동 | Ctrl+F6 Ctrl+Shift+F6 | H Shift+H | H Shift+H | H Shift+H | H Shift+H |
헤딩 레벨단위 이동 | none | 1~6 Shift+1~6 | 1~6 Shift+1~6 | 1~6 Shift+1~6 | 1~6 Shift+1~6 |
헤딩 목록 | none | none | Insert+F6 | Insert+F6 | Insert+F7 |
※ 헤딩레벨 단위 이동기능은 헤딩레벨에 해당하는 숫자(1~6)를 직접 눌러서 이동합니다.
※ JAWS 는 헤당레벨 단위 이동기능 사용시 section, landmark role, frame 등의 영향을 받아 이동 범위가 제한되지만 센스리더와 NVDA는 페이지내의 모든 헤딩으로 레벨단위 이동을 사용할 수 있습니다.
화면낭독기의 헤딩 음성출력 결과
아래 테스트 결과는 헤딩단위, 헤딩레벨단위 이동기능을 사용하지 않고 위/아래 방향키만 눌러서 페이지를 탐색하고 그 결과를 정리한 것입니다. 헤딩단위 이동기능 사용시 각 화면낭독기 마다 헤딩 속 요소에 대한 음성출력 방식이 매우 다르기 때문에 헤딩에 대한 지원여부를 직관적으로 확인하기 어려운 점을 감안한 것입니다.
1. 헤딩 기본 스타일
HTML
<h3>뽀로로</h3>
<h3><a href="poro.jpg">뽀로로</a></h3>
<h3><img src="poro.jpg" alt="뽀로로" /></h3>
<h3><a href="poro2.jpg"><img src="poro.jpg" alt="뽀로로" /></a></h3>
화면낭독기 종류 | 음성출력 내용 | 비고 |
---|---|---|
센스리더 3.2.2.0 | 뽀로로 헤딩3 뽀로로 헤딩3 링크 헤딩3 *1 뽀로로 이미지 뽀로로 헤딩3 그래픽링크 | *1) 헤딩에 이미지가 있음녀 헤딩과 이미지를 분리 |
센스리더 4.0 beta4 | 뽀로로 헤딩3 뽀로로 헤딩3 링크 뽀로로 헤딩3 그래픽 링크 *1 뽀로로 헤딩3 그래픽 링크 | *1) 이미지를 그래픽링크로 음성출력하는 버그 (추정) |
JAWS 13 한글 | 헤딩레벨3 뽀로로 헤딩레벨3 링크 뽀로로 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 그래픽 뽀로로 | none |
JAWS 15 영문 | 헤딩레벨3 뽀로로 헤딩레벨3 링크 뽀로로 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 그래픽 뽀로로 | none |
NVDA development 10114 | 헤딩레벨3 뽀로로 헤딩레벨3 링크 뽀로로 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 그래픽 뽀로로 | none |
2. 헤딩 속 링크와 텍스트가 2개
HTML
<h3><a href="poro.jpg">뽀로로</a>크롱이</h3>
<h3><a href="poro.jpg">뽀로로</a><a href="krong.jpg">크롱이</a></h3>
화면낭독기 종류 | 음성출력 내용 | 비고 |
---|---|---|
센스리더 3.2.2.0 | 뽀로로 헤딩3 링크 크롱이 *1 뽀로로 헤딩3 링크 크롱이 링크 *1 | *1) 헤딩으로 묶어도 링크와 텍스트가 분리되어 헤딩 정보를 알 수 없음 |
센스리더 4.0 beta4 | 뽀로로 헤딩3 링크 크롱이 *1 뽀로로 헤딩3 링크 크롱이 링크 *1 | *1) 헤딩으로 묶어도 링크와 텍스트가 분리되어 헤딩 정보를 알 수 없음 |
JAWS 13 한글 | 헤딩레벨3 링크 뽀로로 헤딩레벨3 크롱이 헤딩레벨3 링크 뽀로로 헤딩레벨3 링크 크롱이 | none |
JAWS 15 영문 | 헤딩레벨3 링크 뽀로로 헤딩레벨3 크롱이 헤딩레벨3 링크 뽀로로 헤딩레벨3 링크 크롱이 | none |
NVDA development 10114 | 헤딩레벨3 링크 뽀로로 크롱이 헤딩레벨3 링크 뽀로로 링크 크롱이 | none |
3. 헤딩 속 이미지와 텍스트가 2개
HTML
<h3><img src="poro.jpg" alt="뽀로로" />크롱이</h3>
<h3><img src="poro.jpg" alt="뽀로로" /><img src="krong.jpg" alt="크롱이" /></h3>
<h3><img src="krong.jpg" alt="크롱이" /><img src="poro.jpg" alt="뽀로로" /></h3>
화면낭독기 종류 | 음성출력 내용 | 비고 |
---|---|---|
센스리더 3.2.2.0 | 헤딩3 *1 뽀로로 이미지 크롱이 *2 헤딩3 *1 뽀로로 이미지 크롱이 이미지 *2 헤딩3 *1 크롱이 이미지 뽀로로 이미지 *2 | *1) 헤딩에 이미지가 있으면 헤딩과 이미지를 분리 *2) 헤딩으로 묶어도 요소가 모두 분리되어 헤딩 정보를 알 수 없음 |
센스리더 4.0 beta4 | 뽀로로 헤딩3 그래픽링크 *1*2 크롱이 헤딩3 그래픽링크 *1*3 뽀로로 헤딩3 그래픽링크 *1*3 | *1) 이미지를 그래픽링크로 음성출력하는 버그 (추정) *2) 텍스트정보가 누락됨 *3) 헤딩 안에 이미지가 2개인 경우 마지막 이미지만 음성출력 |
JAWS 13 한글 | 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 크롱이 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 그래픽 크롱이 헤딩레벨3 그래픽 크롱이 헤딩레벨3 그래픽 뽀로로 | none |
JAWS 15 영문 | 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 크롱이 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 그래픽 크롱이 헤딩레벨3 그래픽 크롱이 헤딩레벨3 그래픽 뽀로로 | none |
NVDA development 10114 | 헤딩레벨3 그래픽 뽀로로 크롱이 헤딩레벨3 그래픽 뽀로로 그래픽 크롱이 헤딩레벨3 그래픽 크롱이 그래픽 뽀로로 | none |
4. 헤딩 속 이미지와 링크가 2개
HTML
<h3><img src="poro.jpg" alt="뽀로로" /><a href="krong.jpg">크롱이</a></h3>
<h3><img src="poro.jpg" alt="뽀로로" /><a href="poro.jpg"><img src="krong.jpg" alt="크롱이" /></a></h3>
<h3><a href="poro.jpg"><img src="poro.jpg" alt="뽀로로" /></a><a href="krong.jpg"><img src="krong.jpg" alt="크롱이" /></a></h3>
화면낭독기 종류 | 음성출력 내용 | 비고 |
---|---|---|
센스리더 3.2.2.0 | 헤딩3 *1 뽀로로 이미지 크롱이 링크 *2 헤딩3 *1 뽀로로 이미지 크롱이 그래픽링크 *2 뽀로로 헤딩3 그래픽링크 크롱이 그래픽링크 *2 | *1) 헤딩에 이미지가 있으면 헤딩과 이미지를 분리 *2) 헤딩으로 묶어도 요소가 모두 분리되어 헤딩 정보를 알 수 없음 |
센스리더 4.0 beta4 | 뽀로로 헤딩3 그래픽링크 크롱이 링크 *1 뽀로로 헤딩3 그래픽링크 크롱이 그래픽링크 *1 뽀로로 헤딩3 그래픽링크 크롱이 그래픽링크 *1 | *1) 헤딩으로 묶어도 요소가 모두 분리되어 헤딩 정보를 알 수 없음 |
JAWS 13 한글 | 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 크롱이 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 그래픽 크롱이 헤딩레벨3 링크 그래픽 뽀로로 헤딩레벨3 링크 그래픽 크롱이 | none |
JAWS 15 영문 | 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 크롱이 헤딩레벨3 그래픽 뽀로로 헤딩레벨3 링크 그래픽 크롱이 헤딩레벨3 링크 그래픽 뽀로로 헤딩레벨3 링크 그래픽 크롱이 | none |
NVDA development 10114 | 헤딩레벨3 그래픽 뽀로로 링크 크롱이 헤딩레벨3 그래픽 뽀로로 링크 그래픽 크롱이 헤딩레벨3 링크 그래픽 뽀로로 링크 그래픽 크롱이 | none |
정리하자면…
- JAWS 13 한글과 15 영문은 음성출력에 차이가 없음
- NVDA, JAWS는 헤딩정보와 요소의 누락이 없음
- 센스리더 3.2.2.0은
- 이미지와 헤딩이 분리되어 헤딩정보 불확실
- 헤딩 속 이미지, 링크, 텍스트가 2개 이상 있으면 서로 분리되고 헤딩정보가 누락
- 센스리더 4.0 beta4는
- “헤딩x 이미지”를 “헤딩x 그래픽링크”로 음성출력하는 버그
- 헤딩 속 이미지, 링크, 텍스트가 2개 이상 있으면 서로 분리되고 헤딩정보가 누락
- 헤딩 속 이미지와 텍스트가 있으면 텍스트 누락
- 헤딩 속 이미지가 2개 있으면 첫번째 이미지 정보 누락
- NVDA는 2,3,4 샘플에서 화면레이아웃모드 사용으로 모든 요소를 한 번에 음성출력하고 있으나 좌/우 방향키를 눌러 확인하면 요소의 시작/끝을 알 수 있어 문제되지 않음
추가, 헤딩 / 헤딩레벨 단위 이동기능의 차이
HTML
<h3>내용1-1</h3>
<h3>내용1-2</h3>
<h1>제목2</h1>
<h3>내용2-1</h3>
<h3>내용2-2</h3>
<h1>제목3</h1>
<h3>내용3-1</h3>
<h3>내용3-2</h3>
위와 같은 구성된 경우 헤딩단위 이동기능을 이용하면
제목1 헤딩1
내용1-1 헤딩3
내용1-2 헤딩3
제목2 헤딩1
내용2-1 헤딩3
내용2-2 헤딩3
…..
위와 같이 모든 헤딩을 읽으면서 페이지를 탐색합니다.
하지만 헤딩레벨 단위 이동기능은 약간 다릅니다.
숫자 1만 누르면
제목1 헤딩1
제목2 헤딩1
제목3 헤딩1
숫자3만 누르면
내용1-1 헤딩3
내용1-2 헤딩3
내용2-1 헤딩3
내용2-2 헤딩3
……
위와 같은 형태로 숫자에 해당하는 레벨의 헤딩만 읽으면서 페이지를 탐색하게 됩니다. 페이지 구성에 따라 헤딩레벨단위 이동기능을 잘 활용한다면 효과적인 페이지 탐색이 가능합니다.
끝
Trackback URL : http://www.haeppa.kr/trackback/115
Trackback RSS : http://www.haeppa.kr/rss/trackback/115
Trackback ATOM : http://www.haeppa.kr/atom/trackback/115
당신의 의견을 작성해 주세요.