표를 만들었는데 스크린리더로는 숫자만 읽히던 이유

문제 발생

관리자 화면의 통계 표를 스크린리더로 확인해 봤더니 "1250, 340, 12"처럼 숫자만 이어서 읽혔습니다. 시각적으로는 열 제목이 보였지만, 마크업은 전부 <td>였습니다.

<table>
  <tr><td>날짜</td><td>조회수</td><td>댓글</td></tr>
  <tr><td>8월 1일</td><td>1250</td><td>12</td></tr>
</table>

원인 분석

<td>는 데이터 셀입니다. 시각적으로 굵게 보이더라도 브라우저와 보조기술에는 "이건 제목이다"라는 정보가 전달되지 않습니다. 그래서 셀 하나를 읽을 때 그것이 어느 열, 어느 행의 값인지 연결할 근거가 없습니다.

<th>는 헤더 셀이고, scope는 그 헤더가 어느 방향을 설명하는지 알려 줍니다.

• scope="col" — 이 헤더는 열을 설명한다
• scope="row" — 이 헤더는 행을 설명한다

MDN은 단순한 표에서는 scope가 추론되기도 하지만, 일부 보조기술이 올바르게 추론하지 못할 수 있으므로 명시하면 경험이 나아진다고 적어 둡니다.

<caption>은 표의 접근 가능한 이름이 됩니다. 표를 읽기 전에 "이게 무슨 표인가"를 알려 줘서, 필요 없는 표를 건너뛸 수 있게 합니다.

해결 방안

1. caption, th, scope를 갖춥니다.

<table>
  <caption>일자별 조회수와 댓글 수</caption>
  <thead>
    <tr>
      <th scope="col">날짜</th>
      <th scope="col">조회수</th>
      <th scope="col">댓글</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">8월 1일</th>
      <td>1250</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

행의 첫 칸도 <th scope="row">입니다 — 그 행이 무엇에 대한 것인지 설명하기 때문입니다.

2. thead/tbody/tfoot으로 나눕니다. 보조기술과 검색엔진에 구조 정보를 주고, 스타일을 걸기도 쉬워집니다.
3. 복잡한 표는 쪼갭니다. MDN의 권고입니다 — colspan/rowspan에 의존하는 표는 여러 개의 작은 표로 나누는 방법을 먼저 고려합니다. 인지적 부담과 보조기술 양쪽에 도움이 됩니다.
4. 쪼갤 수 없다면 id와 headers로 연결합니다. 다단 헤더처럼 scope로 표현되지 않는 구조에서 각 셀이 어떤 헤더에 속하는지 명시합니다.

<th id="joined" scope="col">가입</th>
...
<td headers="joined">2010-06-03</td>

5. 레이아웃 용도로 쓰지 않습니다. 표는 표 형식의 데이터를 위한 요소입니다. 화면 배치는 Grid나 Flexbox로 합니다.
6. 가로로 넘치면 스크롤 컨테이너에 담습니다. 좁은 화면에서 표가 페이지 전체를 가로 스크롤시키지 않도록, 표만 자기 영역에서 스크롤하게 감쌉니다.

공식 문서

• MDN: <table>
• MDN: <th> — scope 속성
• MDN: <caption>