접근성을 위해 표 머리글 셀은 "th" 요소로 식별해야 합니다.

Table heading cells should be identified by "th" elements for accessibility.

 

접근성을 위해 표 머리글 셀은 "th" 요소로 식별해야 합니다. 오류 해결 방법: 이 오류는 HTML에서 표(table)를 만들 때, 표의 제목(머리글) 부분에 <th> 태그 대신 <td> 태그를 사용했다는 의미입니다. 🧑‍💻

HTML 표는 주로 두 가지 종류의 셀 태그로 구성됩니다.

• <th> (Table Header): 표의 제목 셀을 의미합니다. 예를 들어 '이름', '나이', '도시'와 같이 각 열의 내용이 무엇인지 알려주는 역할을 합니다.
• <td> (Table Data): 표의 실제 데이터가 들어가는 일반 셀을 의미합니다.

스크린 리더(화면을 읽어주는 프로그램)와 같은 보조 기술은 <th> 태그를 사용해 표의 구조를 파악합니다. 사용자가 특정 데이터 셀(<td>)로 이동하면, 스크린 리더는 그 셀이 속한 열과 행의 제목(<th>)을 함께 읽어주어 데이터의 의미를 정확하게 파악할 수 있도록 돕습니다.

만약 제목 셀을 <th>가 아닌 <td>로 만들면, 스크린 리더 사용자는 데이터의 의미를 파악하기 어려워 접근성이 크게 떨어집니다.

---

잘못된 코드 예시

아래 코드는 표의 제목인 '책 제목'과 '저자'를 일반 데이터 셀인 <td>로 작성하여 오류가 발생합니다.

HTML

 

<table>
  <tr>
    <td>책 제목</td>
    <td>저자</td>
  </tr>
  <tr>
    <td>어린 왕자</td>
    <td>생텍쥐페리</td>
  </tr>
</table>

---

올바른 코드 예시

표의 제목 역할을 하는 첫 번째 행의 <td> 태그를 <th> 태그로 수정하면 오류가 해결되고 접근성이 향상됩니다.

HTML

 

<table>
  <tr>
    <th>책 제목</th>
    <th>저자</th>
  </tr>
  <tr>
    <td>어린 왕자</td>
    <td>생텍쥐페리</td>
  </tr>
</table>

이렇게 수정하면 스크린 리더는 '어린 왕자' 셀을 읽을 때 "책 제목: 어린 왕자"라고 알려줄 수 있어, 사용자가 표의 내용을 훨씬 쉽게 이해할 수 있습니다.