HTML에서 접근성을 고려한 테이블 모범 사례

웹 접근성(Web Accessibility)은 웹 개발에서 매우 중요합니다. 장애인을 포함한 모든 사람이 웹 콘텐츠에 액세스하고 사용할 수 있도록 보장합니다. 웹 개발의 일반적인 요소 중 하나는 표의 사용입니다. 다음은 HTML에서 접근성 있는 표를 만들기 위한 몇 가지 모범 사례입니다.

표 헤더 사용

표 헤더(<th>)는 접근성을 위해 필수적입니다. 표 셀(<td>)의 데이터에 대한 컨텍스트를 제공합니다.

<table>
  <tr>
    <th>이름</th>
    <th>이메일</th>
  </tr>
  <tr>
    <td>존 도우</td>
    <td>john@example.com</td>
  </tr>
</table>

범위 속성 사용

scope 속성은 화면 리더가 헤더와 셀 간의 관계를 이해하는 데 도움이 됩니다.

<table>
  <tr>
    <th scope="col">이름</th>
    <th scope="col">이메일</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>honggildong@example.com</td>
  </tr>
</table>

캡션 요소 사용

<caption> 요소는 표에 대한 요약 또는 캡션을 제공하므로 화면 리더를 사용하는 사용자에게 유용할 수 있습니다.

<table>
  <caption>고객 연락처 정보</caption>
  <tr>
    <th scope="col">이름</th>
    <th scope="col">이메일</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>honggildong@example.com</td>
  </tr>
</table>

복잡한 테이블 피하기

여러 수준의 행과 열 머리글이 있는 복잡한 표는 화면 리더가 해석하기 어려울 수 있습니다. 가능하면 표를 단순화하거나 더 작은 표로 나누세요.

목표는 모든 사용자가 가능한 한 표에 액세스할 수 있도록 만드는 것입니다. 이러한 모범 사례를 따르면 표의 기능성과 접근성을 모두 보장할 수 있습니다.