속성 · 표·목록 구조
aria-rowindextext
행 번호를 숫자 대신 사람이 읽는 텍스트(예: "A행")로 알립니다. ARIA 1.3 초안 속성입니다.
심화ARIA 1.3 (초안)
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 표·목록 구조
- 값 형식
- 문자열 (string)
- 기본값
없음- 적용 범위
- 특정 역할에만 사용
- HTML 대체
- 없음
설명
aria-rowindextext는 aria-rowindex의 숫자를 대신할 읽기용 텍스트입니다. 극장 좌석표(A열·B열…), 배틀십 게임판(A~J)처럼 화면의 행 표기가 숫자가 아닐 때 씁니다.
ARIA 1.3 초안에서 추가된 속성으로 ARIA 1.2에는 없습니다. 브라우저 구현이 막 시작된 단계이고 화면낭독기 지원은 제한적이므로, 지원하지 않는 환경을 위해 행 머리글(rowheader)에도 같은 텍스트를 넣어 두는 것이 좋습니다.
명세 초안은 숫자 행 번호가 의미 없거나 화면 표기와 다를 때만 쓰고, aria-rowindex를 대체하지 말라고 권고합니다. row마다 넣는 것을 권장하며(SHOULD), 행 안의 셀에도 넣을 수 있습니다.
검수할 때는 숫자 aria-rowindex가 유지되는지(또는 모든 행이 DOM에 있는지), 텍스트가 화면 표기와 같은지, 지원하지 않는 환경에서 행 머리글로 위치를 알 수 있는지 확인합니다.
값
| 값 | 의미 |
|---|---|
<문자열> | 행 위치를 사람이 읽기 좋게 표현한 텍스트입니다. (예: A, B열) |
사용 예
좌석 선택 그리드
<div role="grid" aria-label="좌석 선택">
<div role="row" aria-rowindex="1" aria-rowindextext="A열">
<div role="rowheader">A</div>
<div role="gridcell"><button aria-pressed="false">1번</button></div>
</div>
</div>aria-rowindex 없이 사용
<!-- 비권장: 일부 행만 렌더링하는데 숫자 행 번호를 뺌 -->
<div role="row" aria-rowindextext="F열">...</div>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 지원하는 환경에서 행으로 이동 | A열, A, 1번, 전환 버튼, 누르지 않음 |
| 지원하지 않는 환경 | 1행, A, 1번, 전환 버튼, 누르지 않음 |
사용 지침
이렇게 쓰세요
- 행 표기가 숫자가 아닐 때만 씁니다.
- 숫자
aria-rowindex를 유지합니다. - 행 머리글로도 같은 정보를 제공합니다.
이렇게 쓰지 마세요
aria-rowindex대신 쓰지 않습니다.- 모든 환경에서 읽힐 것이라고 기대하지 않습니다.
- 긴 문장을 넣지 않습니다. 행 이름만 짧게 씁니다.