Accessibility 본문

3.3.2 표의 구성

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

필요성

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

대상

전맹

적용기술

  • 표의 제목을 <caption> 요소로 제공
  • 표의 구조 또는 내용에 대한 요약을 summary 속성으로 제공
  • 표의 헤더 셀(<th> 요소)과 , 데이터 셀(<td> 요소)의 관계를 제공
  • 복잡한 표의 경우 id, header, 일반적인 표의 경우 scope 제공

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

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
수동 검사방법
  • summary 속성 및 <caption> 요소 유무 체크
  • summary 속성 값과 <caption> 요소 값의 중복 여부 체크
  • <th> 요소 유무 체크
  • scope 속성값이 적절한지 체크
  • HTML5 에서 summary 속성 이슈는 미적용
  • 하나의 <table> 요소에 1개 이상의 오류 항목 발생시, 해당 오류 항목 수로 오류수(건) 처리
  • 배치용 테이블(Layout Table)은 평가에서 제외

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

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

발견수(건)

<table> 요소 수

오류수(건)
  • summary 속성이나 <caption> 요소가 모두 없는 <table> 요소 수
  • summary 속성 값과 <caption> 요소 값이 중복된 <table> 요소 수
  • <th> 요소가 모두 없는 <table> 요소 수
평가점수

100 - (수동 오류수 * 50)점

사례

오류사례

caption 요소 미제공, 요일 부분이 이미지로만 대체되어있음

표의 구성 오류사례이미지
<table>
	<tr class="week">
		<td colspan="7">
			<img ... alt="" />
		</td>
	</tr>
	<tr>
		<td ...>1</td>
		<td ...>2</td>
		<td ...>3</td>
		<td ...>4</td>
		<td ...>5</td>
		....
개선방법

caption을 제공하고, 현재 이미지로만 대체되어있는 tr에 th로 각 행의 제목을 표시해야 함

우수사례

caption제공되어있고 요일 부분이 th로 적절히 마크업되어 있음

표의 구성 우수사례이미지
<table summary="월간 생중계 일정표입니다.">
	<caption ...><em>월간 생중계 일정표</em></caption>
	<thead>
		<tr>
			<th abbr="일" ...>일요일</th>
			<th abbr="월" ...>월요일</th>
			<th abbr="화" ...>화요일</th>
			...
		</tr>
	</thead>