시각장애인의 표 접근 문제 by 백남중



1. 표의 음성 출력 문제
2. 스크린 리더별 표 접근 방법
    2.1 JAWS 9.0
    2.2 WinEye 6.1
    2.3 센스리더 프로페셔날 0.8
3. 효율적인 표 작성법
   3.1 웹 접근성 가이드 라인과 표
   3.2 <caption> 제공
   3.3 summary 제공
   3.4 <th> 태그 및 scope 속성 제공
   3.5 <id> <header> 제공
4. 표 접근을 위한 제언


1. 표의 음성 출력 문제
1994년 HTML 2.0에서 처음으로 소개된 표는 시간표, 가격표 등을 효과적으로 표현할 수 있어서 상당히 각광을 받았다. 그러나 표의 활용이 각종 데이터를 표현하는 것보다는 페이지의 정렬을 위하여 쓰이는 경우가 많아졌다.
이에 레이아웃용 표가 아닌 데이터 테이블에 대한 시각장애인의 접근이 문제가 되고 있다.

스크린 리더는 표를 만나면 표라고 알려주고 왼쪽 위부터 오른쪽 아래로 차례로 셀 단위로 표를 읽어준다.

Shelly's Daughter

Name
Age
Birthday
Jackie
5
April 5
Beth
8
January 14


위와 같이 음성 출력하기 때문에 시각장애인은 현재 몇 행, 몇 열의 데이터인지 알기 어렵다. 이에 스크린 리더들은 표 부분을 탐색하는 방법을 따로 제공해 주고 있다.

따라서 여기서는 어떻게 하면 효과적으로 시각장애인이 표를 접근할 수 있는가를 알아보고자 한다.

2. 스크린 리더별 표 접근 방법

2.1 JAWS 9.0

표로 이동: 웹 문서가 열린 상태에서 T를 누르면 현재 문서 내의 표로 이동한다. 이전 표로 이동하려면 Shift-T를 하면 된다.
T로 이동하면

Shelly's Daughters column 1 row 1 name

