표의 구성

무엇을 요구하나요?

데이터를 담은 표는 어느 칸이 제목이고 각 칸이 어떤 행·열에 속하는지 프로그램이 알 수 있게 만들어야 합니다. 눈으로는 굵은 글씨나 배경색으로 제목 칸을 알아보지만, 화면 낭독기는 th와 scope 같은 구조 정보로만 알 수 있습니다.

구조가 잘 잡힌 표에서 화면 낭독기는 칸을 옮길 때마다 “등급, 골드, 혜택, 적립 3%“처럼 제목과 값을 함께 읽어줍니다.

자주 틀리는 예

1. 제목 칸을 td + 굵은 글씨로 만듦

<table>
  <tr><td><b>등급</b></td><td><b>혜택</b></td></tr>
  <tr><td>골드</td><td>적립 3%</td></tr>
</table>

<table>
  <caption>회원 등급별 혜택</caption>
  <thead>
    <tr><th scope="col">등급</th><th scope="col">혜택</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">골드</th><td>적립 3%</td></tr>
  </tbody>
</table>

• caption: 표의 제목. 화면 낭독기가 표에 들어갈 때 먼저 읽습니다.
• scope="col": 아래쪽 칸들의 제목, scope="row": 오른쪽 칸들의 제목.

2. 제목이 두 줄 이상인 복잡한 표

제목이 여러 단계로 겹치면 scope만으로는 관계를 알기 어렵습니다. 이때는 id와 headers로 칸과 제목을 직접 연결합니다.

<tr>
  <th id="q1" scope="col">1분기</th>
</tr>
<tr>
  <th id="seoul" scope="row">서울</th>
  <td headers="seoul q1">120</td>
</tr>

가능하면 표를 나눠 단순하게 만드는 것이 가장 좋습니다.

3. 레이아웃용 표에 th를 씀

화면 배치용 표에 th, caption을 쓰면 화면 낭독기가 데이터 표로 착각합니다.

<table role="presentation">
  <tr><td>왼쪽 메뉴</td><td>본문</td></tr>
</table>

확인하는 방법

1. 확장 프로그램 페이지 검사는 제목 칸(th)이 없는 표, headers 연결 오류를 찾아줍니다.
2. 화면 낭독기(NVDA, VoiceOver)로 표 안에서 칸을 옮기며 제목이 함께 읽히는지 들어보세요.
3. 표 제목(caption)이 표 내용을 알맞게 설명하는지는 직접 판단하세요.