웹 접근성 가이드 - 표의 구성

<표의 구성>

표는 이해하기 쉽게 구성해야 한다.

 

1. 데이터 표

• 표의 구성
  - 제목 셀과 내용 셀 구분
  - 제목과 요약 정보 제공

제목 셀은 th로 내용 셀은 td로 마크업하면 된다.

또한 제목 셀이 가로, 세로로 있는 경우 scope로 행 제목인지 열 제목인지 구분 가능하도록 제공해야 한다.

 

• XHTML, HTML4
  - caption으로 제목을 제공, table의 summary 속성으로 요약 정보를 제공

<table summary="부서별 직원 수, 합계 정보">
	<caption>직원 관리 현황 표</caption>
	<thead>
		<tr>
			<th scope="col">번호</th>
			<th scope="col">부서</th>
			<th scope="col">직원 수</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="row">합계</th>
			<td></td>
			<td>15명</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>1</td>
			<td>총무부</td>
			<td>5명</td>
		</tr>
		<tr>
			<td>2</td>
			<td>인사부</td>
			<td>4명</td>
		</tr>
		<tr>
			<td>3</td>
			<td>기획부</td>
			<td>6명</td>
		</tr>
	</tbody>
</table>

 

• HTML5
  -  HTML5부터는 summary 속성이 없어졌으므로 caption에 제목과 요약 정보를 모두 제공
  * caption 내부에 있는 태그는 시각적으로 제목과 요약 정보를 구분하기 위한 태그로 필수는 아니다.

<table>
	<caption>
		<strong>직원 관리 현황 표</strong>
		<span>부서별 직원 수, 합계 정보</span>
	</caption>
	<thead>
		<tr>
			<th scope="col">번호</th>
			<th scope="col">부서</th>
			<th scope"col">직원 수</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>총무부</td>
			<td>5명</td>
		</tr>
             …
</table> 

 

2. 복잡한 표

id와 headers 속성을 이용하여 제목 셀과 내용 셀을 보다 정확하게 연결

<thead>
		<tr>
			<th rowspan="2" scope="col" id="date">기준일</th>
			<th colspan="2" scope="col" id="gsale">경기도 매매가</th>
		</tr>
		<tr>
			<th scope="col" id="price">면적단가</th>
			<th scope="col" id="change">변동액</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row" id="d20181020">2018.10.20</th>
			<td headers="date d20181020 gsale price">902</td>
			<td headers="date d20181020 gsale change">유지 0</td>
		</tr>
		<tr>
			<th scope="row" id="d20181021">2018.10.21</th>
			<td headers="date d20181021 gsale price">904</td>
			<td headers="date d20181021 gsale change">상승 2</td>
		</tr>
	</tbody>

제목 셀마다 각각 다른 id 값을 부여하고, 내용 셀과 관련이 있는 제목 셀의 id 값을 headers에 나열해주면 된다.

스크린리더에서는 headers에 나열된 id 값 순서대로 제목 셀을 읽어준다.

즉, 이 "902"를 그냥 "902"라고 읽어주는 것이 아니라, "기준일 2018년 10월 20일 경기도 매매가 면적단가 902"라고 읽어주게 된다. 제목들을 연결해서 읽어주는 것이다.

 

3. 레이아웃 테이블

데이터 테이블은 테이블 태그로 마크업하는 것이 맞으나,

데이터 테이블이 아닌 레이아웃 테이블은 테이블로 마크업하지 않고 구조적으로 마크업하는 것이 좋다.

만약 테이블로 마크업할 경우 데이터 테이블로 착각하여 혼란을 줄 수 있기 때문에 caption, summary, th를 제공하지 않아야 한다.

 

 

 

 

 

 

 

 

 

 

참고 : www.edwith.org/web-accessibility/lecture/46025