ARIA 접근성 가이드

역할 · 문서 구조

role="table"

행과 열로 정리된 정적인 데이터 표입니다. 셀 사이를 이동하며 조작하는 위젯은 grid입니다.

기초HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<table>
이름 정하는 방법
작성자 (author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
row rowgroup

설명

table은 데이터가 행과 열로 배열된 구획입니다. 화면낭독기는 표에 들어갈 때 “표 5행 3열”처럼 크기를 알리고, 표 탐색 키(NVDA Ctrl+Alt+화살표)로 칸을 옮길 때마다 행·열 머리글을 함께 읽어 줍니다. 그래서 머리글이 올바르게 지정된 표는 숫자 칸 하나만 들어도 의미를 알 수 있습니다.

HTML과의 관계

명세는 가능하면 HTML <table>을 쓰라고 권장합니다. <caption>(이름), <th scope>(머리글), <thead>/<tbody>가 모두 자동으로 노출됩니다. role="table"은 div 기반 레이아웃 라이브러리 등 HTML 표를 쓸 수 없을 때나, CSS display 변경으로 표 의미가 사라지는 문제를 보완할 때 씁니다.

필수 구조

table은 row(직접 또는 rowgroup 안)를 가져야 하고, 각 row는 cell, columnheader, rowheader를 가집니다. 표에는 이름이 필수이므로 <caption>이나 aria-labelledby(표 위 제목 참조), aria-label을 줍니다.

table과 grid

선택 상태가 있거나, 자체 2차원 키보드 이동을 제공하거나, 사용자가 내용을 편집·재배열하는 표라면 명세는 grid나 treegrid를 쓰라고 합니다. 정렬 버튼이나 링크가 몇 개 들어 있는 정도라면 여전히 table입니다.

일부만 표시할 때

페이지네이션 없이 가상 스크롤로 일부 행만 DOM에 둔다면 aria-rowcount/aria-colcount로 전체 크기를, 각 행에 aria-rowindex로 위치를 알립니다.

테스터 관점

표에 이름(캡션)이 있는지, 머리글 칸이 th로 지정되었는지, 레이아웃용 표가 데이터 표로 노출되지 않는지, CSS로 반응형 처리한 뒤에도 표로 인식되는지 확인합니다.

함께 쓰는 속성

지원 속성

aria-colcountaria-rowcount

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

HTML 데이터 표 (권장)

권장HTML
<table>
  <caption>이번 주 열람실 이용 현황</caption>
  <thead>
    <tr><th scope="col">요일</th><th scope="col">이용자 수</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">월</th><td>132</td></tr>
    <tr><th scope="row">화</th><td>148</td></tr>
  </tbody>
</table>

div 기반 ARIA 표

HTML
<h2 id="t-h">이번 주 열람실 이용 현황</h2>
<div role="table" aria-labelledby="t-h">
  <div role="rowgroup">
    <div role="row"><span role="columnheader">요일</span><span role="columnheader">이용자 수</span></div>
  </div>
  <div role="rowgroup">
    <div role="row"><span role="rowheader">월</span><span role="cell">132</span></div>
  </div>
</div>

머리글·이름 없는 표 (비권장)

비권장HTML
<table>
  <tr><td><b>요일</b></td><td><b>이용자 수</b></td></tr>
  <tr><td>월</td><td>132</td></tr>
</table>

머리글 칸이 th가 아니라 숫자 칸을 읽을 때 무엇의 값인지 안내되지 않습니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
표로 이동 (T)이번 주 열람실 이용 현황, 표, 3행 2열, 요일, 1행 1열
Ctrl+Alt+↓, →월, 이용자 수, 2열, 132

사용 지침

이렇게 쓰세요

  • 데이터 표는 <table>과 <caption>, <th scope>로 만듭니다.
  • ARIA 표에는 이름과 row/cell 구조를 빠짐없이 둡니다.

이렇게 쓰지 마세요

  • 레이아웃을 위해 표를 쓰지 않습니다(불가피하면 role="presentation").
  • 셀 이동·선택 기능이 있는 위젯에 table을 쓰지 않습니다(grid 사용).
rowrowgroupcellcolumnheaderrowheadercaptiongridtreegrid

이 역할을 쓰는 패턴

정렬 가능한 표

참고 자료