ARIA 접근성 가이드

역할 · 문서 구조

role="rowgroup"

표·그리드 안에서 여러 행(row)을 묶는 구조입니다. <thead>, <tbody>, <tfoot>에 대응합니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<thead>, <tbody>, <tfoot>
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
grid table treegrid
필수 하위 요소
row

설명

rowgroup은 표 형식 컨테이너 안의 행 묶음입니다. HTML의 <thead>, <tbody>, <tfoot>과 구조적으로 같으며, table·grid·treegrid 안에 있어야 하고 자식은 row입니다.

ARIA 1.2의 rowgroup은 머리·몸통·꼬리를 구분하지 않습니다. 머리글 행인지는 그 안의 columnheader로 알립니다. 이 역할이 있는 이유 중 하나는 HTML 표에 role="presentation"을 줬을 때 <tbody> 등에도 의미 제거가 이어지게 하기 위해서입니다.

대부분의 화면낭독기는 rowgroup을 따로 안내하지 않습니다. ARIA로 표를 만들 때 구조를 HTML과 맞추고 싶을 때 씁니다.

함께 쓰는 속성

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

사용 예

ARIA 표의 행 묶음

HTML
<div role="table" aria-label="회원 목록">
  <div role="rowgroup">
    <div role="row"><span role="columnheader">이름</span><span role="columnheader">등급</span></div>
  </div>
  <div role="rowgroup">
    <div role="row"><span role="cell">김하늘</span><span role="cell">일반</span></div>
  </div>
</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
표 읽기(행 그룹은 따로 안내되지 않음) 이름, 등급 …

사용 지침

이렇게 쓰세요

  • HTML 표는 <thead>/<tbody>를 그대로 씁니다.

이렇게 쓰지 마세요

  • rowgroup 안에 row 외의 요소를 직접 두지 않습니다.

이 역할을 쓰는 패턴

참고 자료