HTML 표 접근성 검사기

HTML 표 접근성 검사기 사용 가이드

화면 낭독기는 표의 칸을 읽을 때 그 칸의 머리글을 함께 알려 줍니다. 머리글이 <th>로 표시되지 않은 표는 '500'이 가격인지 수량인지 알 수 없게 읽힙니다. 이 검사기는 붙여 넣은 HTML의 모든 표를 찾아 데이터 표와 배치용 표로 구분하고 필요한 마크업을 확인합니다.

데이터 표에는 무슨 표인지 알려 주는 <caption>(또는 aria-label), 머리글 <th>가 필요합니다. 행 머리글과 열 머리글이 함께 있으면 scope="col"·"row"를 지정해야 하고, 잘못된 scope 값, 내용이 빈 th, 없는 id를 가리키는 headers 속성은 오류로 표시합니다.

rowspan·colspan으로 병합한 칸이 있는 복잡한 표는 headers 속성으로 머리글을 직접 연결하거나 표를 나누라고 안내하고, 표 안의 표도 알려 줍니다. role="presentation"인 배치용 표에 th나 caption이 있으면 데이터 표인지 헷갈린다고 경고합니다.

사용 방법

1. 1'검사할 HTML' 칸에 표가 든 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 표마다 구분, caption, 머리글 수, 병합 칸 수가 나옵니다.
3. 3✕ 항목은 첫 행·첫 열을 <th>로 바꾸는 등 마크업을 고칩니다.
4. 4△ 항목(caption, scope, 병합)을 보완하고 다시 실행합니다.

<table><caption>요금표</caption><thead><tr><th scope="col">상품</th><th scope="col">가격</th></tr></thead>…</table>
<table><tr><td>이름</td><td>점수</td></tr><tr><td>김민수</td><td>90</td></tr></table>

표 2개 검사

△ 표 2: <caption>이나 aria-label이 없어 무슨 표인지 먼저 알려 주지 못합니다
✕ 표 2: <th> 머리글 칸이 없습니다 — 칸을 읽을 때 어느 항목의 값인지 알 수 없습니다

표	구분	이름(caption)	크기	머리글	병합 칸
표 1	데이터	"요금표"	2행	th 2	병합 0

이럴 때 쓰면 좋아요

• 요금표·성적표 같은 데이터 표를 게시하기 전에 점검할 때
• 엑셀에서 변환한 HTML 표의 머리글을 확인할 때
• 공공기관 게시물의 표 접근성을 자가 진단할 때
• 배치용 표를 쓰는 오래된 페이지를 정리할 때

문제가 생겼을 때

활용 팁

• <caption>은 표 바로 위에 보이는 제목이 되므로 디자인에도 도움이 됩니다.
• XLSX → HTML 표 변환기로 만든 표는 첫 행이 th로 바뀌어 기본 머리글을 갖춥니다.
• 레이아웃은 표 대신 CSS 그리드나 플렉스로 만드는 것이 좋습니다.

자주 묻는 질문