표는 접근성을 위해 "thead" 요소를 포함해야 합니다.

Tables should include a "thead" element for accessibility.

 

표는 접근성을 위해 "thead" 요소를 포함해야 합니다.

 

오류 해결 방법: 이 오류는 HTML 표(<table>)의 구조를 명확하게 구분하는 <thead> 태그가 빠졌다는 것을 의미합니다.

HTML 표는 내용에 따라 머리글, 본문, 바닥글 세 부분으로 구조를 나눌 수 있습니다. 이렇게 구조를 나누면 컴퓨터(특히 스크린 리더와 같은 보조 기술)가 표의 내용을 더 정확하게 이해하고 사용자에게 전달할 수 있습니다.

• <thead> (Table Head): 표의 머리글 영역을 감싸는 태그입니다. 주로 각 열의 제목(<th>)이 포함된 행(<tr>)을 이 태그로 묶어줍니다.
• <tbody> (Table Body): 표의 본문 영역, 즉 실제 데이터가 포함된 행들을 감싸는 태그입니다.
• <tfoot> (Table Foot): 표의 바닥글 영역으로, 합계나 요약 정보가 포함된 행을 감쌀 때 사용합니다. (선택 사항)

<thead> 태그를 사용해 머리글 영역을 명확히 지정하면, 스크린 리더는 어떤 부분이 제목이고 어떤 부분이 데이터인지를 확실하게 구분할 수 있어 표의 정보를 훨씬 더 쉽게 파악할 수 있게 됩니다.

---

잘못된 코드 예시

아래 코드는 표의 제목 행(<th>가 있는 행)이 있지만, 이 행을 <thead>로 감싸주지 않아 구조가 불분명하고 오류가 발생합니다.

HTML

 

<table>
  <tr>
    <th>월</th>
    <th>지출</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>100,000원</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>120,000원</td>
  </tr>
</table>

---

올바른 코드 예시

오류를 해결하려면 제목 행은 <thead>로 감싸고, 데이터 행들은 <tbody>로 감싸주어야 합니다. 이렇게 하면 표의 구조가 논리적이고 명확해집니다.

HTML

 

<table>
  <thead>
    <tr>
      <th>월</th>
      <th>지출</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1월</td>
      <td>100,000원</td>
    </tr>
    <tr>
      <td>2월</td>
      <td>120,000원</td>
    </tr>
  </tbody>
</table>

이처럼 <thead>와 <tbody>를 사용해 표의 구조를 명확히 구분하는 것은 웹 접근성을 준수하는 데 매우 중요합니다.