들어가기 전에

img 태그에 alt 속성을 추가하는 이유가 무엇인지 기억하시나요?

바로 접근성을 지키기 위함인데요, 테이블 태그 역시 제목 셀인 th와 내용 셀인 td를 스크린리더가 올바르게 읽을 수 있도록 속성을 추가해 주어야 합니다.

스타일을 꾸미기 전에 테이블의 접근성에 대해 살펴보도록 하겠습니다.

학습하기

주요 태그 및 속성

• scope
• col, row, colgroup, rowgroup
• id, headers

scope

모든 제목 셀(th)에는 scope 속성을 추가해서 어떤 내용 셀(td)에 대한 것인지 알려주어야 합니다.

scope의 값으로는 col, row, colgroup, rowgroup을 사용할 수 있는데, 같은 열의 제목에는 col, 같은 행의 제목에는 row 값을 추가해 주시면 됩니다.

colgroup과 rowgroup은 같은 방식으로 제목 셀이 속한 열 혹은 행 그룹과 모두 관련이 되어 있을 경우 사용합니다. 보통은 병합된 제목 셀에 주로 사용이 되겠죠?

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

id, headers

정말 복잡한 표의 경우에는 id와 headers 속성을 추가하기도 합니다.

모든 th에 id를 추가하고, 내용이라고 생각되는 셀에는 headers를 추가하여 그 값으로 id의 값들을 나열해 주면 됩니다. 

th와 td를 직접 연결해주는 방식이지만 굉장히 복잡하며, ​대부분​ scope 속성만으로 충분히 접근성을 지킬 수 있기 때문에 잘 사용하지 않습니다.

<table>
<caption>
    Availability of holiday accommodation
</caption>
<thead>
    <tr>
        <td></td>
        <th id="stud" scope="col">Studio</th>
        <th id="apt" scope="col">Apt</th>
        <th id="chal" scope="col">Chalet</th>
        <th id="villa" scope="col">Villa</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th id="par" colspan="5" scope="colgroup">Paris</th>
    </tr>
    <tr>
        <th headers="par" id="pbed1">1 bedroom</th>
        <td headers="par pbed1 stud">11</td>
        <td headers="par pbed1 apt">20</td>
        <td headers="par pbed1 chal">25</td>
        <td headers="par pbed1 villa">23</td>
    </tr>
</tbody>
</table>

참고자료