HTML 테이블을 웹에서 액세스 가능하게 만드는 3단계

웹 접근성과 관련하여 많은 개발자가 추가 작업이 많고 제대로 하기가 너무 어렵다고 생각합니다. WCAG AA 수준의 접근성을 충족하도록 요구 사항을 단순화하는 최근에 읽은 기사를 기반으로 HTML 테이블에 관한 신화를 깨고 싶었습니다(문서 제목: Under Engineered Responsive Tables by Adrian Roselli .

기본적으로 웹 접근성에는 시각 장애인이 페이지의 요소를 친숙한 방식으로 사용할 수 있도록 하는 기능이 포함되어야 합니다(예: 스크린 리더를 사용하는 경우에도).

반응형 테이블에 대한 WCAG 접근성 요구 사항(레벨별):

레벨 A

1. 1.3.1 Info and Relationships
2. 1.3.2 Meaningful Sequence
3. 2.1.1 Keyboard
4. 4.1.2 Name, Role, Value

레벨 AA

5. 1.4.10 Reflow
6. 1.4.11 Non-text Contrast
7. 2.4.6 Headings and Labels
8. 2.4.7 Focus Visible

웹 액세스 가능한 HTML 테이블을 위한 단계

1단계: 적절한 HTML 태그로 테이블 생성

<table>
      <caption id="table1Caption">Example Accessible Table</caption>
    <thead>
      <tr>
        <th>Number</th>
        <th>WCAG Compliance Level</th>
        <th>Requirement</th>
        <th>Step Requirement is Hit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>A</td>
        <td>1.3.1 Info and Relationships</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>A</td>
        <td>1.3.2 Meaningful Sequence</td>
        <td>1</td>
      </tr>
      ...
      ...
  </tbody>
</table>

요구 사항:

1, 2, 7
테이블에 데이터를 채울 때 헤더 행에 <thead>, 본문 행에 <tbody>, 행에 <tr>, <th> (머리글 셀) 또는 <td> (본문 셀) 행 내의 셀.

2단계: HTML

<div role="region" aria-labelledby="table1Caption" tabindex="0">
        <table>[…]</table>
</div>

요구 사항:

3, 4
키보드 판독기는 포커스를 받는 모든 요소에 대해 액세스 가능한 이름이 필요합니다. 이것은 aria-labelledby 및 role 속성에 의해 처리됩니다. 테이블 캡션 ID는 aria-labelledby 값과 일치해야 하며 지역은 일반 랜드마크이므로 role 값으로 사용됩니다.

3단계: CSS

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: .1em solid rgba(0,0,0,.1);
}

요구 사항:

5, 6, 8overflow:auto 선택기에서 식별된 [role="region"][aria-labelledby][tabindex] CSS 속성은 전체 페이지가 두 개의 스크롤 축을 갖는 것을 방지하여 요구 사항 5를 충족합니다.outline CSS 속성은 3:1 명암비와 함께 사용할 때 요구 사항 6과 8을 모두 충족합니다.

Adrian Roselli는 또한 그의 기사에서 다음과 같이 언급합니다.
이 선택기는 HTML이 키보드 및 화면 판독기 사용자가 액세스할 수 있도록 적절하게 마크업되지 않는 한 테이블이 잘리지 않도록 합니다. 이 접근 방식은 필요한 HTML을 적용하는 데 도움이 되므로 선택기로 클래스 또는 ID에 의존하는 것보다 낫습니다. [tabindex] 대신 [tabindex="0"]을 사용하거나 [role="region"] 대신 [role]을 사용하여 필요에 맞게 조정할 수 있지만 부분적으로 적용해야 하는 항목에 따라 다릅니다.

최종 예

자원

Under Engineered Responsive Tables by Adrian Roselli

W3 WCAG How to Meet WCAG Quick Reference with Table filter applied

결론

이 목록이 내 동료 프론트 엔드 개발자 중 일부가 프로젝트와 웹 사이트를 웹에 액세스할 수 있도록 유지하는 데 다소 도움이 되기를 바랍니다. 접근성이 어려울 필요는 없습니다!

What techniques do you use in making your own sites accessible?

Are there any accessibility tools or topics you would like to learn more about?

댓글로 알려주세요!