과 같이 표의 캡션(Shelly's Daughter), 첫 번째 칼럼의 위치 정보(column 1 row 1)와 내용(name)을 음성 출력한다.

표 목록 보기: 현재 문서의 표 목록은 Ctrl-Ins-T를 하면 Select a Table 대화상자가 나타난다.

JAWS의 select a table 대화상자

현재 표의 목록이 나타나며, 표에 캡션이 있으면 캡션이 니오고 표의 행, 열을 4x3 과 같이 자동으로 넣어주어 시각장애인이 이해하기 쉽게 배려한다. 만일 캡션이 없는 경우에는 1행에 있는 내용을 보여준다.

표 내의 특정 셀로 이동: 현재 표 내의 특정 셀로 이동하기 위해서는 Ctrl-Logo-J를 실행하면 Jump to Table Cell 대화상자가 나타난다.

JAWS의 Jump to a Table Cell 대화상자

Jump to Table Cell 대화상자에서 이동할 셀의 열,행 수를 입력한 후 엔터하면 해당 셀로 이동한다. 예를 들어 2열 3행으로 이동하고자 하면 2,3 이라고 입력한 후 엔터한다.

2.2 WinEye 6.1

WinEye는 Insert-V를 눌러 Verbosity Settings에서 Browser Mode의 Tables에서 음성 출력하는 것을 정의할 수 있다.
WinEye의 Verbosity Settings 대화상자
WinEye 6.1은 웹 문서가 열리면 현재 문서의 Link, Frame, Table, Heading, Flash Object에 관한 내용을 음성 출력한다.

140 links 2 tables 1 heading

표로 이동: t를 누르면 현재 문서 내의 표로 이동하면서

table 1 starts 3 rows 4 column
table 4 Shelly's Daughter starts 3 rows 3 columns


과 같이 현재 문서 내의 표 번호(table 1), 캡션(Shelly's Daughter), 표 구조(3 rows 4 columns)를 음성 출력한다.
더 이상 표가 없는 경우에는

no table

이라고 음성 출력한다.
이전 표로 이동하려면 Shift-T를 하면 된다.

표 모드(table mode): WinEye 6.1은 효과적인 표 탐색을 위한 표 모드를 제공한다.
t를 눌러 일단 표에 위치한 후 Ctrl-Plus(또는 NumPad. Plus)를 누르면 표 모드로 들어간다.
Ctrl-Plus(또는 NumPad. Plus)를 눌러 표 모드로 진입하면

Table 1 Shelly's Daughter R1 G1 Name

과 같이 표 번호(Table 1), 캡션(Shelly's Daughter), 좌표(R1 G1), 값(Name)을 음성 출력한다.
표 모드로 들어간 상태에서 t를 누르면 중간의 표가 아닌 부분은 건너뛰고 표로만 이동할 수 있다.
표 모드를 끝내려면 Ctrl-Minus(또는 NumPad Minus)를 누른다. Table Off 라고 음성 출력하면서 표 모드가 끝난다.
만일 표 안의 다른 표에 있을 경우 표를 빠져 나가 바로 본문으로 이동하려면 Ctrl-Shift-Minus(또는 NumPad Minus)를 누르면 된다.

2.3 센스리더 프로페셔날 0.8

센스리더는 처음 문서가 열릴 때 표가 있다는 것을 제공하는 기능은 없다.
표로 이동: ctrl-f3를 실행하면 표가 있는 위치로 이동하면서

테이블시작 (3행 3열)

과 같이 테이블 구조를 음성 출력한다.
ctrl-f3으로 이동해도 문서 내에서의 표 번호는 알려주지 않으며, caption이 있더라도 음성 출력하지 않는다.
표의 끝에서는 테이블 끝 이라고 음성 출력한다.
행이 바뀔 때는 빈줄 이라고 음성 출력한다.

2.4 표 내에서의 이동 및 탐색

스크린 리더들은 표 내에서 이동 및 읽기에 관한 각종 방법을 제공한다.
셀을 이동하고 해당 내용을 읽기 위해서는 셀 단위 이동(다음, 이전, 위, 아래 셀로 이동), 첫 셀로 이동(표 처음, 행 처음, 열 처음), 마지막 셀로 이동(표 마지막, 행 마지막, 열 마지막)을 활용한다.
또한 현재 셀에서 이동하지 않은 채 셀 읽기(현재, 위, 아래, 다음, 이전, 행 첫 셀, 열 첫 셀), 행 읽기, 열 읽기 등을 통하여 표의 내용을 확인할 수 있다.

스크린 리더의 표 관련 기능 비교표
Jaws 9.0WinEye 6.1센스리더 프로 0.8
표로 이동TTCtrl-F3
이전 표로 이동Shift-TShift-TCtrl-Shift-F3
표 모드 시작 Ctrl-Plus 
표 모드 끝 Ctrl-Minus 
표 선택F8  
표 목록 보기Ctrl-Insert-T  
이동표 내에서 다른 셀로 이동Ctrl-Logo-J  
이전 셀 위치로 이동Shift-Logo-J  
다음 셀로 이동Ctrl-Alt-→Insert-→Ctrl-Alt-→
이전 셀로 이동Ctrl-Alt-←Insert-←Ctrl-Alt-←
윗 셀로 이동Ctrl-Alt-↑Insert-↑Ctrl-Alt-↑
아래 셀로 이동Ctrl-Alt-↓Insert-↓Ctrl-Alt-↓
표 첫 셀로 이동Ctrl-Alt-Home[-T 
표 마지막 셀로 이동Ctrl-Alt-End]-T- 
다음 행으로 이동Logo-↓  
이전 행으로 이동Logo-↑  
행 첫 셀로 이동Ctrl-Alt-Shift-↑Ctrl-Insert-←Ctrl-Alt-PgUp
행 마지막 셀로 이동Ctrl-Alt-Shift-↓Ctrl-Insert-→Ctrl-Alt-PgDn
열 첫 셀로 이동Ctrl-Alt-Shift-←Ctrl-Insert-↑Ctrl-Alt-Home
열 마지막 셀로 이동Ctrl-Alt-Shift-→Ctrl-Insert-↓Ctrl-Alt-End
읽기현재 셀 읽기Ctrl-Alt-NumPad 5 Ctrl-Alt-Enter
현재 행 읽기 Logo-NumPad 5  
행 처음부터 현재 셀까지 읽기Insert-Shift-Home  
현재 셀부터 행 끝까지 읽기 Insert-Shift-PgUp  
현재 열 읽기Logo-Period  
열 처음부터 현재 셀까지 읽기Insert-Shift-End  
현재 셀부터 열 끝까지 읽기Insert-Shift-PgDn  
윗 셀 읽기  Ctrl-Alt-SHift-↑
아래 셀 읽기  Ctrl-Alt-SHift-↓
이전 셀 읽기  Ctrl-Alt-SHift-←
다음 셀 읽기  Ctrl-Alt-SHift-→
현재 행 첫 셀 읽기  Ctrl-Alt-SHift-PgUp
현재 행 마지막 셀 읽기  Ctrl-Alt-SHift-PgDn
현재 열의 첫 셀 읽기  Ctrl-Alt-SHift-Home
현재 열의 마지막 셀 읽기  Ctrl-Alt-SHift-End
Summary 읽기 Ctrl-Shift-S 


3. 효율적인 표 작성법

3.1 웹 접근성 가이드 라인과 표


웹 접근성 가이드 라인(WCAG) 1.0에서는 지침 5에서 표는 표를 지원하지 않는 환경에서도 유연하게 변경될 수 있도록 만든다 라고 규정하고 있다.

지침 5의 항목에 대한 체크 포인트는 5가지이다.
- 5.1 데이터가 들어있는 표에는 제목행과 제목열(통칭하여 header)을 명시한다. [중요도 1]
- 5.2 두 개 이상의 논리적인 제목행이나 제목열을 갖는 데이터가 들어있는 표에서는 데이터 칸끼리 또는 제목 칸끼리 관련 짓는 마크업을 사용한다. [중요도 1]
- 5.3 표 내용을 펼쳐서 순서대로 나열했을 때에 의미가 없는 경우에 단지 내용물의 자리 배치만을 위해 표를 사용하지는 말아라. 내용물을 배치하려는 목적으로 표를 쓴다면, 대안적인 대체 정보(표를 풀어서 순서대로 나열한 것(linearized version) 등)를 제공한다. [중요도 2]
- 5.4 만약 자리 배치를 위해 표를 사용한다면, 시각적인 형식을 맞추기 위해 구조 표시용 마크업을 사용하지 말아라. [중요도 2]
- 5.5 표의 요약 정보를 제공하라. [중요도 3]
- 5.6 표의 제목줄(헤더 부분)에 들어가는 내용에는 약자를 제공하라. (역자 주: 제목줄에 약자를 씀으로써 화면 음성 변환기가 매번 제목을 읽을 때마다 긴 제목을 반복해서 읽는 것을 피할 수 있다.) [중요도 3]
(원본: http://gregshin.pe.kr/wcag/)

한국형 웹 콘텐츠 접근성 지침(kwcag) 1.0에서는 표에 관한 내용이 지침 3 이해의 용이성에 정의되어 있다.
일반인은 물론 노년층 및 장애인 들도 가능한 한 모든 콘텐츠들에 대한 내용 및 사용 방법을 쉽게 이해할 수 있도록 웹 콘텐츠 및 제어 방식을 구성하여야 한다는 항목 중에서 3.1 데이터 테이블의 구성에 정의하였습니다.
항목 3.1 데이터 테이블 구성에서는 데이터 테이블은 데이터 셀의 내용에 대한 정보가 옳게 전달될 수 있어야 한다고 정의하고 있다.
이에 대한 요구 조건으로 다음의 두가지를 들고 있다.
- 데이터 테이블은 테이블의 제목이나 테이블의 내용을 모두 요약하여 제공해야 한다.
- 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성하여야 한다

3.2 caption 제공

각각의 스크린 리더들은 문서 내에서 표로 직접 이동하는 방법(JAWS나 WinEye의 경우에는 T, 센스리더의 경우에는 Ctrl-F3)을 제공하고 있다. 이렇게 이동한 경우에는 테이블시작 (3행 3열) 과 같이 현재 표의 구조를 음성 출력한다.
이 기법은 표 바로 앞에 위치한 텍스트가 테이블에 속하지 않거나, 여러 개의 테이블이 같은 웹페이지에 있을 때와 같은 경우 매우 유용하다
캡션은 헤딩과 비슷하지만 헤딩과는 달리 표의 일부라는 점이 다르며, summary의 유무에 관계없이 제공할 수 있다.
캡션은 시각적으로 화면에 나타나기 때문에 표 제목을 헤딩을 활용하여 표 밖에 기술할 필요는 없다.
캡션은 해당 표의 주제에 관한 내용을 기술한다.
또한 단지 레이아웃을 위해 사용된 표에서는 캡션 사용을 금하고 있다.

캡션이 화면에 나타난 표

<pre> <table border="1">
<caption>Shelly's Daughters</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
........</pre>

외국 스크린 리더 2종은 T를 눌러 표 간 이동을 하면 캡션을 포함한 표 구조를 음성 출력하지만 음성 출력하지만 센스리더는 음성 출력하지 않는다. .

JAWS: Shelly's Daughter column 1 row 1 name
WinEye: Table 2 Shelly's Daughter starts 3 rows 3 columns
센스리더: 테이블시작 (3행 3열)

센스 리더는 해당 표에 위치한 후 아래 방향키를 눌러 표로 들어가면

테이블 제목: Shelly's Daughter

와 같이 제목을 음성 출력해준다.

3.3 summary 제공

caption과는 달리 화면에 나타나지 않지만 스크린 리더로는 들을 수 있는 summary는 복잡한 구조거나, 행 또는 열이 많은 표를 이해하는데 탁월하다.
<table> 태그의 속성으로 제공되는 summary에서는 표의 구조나 탐색에 관한 내용을 기술해 준다.
caption에서는 간단하게 표의 제목을 기술하지만 summary에서는 구조나 활용 방법을 기술해 주며, caption의 내용이 summary에 중복되서는 안된다.
또한 레이 아웃 테이블에서 summary를 사용해서는 안된다.

테이블의 summary 관련
<TABLE border="1" 
summary="This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
........

예를 들어 2.4 표 내에서의 이동 및 탐색에 있는 스크린 리더의 표 관련 기능 비교표의 summary는 다음과 같이 달면 좋을 것 같다.

<table border="1" 
summary="3종 스크린 리더(JAWS 9.0, WinEye 6.1, 센스리더 프로 0.8)의
인터넷 표에서의 기능키 비교 관련 표로서
열 제목은 1단계이나 행 제목은 1단계와 2단계가 섞여 있다">
<caption>스크린 리더의 표 관련 기능 비교표</caption>
.........
캡션과 summary가 모두 사용된 경우 JAWS나 WinEye는 캡션을 먼저 읽고 그 다음에 summary를 음성 출력한다.
센스리더의 경우에는 는 summary를 테이블 설명: 이라고 먼저 음성 출력하고, 캡션을 테이블 제목: 다음에 내용을 음성 출력한다.

테이블 설명: This table charts the number of
테이블 제목: Cups of coffee consumed by each senator


3.4 <th>에 scope 속성 제공

화면 상에 나타나는 표를 보고 일반인은 행과 열의 위치를 구별하여 셀의 내용을 쉽게 이해할 수 있지만 시각장애인은 현재 셀의 내용만을 듣기 때문에 행과 열의 내용을 파악하는 것이 어렵다.
따라서 이러한 경우에는 경우 데이터 테이블의 행과 열의 제목에 <th> 태그를 사용한다.
또한 <th>를 사용하는 경우에는 열이나 행에 <th>가 영향을 미치게 하기 위하여 scope 속성을 같이 사용해 주어야 한다.

scope 설명용 표
<table border="1" align="center">
<caption>Shelly's Daughters</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>


위와 같이 작성된 문서를 JAWS에서 이동하면 다음과 같이 음성 출력한다.

Column 1 Row 1 Name
Age Column 2
Birthday Column 3
Jackie April 5 Row 2
Age 5 Colum 2
Name Jackie Column 1


즉 표 처음(Column 1 Row 1 Name)에서 행 단위 오른쪽으로 이동하면 셀의 내용과 바뀐 열 값을 음성 출력하고(Age Column 2, Birthday Column 3), 행이 바뀌면 행 제목과 셀의 값 그리고 바뀐 행 번호를 음성 출력한다.(Jackie April 5 Row 2)
만일 현재 셀의 값을 알고 싶다면 Ctrl-Alt-NumPad. 5를 누르면

Column 2 Row 2 Age Jackie 5

라고 음성 출력하여 시각장애인이 현재 셀의 위치 정보와 값을 정확히 알 수 있다.
WinEye도 아래와 같이 음성 출력하여 행이나 열이 바뀌는 경우 <th> 태그에서 정한 내용을 음성 출력해 준다.

Age
Birthday
Jackie Birthdat April 5
Age Jackie 5,


JAWS나 WinEye 모두 표 내에서 셀 이동시 행이나 열이 바뀌는 경우 음성 출력하는 옵션(행, 열 모두 읽음, 좌표로 읽음, 읽지 않음 등)을 사용자가 바꿀 수 있는 옵션이 있다.
센스리더는 표에서 셀 단위로 이동을 해도 <th> 태그로 정의한 내용을 전혀 음성 출력하지 않는다.

3.5 <th>에 id 및 header 속성 사용

표의 행 또는 열에 <th> 태그 및 scope 속성을 활용하여 표를 작성하면 시각장애인이 셀 단위로 이동하는 경우 훨씬 쉽게 내용을 알 수 있다.
그러나 행이나 열의 제목이 두 개 이상 되는 경우 이러한 방법으로는 시각장애인이 표를 이해할 수 없다. 따라서 복잡한 표의 경우에는 <th> 태그에 id와 header 속성을 사용해야 한다.

id와 header 사용 관련 표
<table border="1" 
summary="Wholesale and retail prices of imported and domestic oranges
and apples in Sydney and Melbourne.
There are two levels of column headings.">
<caption>Imported and domestic orange and apple prices
in Sydney and Melbourne</caption>
<thead>
<tr>
<td></td>
<th colspan="2" id="imported">Imported</th>
<th colspan="2" id="domestic">Domestic</th>
</tr>
<tr>
<td></td>
<th id="oranges-imp">Oranges</th>
<th id="apples-imp">Apples</th>
<th id="oranges-dom">Oranges</th>
<th id="apples-dom">Apples</th>
</tr>
</thead>
<tbody>
<tr>
<th id="sydney" colspan="5">Sydney</th>
</tr>
<tr>
<th headers="sydney" id="wholesale-sydney">Wholesale</th>
<td headers="imported oranges-imp sydney wholesale-sydney">$1.00</td>
<td headers="imported apples-imp sydney wholesale-sydney">$1.25</td>
<td headers="domestic oranges-dom sydney wholesale-sydney">$1.20</td>
<td headers="domestic apples-dom sydney wholesale-sydney">$1.00</td>
</tr>
<tr>
<th headers="sydney" id="retail-sydney">Retail</th>
<td headers="imported oranges-imp sydney retail-sydney">$2.00</td>
<td headers="imported apples-imp sydney retail-sydney">$3.00</td>
<td headers="domestic oranges-dom sydney retail-sydney">$1.80</td>
<td headers="domestic apples-dom sydney retail-sydney">$1.60</td>
</tr>
<tr>
<th id="melbourne" colspan="5">Melbourne</th>
</tr>
<tr>
<th headers="melbourne" id="wholesale-melbourne">Wholesale</th>
<td headers="imported oranges-imp melbourne wholesale-melbourne">$1.20</td>
<td headers="imported apples-imp melbourne wholesale-melbourne">$1.30</td>
<td headers="domestic oranges-dom melbourne wholesale-melbourne">$1.00</td>
<td headers="domestic apples-dom melbourne wholesale-melbourne">$0.80</td>
</tr>
<tr>
<th headers="melbourne" id="retail-melbourne">Retail</th>
<td headers="imported oranges-imp melbourne retail-melbourne">$1.60</td>
<td headers="imported apples-imp melbourne retail-melbourne">$2.00</td>
<td headers="domestic oranges-dom melbourne retail-melbourne">$2.00</td>
<td headers="domestic apples-dom melbourne retail-melbourne">$1.50</td>
</tr>
</tbody>
</table>


위와 같이 작성한 표는 JAWS의 경우 다음과 같이 음성 출력한다.
먼저 T로 표간 이동을 하는 경우 summary에 'There are two levels of column headings' 적혀 있어서 이를 음성 출력함으로서 시각장애인은 표 구조가 2 단계로 되어 있다는 것을 미리 알 수 있다.

Sydney Wholesale
Imported Oranges Sydney $1.00 Column 2
Imported Apples Sydney $1.25 Column 3
Domestic Oranges Sydney $1.20 Column 4


센스리더는 id나 header 속성을 전혀 인식하지 못하고

Sydney
Wholesale
$1.00
$1.25
$1.20


과 같이 음성 출력한다.

4. 표 접근을 위한 제언

시각장애인이 스크린 리더로 표를 효과적으로 접근하기 위해서는

- 스크린 리더 개발자는 웹 접근 지침에 의해 정의된 내용을 정확히 음성 출력할 수 있도록 기능을 개선해야 한다. 아무리 가이드 라인에 입각하여 작성한 문서라도 제대로 음성 출력을 하지 않는다면 무용지물이 되기 때문이다.
단순히 외국 스크린 리더의 기능 모방이 아닌 우리 나름대로 인터넷을 해석하여 음성 출력할 수 있는 기능을 개발하여야 한다.

- 웹 문서 저작자들은 가급적 접근성 지침에 입각하여 표에 제목, 요약 등을 제공하고 단순한 표에는 <th>에 scope 속성을, 복잡한 표에는 id, header 속성을 제공하여야 한다.

스크린 리더 개발자는 접근성 지침을 무시한 채 기능 개선을 하고, 웹 문서 저작자들은 귀찮고 번거롭다는 미명 하에 편하게 문서를 만든다면 인터넷 마지막 사용자 중의 한 사람인 시각장애인은 하소연할 곳이 없게 된다.

핑백

  • 백남중 : 접근 가능한 테이블 만들기 2009-12-30 23:52:40 #

    ... 시각장애인의 표 접근 문제</a>라는 명칭 하에 테이블과 스크린 리더(센스리더)와의 관계에 관한 글을 올렸다. 그러나 2008년 WCAG2.0이 발표되고, 센스리더도 업그레이드 되면서 테이블 내에서 id, header등을 제대로 접근하고, 음성 출력 할 수 있게 됨에 따라 스크린 리더와 테이블의 음성 출력에 관한 내용을 다시 정리하였다. 특히 이번 글에서는 테이블에서 헤더 부분(&lt;th scope="col"&gt; &lt;th scope="ro ... more

덧글

  • chsong 2008/05/16 02:18 # 삭제

    좋은글 잘읽었습니다.
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


me2day