표 요소는 "caption" 요소를 포함해야 합니다.

Table elements should include a caption element.

 

이 규칙은 표(table)에 대한 접근성과 가독성을 높이는 데 매우 중요합니다.

<caption> 요소는 표의 '공식적인 제목' 역할을 합니다. 📚

## 중요한 이유

화면 낭독기(Screen Reader)와 같은 보조 기술은 표를 인식했을 때 이 <caption>에 있는 내용을 가장 먼저 읽어줍니다. 이 제목을 통해 사용자는 표의 전체 내용을 살펴보기 전에 무엇에 대한 정보인지 미리 파악할 수 있습니다.

## 해결 방법

해결 방법은 간단합니다. <table> 태그 바로 아래, 첫 번째 <tr> 태그 위에 <caption> 요소를 추가하고 그 안에 표의 제목을 적으면 됩니다.

올바른 구조:

HTML

 

<table>
  <caption>월별 판매 보고서</caption>
  <tr>
    <th>월</th>
    <th>수량</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>150</td>
  </tr>
</table>

이렇게 하면 모든 사용자가 표의 목적을 더 명확하게 이해할 수 있습니다.