표의 구성 - by. UXKM

요약 설명

관련 지침 : 표는 이해하기 쉽게 구성해야 한다.
표를 제공할 경우, 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 합니다.

관련 WCAG 2.2 성공 기준

  • 표 정보 제공

    데이터를 표로 구성할 경우, 표의 내용, 구조 등을 이해할 수 있는 정보를 제공하여 표의 이용 방법을 예측할 수 있도록 해야 합니다.

  • 표의 구성

    표의 내비게이션을 위하여, 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다.

1.3.1 정보 및 관계 (Level A) WAI - Understanding Info and Relationships MDN - table

기대효과

  • 제목 셀과 데이터 셀이 명확히 구분된 데이터 테이블은, 시각장애인 사용자에게 각 데이터 셀이 어떤 제목 셀과 연결되는지 또는 어떤 관계가 있는지를 전달할 수 있습니다.
  • 이를 통해 데이터의 의미를 보다 쉽게 파악할 수 있게 되며, 스크린 리더 사용 시 정보 전달의 정확성과 이해도가 향상됩니다.

필요성

표는 데이터를 구조적으로 제공하는 도구로, 적절한 헤더(<th>), 범위 지정(scope), 캡션(caption) 등을 통해 스크린 리더 사용자와 모든 사용자에게 정보를 명확히 전달해야 합니다. 특히 복잡한 표일수록 시각뿐 아니라 논리적으로 구조화되어 있어야 합니다.

  • 시각적으로만 구조화된 표는 스크린 리더 사용자가 이해할 수 없습니다.
  • 캡션, 헤더 정보, 셀 간 관계를 명확하게 제공해야 정보 전달이 가능합니다.
  • 복잡한 표일수록 헤더와 데이터의 관계를 기술적으로 설명할 필요가 있습니다.

대상

  • 사용자 유형
  • 이유

  • 시각장애인

    스크린 리더가 헤더-셀 관계를 정확히 안내해야 이해 가능

  • 인지장애 사용자

    데이터가 잘 정리되어야 의미를 파악하기 쉬움

  • 모든 사용자

    구조적 정보는 사용성과 가독성을 높임

체크리스트

  • <caption> 요소로 표 제목이 명확히 설명되었는가?
  • <th>를 사용해 머리글 셀이 정의되어 있는가?
  • scope="col" 또는 scope="row"를 통해 헤더의 범위가 명시되었는가?
  • 복잡한 표의 경우 headers, id 속성을 활용하여 관계를 정의했는가?

테스트 방법

  • 스크린 리더로 표 탐색 시 헤더-셀 관계 안내 여부를 확인합니다.
  • <caption>, <th>, scope 사용 여부를 확인합니다.
  • 복잡한 경우 headers, id 속성의 관계 매핑을 확인합니다.

QA 지표

  • 헤더 정의 비율 (표 내 <th> 포함률)
  • 범위 지정 비율 (scope 속성 사용률)
  • 스크린 리더에서 헤더-셀 관계 해석 정확도

개발방법

html 예시

Vue 예시

React 예시

점검 기준

  • 모든 표에 <th> 및 scope 속성이 포함되어 있는가?
  • 표 제목이 <caption> 또는 시각적으로 설명되어 있는가?
  • 데이터 셀과 헤더의 관계가 기술적으로 연결되었는가?

점검 방법

  • 코드 내 <table> 구성 요소를 확인합니다.
  • 스크린 리더로 표를 읽을 때 헤더-셀 연결을 확인합니다.
  • 시멘틱 마크업 존재 여부 및 scope 속성을 확인합니다.

준수/미준수 사례

미준수 사례

문제점 :
<th> 없이 모든 셀을 <td>로 처리하는 경우, 스크린 리더는 구조를 인식하지 못합니다.
scope, id, headers가 없는 경우, 데이터와 헤더를 연결할 수 없습니다.
<caption>이 없는 경우, 표의 주제를 파악하기 어렵습니다.

준수 사례

설명 :
scope 속성으로 행/열 헤더를 명확하게 지정합니다.
id와 headers 속성으로 복잡한 다중 헤더 구조를 명확히 연결합니다.
<caption>으로 표의 내용을 요약하여 제공합니다.
병합된 헤더(colspan, rowspan)에 따라 id 및 headers를 다단계로 연결합니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링