5.3.1 표의 구성

요구 사항

표를 제공할 때는 표의 내용과 구조를 이해하는 데 필요한 정보를 함께 제공합니다.

• 표 정보 제공: 데이터를 표로 구성할 때 표의 내용·구조를 알 수 있는 정보(제목, 요약 등)를 제공해 표의 이용 방법을 예측할 수 있게 합니다.
• 표의 구성: 표를 탐색할 수 있도록 제목 셀과 데이터 셀을 구분해 구성합니다.

KWCAG 2.1의 해당 항목: 7.3.2 표의 구성(7.3 콘텐츠의 논리성 지침)

왜 필요한가요

화면낭독기는 표를 한 칸씩 읽기 때문에 제목 셀이 구분되어 있어야 “3월, 매출, 150억”처럼 데이터 셀이 어떤 행·열에 속하는지 함께 알려 줄 수 있습니다. 표 제목이 있으면 표에 들어가기 전에 무엇에 관한 표인지 알 수 있습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 인지장애가 있는 사용자

적용 방법

데이터 표는 <caption>으로 제목을 주고, 제목 셀은 <th>와 scope로 표시합니다. 구조가 복잡하면 id/headers로 연결합니다. 자세한 내용은 데이터 표 패턴을 참고하세요.

<table>
  <caption>2024년 지점별 분기 매출 (단위: 억 원)</caption>
  <thead>
    <tr><th scope="col">지점</th><th scope="col">1분기</th><th scope="col">2분기</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">서울</th><td>120</td><td>150</td></tr>
    <tr><th scope="row">부산</th><td>80</td><td>95</td></tr>
  </tbody>
</table>

HTML5에서 table의 summary 속성은 폐지되었으므로, 요약이 필요하면 caption 안이나 표 앞 본문에 씁니다.

사례

<table>
  <caption>열차 시간표</caption>
  <tr><th scope="col">열차</th><th scope="col">출발</th></tr>
  <tr><td>KTX 101</td><td>06:00</td></tr>
</table>

<table>
  <tr><td><b>열차</b></td><td><b>출발</b></td></tr>
  <tr><td>KTX 101</td><td>06:00</td></tr>
</table>

자주 하는 실수

• 데이터 표에 th가 없어 제목 셀과 데이터 셀이 구분되지 않습니다.
• 표의 제목(caption)이나 내용을 알려 주는 정보가 없습니다.
• 레이아웃 표에 th나 caption을 넣어 데이터 표처럼 읽힙니다.
• div로 표 모양을 만들고 표 구조 정보를 주지 않습니다.

검사 방법

• 데이터 표마다 caption 또는 표의 내용을 알 수 있는 제목이 있는지 확인합니다.
• 제목 셀이 th로 되어 있고 필요하면 scope나 headers로 관계가 지정되었는지 확인합니다.
• 레이아웃 표에는 데이터 표 요소가 없는지 확인합니다.
• 화면낭독기의 표 탐색 기능(NVDA Ctrl+Alt+방향키)으로 셀을 이동하며 제목 셀이 함께 읽히는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목