[웹접근성] 테이블 구조

웹접근성 - 테이블 구조

 

🔎 비장애인들은 표를 인식할 수 없지만 앞을 볼 수 없는 사람들은 청각적인 요소를 통해 인식한다. 

이때, 스크린리더가 마크업에 따라서 표를 낭독해주기 때문에 데이터를 테이블로 작성할 경우

테이블의 내용, 구조 등을 이해할 수 있도록 제목 셀과 데이터 셀이 구분되도록 작성해야한다.

 

📌 테이블 마크업 순서

• <table> ➡ <caption> ➡ <colgroup>,<col>  ➡ <thead>,<th> ➡ <tfoot> ➡ <tbody>,<td>

 

📌 표를 작성할 경우 <table>요소를 사용하여 작성

 

📌 <table>요소

• 웹접근성을 위해 표를 구조화하고 의미 부여에 필요한 역할을 한다.

 

📌 <caption>

• 테이블에 설명을 달아주는 태그, 테이블의목적과 내용을 요약해서 설명
• 일반적으로 테이블 요소 바로 밑에 위치하며, 화면상 비노출을 하기 위해 css로 숨김처리를 한다.
• 이때 display: none; 또는 visibility: hidden;을 사용하면 스크린리더기가 낭독을 할 수 없다.

 

📌 <colgroup>, <col>

• <th>, <td>의 넓이를 조절하기 위해서 사용

 

📌 <thead>, <th>

• 표의 제목 셀 그룹
• 해당 영역에는 <td>태그가 올 수 없다
• <th>헤더의 행과 셀
• 표의 첫번째 행이나 헤더영역에 <th>요소를 사용하여 헤더 셀을 정의
• 헤더 셀은 표의 열 제목을 나타낸다. 스크린 리더사용자들은 헤더 정보를 통해 표를 이해할 수 있다.
• <th> 태그에는 웹접근성을 위해 scope 속성을 넣어주어야한다. scope 태그는 스크린 리더기가 읽는 순서를 관여한다. 
• thead에 있는 <th scope="col"> 속성부터 읽는다. 

 

📌 <tfoot>

• 표의 footer영역, 합계와 같은 결과요소를 넣는 영역 그룹

 

📌 <tbody>, <td>

• 표의 본문 셀 그룹
• <td>데이터 셀
• <td>요소를 사용하여 표의 데이터 셀을 정의. 데이터 셀은 표의 내용을 나타낸다.

 

📌 복잡한 구조의 테이블

• 테이블의 열과 행을 병합하는 등 테이블의 구조가 복잡해질 때,  <scope>속성과 <th>요소의 headers 속성을 사용하여 테이블의 범위와 관계를 설정

<table class="table">
  <caption>테이블에 대한 설명</caption>
  <colgroup>
    <col style="width:200px">
    <col style="width:auto">
  </colgroup>
  <thead class="thead-hidden">
    <tr>
      <th scope="col">구분</th>
      <th scope="col">내용</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">타이틀</th>
         <td>내용</td>
      </tr>
      <tr>
        <th scope="row">타이틀</th>
        <td>내용</td>
      </tr>
  </tbody>
</table>

 

🔎 주의 

 

• <table> 태그는 레이아웃 용도로는 사용하지 않는다. 표를 위해서만 사용해야한다. 
• <thead>와 <tfoot>은 반드시 들어가야하는 요소는 아니다.