[H39] 데이터 테이블의 제목을 caption요소로 제공하자.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H39.html

---

---

기술설명

이 기술의 목표는 데이터 테이블의 캡션을 프로그래밍적으로 연결하는 것입니다.

caption요소는 테이블의 제목이며 식별자 기능을 가지고 있습니다. 그리고 테이블의 내용을 명확하게 설명해 주기도 합니다.

 

caption요소는 데이터 테이블의 제목을 저정해 주는 마크업입니다.

caption요소를 사용하면 테이블 식별자가 테이블과 연결된 상태가 됩니다.

caption요소를 사용하면 '스크린 리더' 같은 '보조 기술'이 테이블 제목을 인식하고, 사용자가 해당 caption요소로 이동할 수 있도록 도와줍니다.

 

caption요소는 테이블의 summary속성의 유무와 관계없이 사용 가능합니다.

caption요소는 테이블을 식별하는 기능을 가졌지만, summary속성은 테이블의 용도에 대한 개요를 제공하거나 테이블을 탐색하는 방법을 설명합니다.

caption요소와 summary속성를 함께 사용하는 경우 같은 정보를 제공해서는 안 됩니다.

 

*참고: WCAG 2.0에서는 테이블로 레이아웃을 만드는 것을 금지하지는 않지만, HTML 및 XHTML의 table요소가 가진 의미를 지키기 위해 CSS를 이용한 레이아웃을 권장하고 있습니다.

테이블로 레이아웃을 만드는 경우 caption요소는 사용하지 않습니다. 이는 요소들을 배치하기 위해 사용한 것이지 데이터 테이블이 아니기 때문입니다.

레이아웃 테이블의 목적은 요소들의 배치를 제어하는 것이기 때문에 사용자는 테이블의 존재를 인식하지 못하고, 화면에서는 테이블이 투명하게 보입니다.

그런데 레이아웃 테이블에 caption요소를 추가하면 테이블을 강조하는 것이 되므로 사용자가 테이블을 인식 할 수 있게 되어 투명성이 깨지게 됩니다.

 

 

예시

약속 일정에 대한 table의 caption요소

<table>
    <caption>3월 첫째 주 일정</caption>
    ....
</table>

 

 

자료

HTML 4.01 테이블 캡션: CAPTION 요소

 

 

관련기술

H51: 표 마크업을 사용하여 표 형식 정보 표시

H73: 테이블 요소의 요약 속성을 사용하여 데이터 테이블의 개요 제공

F46: 레이아웃 테이블에서 th 요소, 캡션 요소 또는 비어 있지 않은 요약 속성을 사용하여 성공 기준 1.3.1을 충족하지 못함

 

 

점검절차

1. 테이블에 caption요소가 있는지 확인합니다.

2. caption요소의 내용이 테이블을 식별하는 확인합니다.

 

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

 

나의 정리

테이블(table, 표)은 '시간표'나 '월간 매출표'와 같이 어떤 자료를 정리하여 보여줄 때 사용하는 요소입니다.

이렇게 자료를 기반으로 만들어진 테이블을 '데이터 테이블(data tables)'이라고 부릅니다.

'데이터 테이블(data tables)'의 제목을 표현하기 위해 사용되는 요소가 caption요소입니다.

caption요소를 통해 테이블에 제목을 제공하게 되며, 다른 테이블과 구별되기 때문에 식별기능(=identifier)도

가지게 됩니다.

caption요소는 테이블의 제목으로 사용되도록 지정된 요소로서 '스크린 리더' 같은 '보조 기술'들도 caption요소를 해당 테이블의 제목으로 인식하고 있습니다. 즉 웹 접근성을 위해서라도 꼭 테이블의 제목으로 caption요소를 사용해야 합니다.

 

caption요소는 아래 예제와 같이 table요소의 첫 번째 자식 요소로 사용하면 됩니다.

<table summary=“3월 첫째 주 일정표로 첫 번째 열은 날짜와 요일, 두 번째 열은 해야 할 일입니다”>
    <caption>3월 첫째 주 일정</caption>
    <thead>...</thead>
    <tbody>...</tbody>
</table>

 

table은 제목을 지정해 주는 caption요소 말고도 비슷한 summary속성도 있습니다.

summary속성은 표를 보는 방법이나 구성에 대한 설명 또는 표 내용에 대한 간단한 설명을 제공하는 것으로, caption요소 처럼 식별 기능이 없고, 표의 제목으로 사용되지는 않습니다.

caption요소와 summary속성을 잘 구분하여 사용하시기 바랍니다.

 

---

 

H39: Using caption elements to associate data table captions with data tables

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H39.html

H39: Using caption elements to associate data table captions with data tables | Techniques for WCAG 2.0