접근성 준수 컴포넌트 - 테이블 (Table)

접근 가능한 테이블을 만드는 것은 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines, WCAG)을 준수하기 위해 여러 모범 사례를 따르는 것입니다. 다음은 접근 가능한 HTML 테이블을 만드는 종합적인 가이드입니다:

1. 의미론적 HTML 요소 사용

<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 요소를 사용하여 잘 구조화된 테이블을 만드세요. 이는 보조 기술이 올바르게 해석할 수 있는 의미론적 구조를 제공합니다.

2. 테이블 헤더 정의

테이블 헤더에는 <th>를 사용하고, 헤더 셀과 데이터 셀 간의 관계를 이해할 수 있도록 scope 속성(scope="col"은 열 헤더에, scope="row"는 행 헤더에 사용)을 제공합니다.

<table>
  <thead>
    <tr>
      <th scope="col">헤더 1</th>
      <th scope="col">헤더 2</th>
      <th scope="col">헤더 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>데이터 1</td>
      <td>데이터 2</td>
      <td>데이터 3</td>
    </tr>
  </tbody>
</table>

3. 캡션 요소 사용

테이블의 목적을 설명하기 위해 <caption> 요소를 사용하세요.

<table>
  <caption>재무 보고서 요약</caption>
  <!-- 테이블 구조 -->
</table>

4. 요약 속성 사용 (폐기되었으나 유용함)

옛날 스크린 리더용으로, <table> 요소에 summary 속성을 사용하여 테이블 구조와 내용에 대한 간단한 설명을 제공합니다.

<table summary="이 테이블은 지난 분기 회사의 재무 성과를 요약합니다.">
  <!-- 테이블 구조 -->
</table>

5. 복잡한 테이블에 대한 설명 텍스트 제공

복잡한 테이블의 경우, ARIA 속성(예: aria-describedby)을 사용하여 문서의 다른 곳에서 제공되는 테이블에 대한 보다 자세한 설명을 참조합니다.

<table aria-describedby="table-description">
  <!-- 테이블 구조 -->
</table>
<p id="table-description">이 테이블은 수익, 비용 및 순이익을 포함한 회사의 분기별 재무 성과를 보여줍니다.</p>

6. 데이터 셀과 헤더 셀 연결

헤더가 여러 행 또는 열에 걸쳐 있는 복잡한 테이블의 경우, id와 headers 속성을 사용하여 데이터 셀을 해당 헤더 셀과 명시적으로 연결합니다.

<table>
  <thead>
    <tr>
      <th id="header1">헤더 1</th>
      <th id="header2">헤더 2</th>
      <th id="header3">헤더 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="header1">데이터 1</td>
      <td headers="header2">데이터 2</td>
      <td headers="header3">데이터 3</td>
    </tr>
  </tbody>
</table>

7. 적절한 색상 대비 보장

텍스트와 배경 색상 간의 충분한 색상 대비를 보장하여 가독성을 높입니다. WCAG는 일반 텍스트의 경우 최소 대비 비율을 4.5:1, 큰 텍스트의 경우 3:1로 권장합니다.

8. 키보드 접근성 제공

테이블 내의 모든 인터랙티브 요소(예: 링크, 버튼)가 키보드 탐색을 통해 접근할 수 있도록 합니다.

9. 레이아웃에 테이블 사용 피하기

테이블은 표 형식 데이터에만 사용하고 레이아웃 용도로는 사용하지 마세요. 이는 보조 기술을 혼란스럽게 하고 콘텐츠의 의미론적 구조에 영향을 줄 수 있습니다.

접근 가능한 테이블 예제

<table aria-describedby="financial-summary">
  <caption>회사 재무 보고서</caption>
  <thead>
    <tr>
      <th scope="col">분기</th>
      <th scope="col">수익</th>
      <th scope="col">비용</th>
      <th scope="col">순이익</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="quarter1">Q1</td>
      <td headers="revenue1">$10,000</td>
      <td headers="expenses1">$8,000</td>
      <td headers="netprofit1">$2,000</td>
    </tr>
    <!-- 추가 행 -->
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">합계</th>
      <td>$40,000</td>
      <td>$30,000</td>
      <td>$10,000</td>
    </tr>
  </tfoot>
</table>
<p id="financial-summary">이 테이블은 지난 회계 연도 동안 회사의 재무 성과를 요약합니다.</p>

이러한 모범 사례를 따르면, 접근성이 높고 사용자 친화적인 테이블을 만들어 보조 기술을 사용하는 사용자도 효과적으로 데이터를 상호작용할 수 있습니다.