ARIA 접근성 가이드

역할 · 문서 구조

role="row"

표·그리드의 한 행입니다. 셀(cell, gridcell)과 머리글을 담습니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<tr>
이름 정하는 방법
콘텐츠, 작성자 (contents, author)
이름 필수
아니요
필수 상위 요소
grid rowgroup table treegrid
필수 하위 요소
cell columnheader gridcell rowheader

설명

row는 표 형식 컨테이너의 한 행입니다. table, grid, treegrid 또는 그 안의 rowgroup 안에 있어야 하고, 자식으로 셀 또는 머리글을 가집니다. HTML <tr>이 대응합니다.

속성 사용 범위

  • aria-rowindex: 일부 행만 DOM에 있을 때(가상 스크롤) 전체 중 몇 번째 행인지 알립니다. 표에 aria-rowcount를 함께 둡니다.
  • aria-selected: 행 선택이 가능한 grid·treegrid에서 씁니다.
  • aria-expanded, aria-level, aria-posinset, aria-setsize: 명세상 treegrid 안의 행에서만 쓸 수 있습니다. table이나 grid 안의 행에 쓰면 안 됩니다.
  • aria-disabled: 현재는 허용되지만, 명세는 향후 grid·treegrid 밖의 행에서는 금지할 계획이라고 밝히고 있습니다.

함께 쓰는 속성

지원 속성

aria-colindexaria-expandedaria-levelaria-posinsetaria-rowindexaria-setsizearia-selectedaria-activedescendantaria-disabled

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

사용 예

ARIA 표의 행

HTML
<div role="table" aria-label="대출 현황" aria-rowcount="120">
  <div role="row" aria-rowindex="1">
    <span role="columnheader">도서명</span><span role="columnheader">반납일</span>
  </div>
  <div role="row" aria-rowindex="35">
    <span role="cell">어린 왕자</span><span role="cell">7월 20일</span>
  </div>
</div>

table 행에 aria-expanded (비권장)

비권장HTML
<tr aria-expanded="false">…</tr>

펼침 상태는 treegrid 행에서만 쓸 수 있습니다. 일반 표라면 셀 안의 버튼에 aria-expanded를 둡니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
다음 행으로 이동 (Ctrl+Alt+↓)35행, 도서명, 어린 왕자

사용 지침

이렇게 쓰세요

  • HTML 표는 <tr>을 씁니다.
  • 가상 스크롤 표에는 aria-rowindex와 aria-rowcount를 둡니다.

이렇게 쓰지 마세요

  • table·grid 행에 aria-expanded, aria-level을 쓰지 않습니다.
  • 행 밖에 셀을 두지 않습니다.
tablerowgroupcellcolumnheaderrowheadergridtreegridgridcell

이 역할을 쓰는 패턴

정렬 가능한 표

참고 자료