데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.
이해의 용이성
작성자
관리자
작성일
2022-06-24 15:40
조회
1378
데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.
WAI에서 여기에 해당하는 항목은 다음과 같습니다.(중요도1)
5.1 데이터가 들어있는 표에는 제목행과 제목열(통칭하여 header)을 명시한다.
5.2 두 개 이상의 논리적인 제목행이나 제목열을 갖는 데이터가 들어있는 표에서는 데이터 칸끼리 또는 제목 칸끼리 관련 짓는 마크업을 사용한다.
이 항목은 논란의 소지가 있습니다. 우선 국내 웹사이트의 현실상 테이블이 데이터 전달용으로서의 기능 뿐만 아니라 레이아웃용으로 주로 사용되기 때문에 WAI 지침의 내용중 레이아웃용으로 테이블을 사용하는 것을 피하라는 요구는 기존의 웹사이트에 바로 적용하기에는 매우 힘듭니다. 그러나 스타일시트를 써서 형식을 분리하는 것은 단순히 접근성의 문제만은 아닙니다.
테이블의 본래 목적인 데이터 전달을 위해 사용할 경우 지켜야 할 점은 우선 테이블을 설명하는 캡션태그와 summary 속성을 사용할 것과 그리고 테이블 헤더(TH)를 써야 스크린 리더를 통해 접근할 경우 논리적으로 읽을 수 있다는 것입니다. 또한 테이블의 행이 구조적으로 나눠질 경우 , tfoot, 및 tbody col 및 colgroup, "headers", "scope" 및 "axis" 속성들을 적절하게 사용하여야 합니다.
[대상 장애]
- 시각 장애
- 시력 장애
사용예
■ <th> 태그와 headers, scope 속성을 활용하는 경우
참고. 해당 항목별 페널티
| 페이지 | 메타데이터가 없는 페이지 | 타이틀(Title)이 누락된 페이지 |
| 메인 페이지 | -4 | -2 |
| 허브 페이지 | -2 | -1 |
<span>참고. 해당 항목별 페널티</span>
<table class="fixtext" width="80%" border="0" cellpadding="0" cellspacing="1" bgcolor="#A9A9A9" style="text-align:center;">
<tr height=25>
<th id="c1" width="20%" bgcolor="#F5F5F5">페이지</th>
<th id="c2" width="40%" bgcolor="#F5F5F5">메타데이터가 없는 페이지</th>
<th id="c3" width="40%" bgcolor="#F5F5F5">타이틀(Title)이 누락된 페이지h;/td>
</tr>
<tr height=25>
<td id="r2" bgcolor="#FFFFFF">메인 페이지</td>
<td headers="r2 c2" bgcolor="#FFFFFF">-4</td>
<td headers="r2 c3" bgcolor="#FFFFFF">-2</td>
</tr>
<tr height=25>
<td id="r3" bgcolor="#FFFFFF">허브 페이지</td>
<td headers="r3 c2" bgcolor="#FFFFFF">-2</td>
<td headers="r3 c3" bgcolor="#FFFFFF">-1</td>
</tr>
</table>
<table class="fixtext" width="80%" border="0" cellpadding="0" cellspacing="1" bgcolor="#A9A9A9" style="text-align:center;">
<tr height=25>
<th id="c1" width="20%" bgcolor="#F5F5F5">페이지</th>
<th id="c2" width="40%" bgcolor="#F5F5F5">메타데이터가 없는 페이지</th>
<th id="c3" width="40%" bgcolor="#F5F5F5">타이틀(Title)이 누락된 페이지h;/td>
</tr>
<tr height=25>
<td id="r2" bgcolor="#FFFFFF">메인 페이지</td>
<td headers="r2 c2" bgcolor="#FFFFFF">-4</td>
<td headers="r2 c3" bgcolor="#FFFFFF">-2</td>
</tr>
<tr height=25>
<td id="r3" bgcolor="#FFFFFF">허브 페이지</td>
<td headers="r3 c2" bgcolor="#FFFFFF">-2</td>
<td headers="r3 c3" bgcolor="#FFFFFF">-1</td>
</tr>
</table>
위의 예제는 CoolCheck 웹 진단 서비스의 평가 기준으로 쓰인 기본 항목인 "나. 검색 및 문서관리의 용이성(기본 점수 20점, 최소점수 5점)" 항목의 페널티의 항목을 보여주기 위해 구성된 데이터 테이블입니다.
우선 각각의 컬럼에 id 속성을 부여하고 각각의 TD 데이터에 headers 속성을 넣어 해당 데이터가 어떤 컬럼의 값인지를 들려주게 됩니다.
우선 각각의 컬럼에 id 속성을 부여하고 각각의 TD 데이터에 headers 속성을 넣어 해당 데이터가 어떤 컬럼의 값인지를 들려주게 됩니다.
예를 들어 메인 페이지이면서 메타데이터가 없는 페이지의 페널티 값은 오류 건수당 -4로 책정되어 있습니다. 이때 headers="r2 c2"로 지정하게 되면 스크린 리더나 보이스 리더에서는 "메인페이지 메타데이터가 없는 페이지 -4" 이렇게 읽어 주게 됩니다. 리더의 종류에 따라 <th>를 인식하는 경우와 scope 속성을 인식하는 경우가 있습니다. 아직 모든 리더들이 이런 부분을 완전히 인식하지는 않으며 각각의 행과 열을 순차적으로 읽어주는 선형화된 구조에 의지하는 수준입니다.
아래 소스 코드는 <th> 태그 대신 scope속성을 사용한 예입니다.
<span>참고. 해당 항목별 페널티</span>
<table class="fixtext" width="80%" border="0" cellpadding="0" cellspacing="1" bgcolor="#A9A9A9" style="text-align:center;">
<tr height=25>
<td width="20%" bgcolor="#F5F5F5">페이지</td>
<td scope="col" width="40%" bgcolor="#F5F5F5">메타데이터가 없는 페이지</td>
<td scope="col" width="40%" bgcolor="#F5F5F5">타이틀(Title)이 누락된 페이지</td>
</tr>
<tr height=25>
<td scope="row" bgcolor="#FFFFFF">메인 페이지</td>
<td bgcolor="#FFFFFF">-4</td>
<td bgcolor="#FFFFFF">-2</td>
</tr>
<tr height=25>
<td scope="row" bgcolor="#FFFFFF">허브 페이지</td>
<td bgcolor="#FFFFFF">-2</td>
<td bgcolor="#FFFFFF">-1</td>
</tr>
</table>
<table class="fixtext" width="80%" border="0" cellpadding="0" cellspacing="1" bgcolor="#A9A9A9" style="text-align:center;">
<tr height=25>
<td width="20%" bgcolor="#F5F5F5">페이지</td>
<td scope="col" width="40%" bgcolor="#F5F5F5">메타데이터가 없는 페이지</td>
<td scope="col" width="40%" bgcolor="#F5F5F5">타이틀(Title)이 누락된 페이지</td>
</tr>
<tr height=25>
<td scope="row" bgcolor="#FFFFFF">메인 페이지</td>
<td bgcolor="#FFFFFF">-4</td>
<td bgcolor="#FFFFFF">-2</td>
</tr>
<tr height=25>
<td scope="row" bgcolor="#FFFFFF">허브 페이지</td>
<td bgcolor="#FFFFFF">-2</td>
<td bgcolor="#FFFFFF">-1</td>
</tr>
</table>