표의 구성

데이터 표
비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으면서 인식한다. 스크린리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터 셀이 구분되도록 구성해야 한다.

표의 구성은 제목 셀과 내용 셀 구분, 제목과 요약 정보 제공 이렇게 되어야 한다. 제목 셀은 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>

 

---

 

복잡한 표
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"라고 읽어주게 된다. 제목들을 연결해서 읽어주는 것이다.

 

---

 

레이아웃 테이블
데이터 테이블은 테이블 태그로 마크업하는 것이 맞으나, 데이터 테이블이 아닌 레이아웃 테이블은 테이블로 마크업하지 않고 구조적으로 마크업하는 것이 좋다. 만약 테이블로 마크업할 경우 데이터 테이블로 착각하여 혼란을 줄 수 있기 때문에 caption, summary, th를 제공하지 않아야 한다.

 

 

---

 

 

 

[ 출처 ]

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35125