표의 구성 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

7.3.2 표의 구성

이해의 용이성

국제 기준 (WCAG 2.2)

1.3.1 정보와 관계 (A) ↗

어떻게 검사하나요

데이터 표에 caption 또는 요약이 제공되고 제목 셀(th)과 데이터 셀(td)이 구분되는지는 자동 검사되지만, 복잡한 표의 헤더 연결(scope, headers)이 의미상 올바른지는 스크린 리더로 셀을 탐색하며 확인하세요.

자동 검사로 잡히는 부분

이 항목은 5개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 제목 셀(th)에 연결된 데이터 셀이 없습니다 th-has-data-cells

  <th>가 실제 데이터 셀과 연결되지 않으면 스크린 리더가 표를 잘못 안내합니다. 표 구조를 점검하고 불필요한 th를 제거하거나 데이터를 채우세요.

• td의 headers 속성이 잘못된 셀을 참조합니다 td-headers-attr

  headers 속성은 같은 표 안에 있는 <th>의 id만 참조해야 합니다. 복잡한 표는 scope 속성 사용이 더 단순하고 안전합니다.

  <th scope="col">이름</th>
  <th scope="row">1분기</th>

• scope 속성 값이 올바르지 않습니다 scope-attr-valid

  scope는 <th>에서만 col | row | colgroup | rowgroup 값으로 사용해야 합니다.

• 표의 제목 셀이 비어 있습니다 empty-table-header

  빈 <th>는 스크린 리더 사용자가 열/행의 의미를 알 수 없게 합니다. 제목 텍스트를 채우거나 제목이 필요 없으면 <td>로 바꾸세요.

• 표의 caption과 summary가 중복됩니다 table-duplicate-name

  caption(표 제목)과 summary(구조 요약)에 같은 내용이 들어가면 중복 안내됩니다. 서로 다른 정보를 담거나 summary를 제거하세요.