KWCAG 2.2 · 7.3.2

표의 구성 검사 방법

KWCAG 2.2 「표의 구성」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

데이터 표에 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를 제거하세요.

주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.