(원칙.3 이해의 용이성) 항목.20 표의 구성 - 정보통신접근성(웹접근성)

한국형 웹 콘텐츠 접근성 지침 2.1 
Korean Web Content Accessibility Guidelines 2.1

웹 접근성 품질인증제도란?

• 장애인·고령자 등의 정보 접근 및 이용 편의를 증진하기 위하여 웹 접근성 표준을 준수한 사이트에 대해 품질을 인증 하고 인증마크를 부여
  * 웹접근성 준수는 필수지만 품질 인증마크는 선택 입니다.
• 관련 법령에 의거 과학기술정보통신부가 지정한 웹 접근성 품질 인증기관을 통해 심사 및 인증
  * ｢지능정보화기본법｣ 제47조, 제48조 등

---

원칙 3. 이해의 용이성(Understandable)

항목 20. (표의 구성) 표는 이해하기 쉽게 구성해야 한다.

 

표를 이해할 수 있도록 정보를 제공한 경우 준수한 것으로 인정

 

[20-1] 표의 제목과 요약정보를 제공하지 않은 경우

 

HTML 4.01 - <caption> 요소, summary 속성을 제공하지 않거나 용도 또는 설명이 부적절한 경우

HTML 5 - 에는 <caption> 만 제공, html5 는 summary 속성 미제공

 

[ 개선가이드 ]

HTML 4.01

① summary="테이블제목"

② <caption>이 표는+제목컬럼나열+제공표</caption>

HTML 5

② <caption>테이블제목, 이 표는+제목컬럼나열+제공표</caption>

 

[ 개선예시 ]

HTML 4.01

① <table summary="공지사항(목록)">

② <caption>이표는 번호, 제목, 작성일 제공표</caption>

HTML 5

② <caption>공지사항(목록), 이표는 번호, 제목, 작성일 제공표</caption>

 

위배사항	개선 가이드
<caption> 요소, summary 속성을 제공하지 않거나 용도 또는 설명이 부적절한 경우	[ 개선가이드 ] ① summary="테이블제목+의 상세정보를 제공한 표입니다." ② <caption>테이블제목+표입니다. 이 표는+제목컬럼나열+의 내용을 확인할 수 있습니다.</caption> [ 개선예제 ] ① summary="이용가능 고객정보의 상세정보를 제공한 표입니다." ② <caption>이용가능 고객정보표입니다. 이 표는 이용가능 대상, 이용불가 대상의 내용을 확인할 수 있습니다.</caption>
	<caption>표제목 - 번호, 내용, 날짜 제공 표</caption>
	(예시1) <caption><strong>공지사항 게시물</strong><p>번호, 제목, 등록일, 등록자 정보를 포함하는 표</p>
	(예시2) <caption><strong>공지사항 목록</strong><p>공지사항 목록입니다. 번호, 제목, 등록일, 등록자로 구성되어 있습니다.</p>
	<caption>정보제공 표입니다. 이표는 번호, 제목, 등록일, 등록자로 구성되어 있습니다.</p>
	<caption>표제목 - 번호, 내용, 날짜 제공 표</caption>
	<span>사회적기업현황의 번호, 기업명, 지역, 사회서비스 분야 테이블입니다.</span>

 

[20-2] 표의 제목과 요약정보가 불충분하거나 적절하게 제공되지 않은 경우

<caption>표제목+표, 이표는 제목, 내용, 날짜로 구성</caption>

[20-3] 제목 셀과 내용 셀을 구분하지 않거나 잘못 구분한 경우

 

=> 데이터 테이블로 구성된 표에 <th> 내용이 제공되어 있지 않을경우

     * 내용셀 <td> 에 맞는 제목셀 <th> 내용을 제공하거나,

       <caption>, summary, <th> 를 제거하고 <td> 만으로 구성된 레이아웃 테이블로 제공해야 합니다.

       ※ 데이터 테이블로 구현하는 경우 HTML5 문서로 구성된 페이지에서는

           <table> 요소에 summary 속성을 지원하지 않으므로 <caption> 내에

          구분자 또는 추가 마크업을 이용하여 제목과 요약정보를 제공해야 합니다.

=> 스크린 리더 사용자가 표 내용을 이해하기 쉽도록 제목과 요약정보,

     제목셀 <th> 과 내용셀 <td> 로 구성된 데이터 테이블로 제공해야 합니다.

 

[20-4] 다단, 병합 등 복잡한 표를 제공 시 headers, id 속성을 통해 제목 셀과 내용 셀을 연결하지 않은 경우

=> 표 구조가 복잡한 경우 스크린 리더로 셀 내용을 이해하기 어렵기 때문에, 제목 셀 <th> 에 "scope" 속성을 제공하면 면 표를 이해하는데 도움이 됩니다. 이때 좀더 복잡한 표의 경우 <th id="id1">제목</th><td headers="id1">공조2</td> 와 같이 제공하면 제목과 내용 셀을 함께읽어 주어 표 이해에 도움이 됩니다.

(스크린리더마다 상이함)

 

[20-5] 표의 정보를 이해하기 어려운 중첩 표(표 안의 표)를 넣어 정보를 제공한 경우

 

=> <caption> 요소, summary 속성을 제공하지 않거나 용도 또는 설명이 부적절한 경우

     표에는 의미에 맞는 적절한 <caption> 요소와 summary 속성을 제공해야 한다

 

=> summary와 caption을 같은 용도로 사용한 경우(동일한 내용 제공 포함)

     <caption> 요소와 summary 속성은 서로 동일한 내용으로 제공하지 않아야 한다

 

=>  데이터 테이블에 제목 셀과 내용 셀을 <th>와 <td> 요소로 구분하지 않은 경우

      내용으로 구성된 표에는 제목셀과 내용셀을 구분해야 한다

 

=>  제목 셀 및 내용 셀의 다단, 병합 등 복잡한 표를 제공 시 headers 속성으로 <td>에서 <th>의 id를 참조

      또는 scope 속성으로 <th> 요소에 <td> 요소의 범위를 지정하여 제공하지 않은 경우

     복잡한 구성의 표를 제공할 경우 id, headers 속성을 제공하거나 scope 속성을 제공해야 한다

 

=>  배치용 테이블에 <th>, <caption> 요소, summary 속성을 사용한 경우

      단순히 레이아웃을 목적으로 만들어진 표에는 <th>, <caption> 요소, summary 속성을 제공하지 않아야 한다

 

레이아웃 표 (디자인을 위한 표)

디자인을 위한 표는 표로 인식하지 않도록 제목과 요약 내용을 제공하지 않는다.
가능한 데이터가 아닌 콘텐츠는 표 사용을 지양해야 합니다.