[웹접근성]table 웹접근성 예시와 설명(scope)

 

웹 접근성은 다양한 사용자, 특히 장애가 있는 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 것을 의미합니다. 표(table)를 사용할 때 웹 접근성을 높이기 위해 다음과 같은 예시와 지침을 따를 수 있습니다.

<p>다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다.</p> /* 표 설명 */
<table>
  <caption>2024년도 분기별 매출 현황</caption> /* 표 제목 */
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">분기</th>
      <th scope="col">매출액 (백만 달러)</th>
      <th scope="col">성장률 (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1분기</td>
      <td>10</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>2분기</td>
      <td>12</td>
      <td>20%</td>
    </tr>
    <tr>
      <td>3분기</td>
      <td>15</td>
      <td>25%</td>
    </tr>
    <tr>
      <td>4분기</td>
      <td>20</td>
      <td>33%</td>
    </tr>
  </tbody>
</table>

 

반응형

1. Caption (표 제목) 추가하기

표의 목적을 설명하는 캡션을 추가하면 사용자가 표의 내용을 이해하는 데 도움이 됩니다.

<caption>2024년도 분기별 매출 현황</caption>

 

2. Header (표 머리글) 사용하기

<th> 요소를 사용하여 표의 열 또는 행 머리글을 명확히 정의합니다. 스크린 리더는 <th> 태그를 통해 표의 구조를 이해하고 사용자에게 전달할 수 있습니다.

<thead>
    <tr>
      <th scope="col" aria-sort="ascending">분기</th>
      <th scope="col">매출액 (백만 달러)</th>
      <th scope="col">성장률 (%)</th>
    </tr>
  </thead>

 

3. Scope 속성 사용하기

<th> 태그에 scope 속성을 추가하면 표의 머리글이 열 또는 행을 나타내는지 명확히 할 수 있습니다.

• scope="col": 열 전체에 적용되는 헤더 셀.
• scope="row": 행 전체에 적용되는 헤더 셀.
• scope="rowgroup": 행 그룹에 적용되는 헤더 셀.
• scope="colgroup": 열 그룹에 적용되는 헤더 셀.

참고로 td에는 사용하지 않습니다. 대신 필요한 경우 headers 속성을 사용하여 특정 헤더 셀과 연결합니다.

<table>
  <caption>2024년도 분기별 매출 현황</caption>
  <thead>
    <tr>
      <th id="quarter">분기</th>
      <th id="revenue">매출액 (백만 달러)</th>
      <th id="growth">성장률 (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="quarter">1분기</td>
      <td headers="revenue">10</td>
      <td headers="growth">5%</td>
    </tr>
    <tr>
      <td headers="quarter">2분기</td>
      <td headers="revenue">12</td>
      <td headers="growth">20%</td>
    </tr>
    <tr>
      <td headers="quarter">3분기</td>
      <td headers="revenue">15</td>
      <td headers="growth">25%</td>
    </tr>
    <tr>
      <td headers="quarter">4분기</td>
      <td headers="revenue">20</td>
      <td headers="growth">33%</td>
    </tr>
  </tbody>
</table>

 

scope 속성은 <th> 요소에 사용하여 헤더 셀이 행, 열, 행 그룹 또는 열 그룹에 적용된다는 것을 명확히 합니다.

 

4. Table Summary 제공하기

표가 복잡한 경우 summary 속성을 사용하여 표의 구조와 내용을 요약할 수 있습니다. 하지만 summary 속성은 HTML5에서 더 이상 권장되지 않으므로 대신 문서 내에서 표를 설명하는 텍스트를 제공하는 것이 좋습니다.

<p>다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다.</p>

 

5. ARIA 속성 사용하기

더 복잡한 표에서는 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 속성을 사용할 수 있습니다. 예를 들어, <th> 요소에 aria-sort 속성을 추가하여 표의 정렬 상태를 나타낼 수 있습니다.

<th scope="col" aria-sort="ascending">분기</th>

 

위와 같은 방법을 사용하면 표의 웹 접근성을 높여 다양한 사용자가 더 쉽게 정보를 얻을 수 있습니다.