Accessibility 본문

8.1 표의 구성

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

필요성

복잡한 데이터를 표로 제공할 경우, 시각장애인 등도 이해할 수 있도록 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.

대상

전맹

적용기술

  • 표의 제목을 <caption> 요소로 제공
  • 표의 구조 또는 내용에 대한 요약을 summary 속성으로 제공
  • 표의 헤더 셀(<th> 요소)과 , 데이터 셀(<td> 요소)의 관계를 제공

복잡한 표의 경우 id, header, 일반적인 표의 경우 scope 제공

검사방법 및 QA 지표 산정방법

수동 검사방법
  • <caption> 요소 유무 체크
  • <th> 요소 유무 체크
  • HTML5 에서 summary 속성 이슈는 미적용
  • 하나의 <table> 요소에 1개 이상의 오류 항목 발생시, 해당 오류 항목 수로 오류수(건) 처리
  • 배치용 테이블(Layout Table)은 평가에서 제외

    단, 배치용 테이블내에 데이터 표 존재시 데이터 표는 평가 진행함

    배치용 테이블(Layout Table) : summary 속성, <caption>, <thead>, <tfoot>, <tbody>, <th> 요소등 의미있는 마크업을 사용하지 않은 <table> 요소

오류수(건)
  • <caption> 요소가 없는 <table> 요소 수
  • <th> 요소가 모두 없는 <table> 요소 수

사례

오류사례

caption 요소 미제공

대체 텍스트 오류사례이미지
<table>
	<tbody>
		<tr>
		     <th>의료정밀</th>
		       <td>+3.77%</td>     
		</tr>
		...
	</tbody>
</table>
개선방법

적절한 caption을 제공해야함

우수사례

caption제공되어있고 th와 td로 적절히 마크업되어 있음

대체 텍스트 우수사례이미지
<table>
	<caption ...> 국제 금속 </caption>
	<thead>
	    <tr>
	        <th ...><span class="f_lb_s">금속명</th>
	        <th ...><span class="f_lb_s">가격($)</th>
	        <th...><span class="f_lb_s">전일비($)</th>
	        ...
	    </tr>
	</thead>
	<tbody>
		<tr>
			<td><a href="..">금</a><span class="f_tag_b">($/온스)</span>/td>
			<td><span>1,648.10</span></td>
			...
		</tr>
		...
	</tbody>
</table>