Web Contents Accessibility Guideline

접근성 있는 웹 콘텐츠 설계

이해의 용이성

사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.

• 데이터 테이블 구성
• 논리적 구성
• 온라인 서식 구성

데이터 테이블 구성

데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

용어 정리

요구 조건

• 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다.
• 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성 하여야 한다.

적용시 장점

• 데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응 되는 모든 헤더 값을 알 수 있다.

적용 예

간단한 데이터 테이블 구성

HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각 <TD>와 <TH>태그를 사용하여 테이블을 구성한다.

복잡한 데이터 테이블 구성

HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.

데이터 테이블 설명

HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 <TABLE ... summary = "" > 태그를 사용하여 표시할 수 있다. 또한 <CAPTION> 태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. <TABLE title=""> 태그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도록 하면 편리하다.

X (BAD)

<table>
	<tr>
		<td>판수</td>
		<td>제, 개정일</td>
		<td>개정판 내용</thd>
	</tr>
	<tr>
		<td>제 1판</td>
		<td>2005년 12월 21일</td>
		<td>제정</td>
	</tr>
</table>

O (GOOD)

<table summary="제1판 2005년 12월 21일 제정">
<caption>표준의 이력</caption>
<col class="standards_history" />
<col />
<col class="standards_history" />
<thead>
	<tr>
		<th scope="col">판수</th>
		<th scope="col">제, 개정일</th>
		<th scope="col">개정판 내용</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>제 1판</td>
		<td>2005년 12월 21일</td>
		<td>제정</td>
	</tr>
</tbody>
</table>

맨 위로