내맘대로의 EPUB 제작 가이드

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>로 감싸주지 않아 구조가 불분명하고 오류가 발생합니다.

<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>로 감싸주어야 합니다. 이렇게 하면 표의 구조가 논리적이고 명확해집니다.

<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>를 사용해 표의 구조를 명확히 구분하는 것은 웹 접근성을 준수하는 데 매우 중요합니다.

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>로 작성하여 오류가 발생합니다.

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

올바른 코드 예시

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

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

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

Html "a" element must have text.

HTML "a" 요소에는 텍스트가 있어야 합니다.

오류 해결 방법 : 이 오류는 웹페이지에서 다른 페이지로 연결되는 링크를 만드는 <a> 태그 안에 클릭할 수 있는 글자(텍스트)가 없다는 의미입니다.

<a> 태그는 사용자가 클릭해서 다른 곳으로 이동할 수 있는 하이퍼링크를 만듭니다. 하지만 <a> 태그와 </a> 태그 사이에 아무 내용이 없으면, 화면에 링크가 보이지 않아 사용자가 클릭할 수 없습니다.

잘못된 코드 예시

<a href="page2.xhtml"></a>

위와 같이 코드가 작성되면 <a> 태그는 아무런 텍스트를 가지고 있지 않기 때문에 화면에 보이지 않고, 따라서 사용자가 링크를 클릭하여 page2.xhtml 파일로 이동할 수 없습니다.

올바른 코드 예시

문제를 해결하려면 <a> 태그와 </a> 태그 사이에 사용자가 보고 클릭할 수 있는 설명 텍스트를 넣어주어야 합니다.

<a href="page2.xhtml">다음 페이지로 이동하기</a>

이렇게 수정하면, 화면에 '다음 페이지로 이동하기'라는 글자가 나타나고 사용자는 이 글자를 클릭해서 링크로 이동할 수 있습니다.

이미지를 링크로 사용하는 경우

만약 텍스트 대신 이미지를 클릭해서 링크를 이동하게 만들고 싶다면, <a> 태그 안에 <img> 태그를 넣고, <img> 태그에 alt 속성을 사용해 이미지에 대한 설명을 반드시 추가해야 합니다. 이 alt 속성의 설명이 링크의 텍스트 역할을 대신하게 됩니다.

<a href="cart.xhtml">
  <img src="images/cart_icon.png" alt="장바구니로 이동">
</a>

위 코드에서는 alt 속성의 '장바구니로 이동'이라는 텍스트가 링크의 목적을 설명해 주는 역할을 합니다.