ARIA 접근성 가이드

역할 · 문서 구조

role="rowheader"

표·그리드에서 한 행의 제목 칸입니다. 그 행의 다른 칸을 읽을 때 함께 안내됩니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<th scope="row"> (또는 행 머리글로 판단되는 <th>)
이름 정하는 방법
콘텐츠, 작성자 (contents, author)
이름 필수
예
필수 상위 요소
row
필수 하위 요소
없음

설명

rowheader는 행의 제목 칸입니다. 예를 들어 시간표에서 “1교시”, 요금표에서 상품명처럼 그 행 전체가 무엇에 관한 것인지 알려 주는 칸입니다. 화면낭독기는 표 안에서 위아래로 이동할 때 새 행의 머리글을 함께 읽어 줍니다. 반드시 row 안에 있어야 합니다.

HTML에서는 <th scope="row">를 씁니다. 행과 열 머리글이 모두 있는 표에서는 scope를 명시해야 정확하게 해석됩니다.

aria-sort는 행 기준 정렬을 제공할 때, 나머지 상태 속성은 grid·treegrid에서 머리글 칸이 조작 가능할 때 씁니다.

함께 쓰는 속성

지원 속성

aria-expandedaria-sortaria-colindexaria-colspanaria-disabledaria-errormessagearia-haspopuparia-invalidaria-readonlyaria-requiredaria-rowindexaria-rowspanaria-selected

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

사용 예

행 머리글이 있는 표

권장HTML
<table>
  <caption>이용 요금</caption>
  <tr><td></td><th scope="col">평일</th><th scope="col">주말</th></tr>
  <tr><th scope="row">세미나실</th><td>10,000원</td><td>15,000원</td></tr>
  <tr><th scope="row">스터디룸</th><td>5,000원</td><td>8,000원</td></tr>
</table>

행 제목을 td로 (비권장)

비권장HTML
<tr><td><strong>세미나실</strong></td><td>10,000원</td></tr>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
아래 행으로 이동스터디룸, 평일, 5,000원

사용 지침

이렇게 쓰세요

  • 행 제목 칸에는 <th scope="row">를 씁니다.

이렇게 쓰지 마세요

  • 굵은 글씨 <td>로 행 제목을 흉내 내지 않습니다.
columnheaderrowcelltable

이 역할을 쓰는 패턴

정렬 가능한 표

참고 자료