ARIA 접근성 가이드

속성 · 표·목록 구조

aria-rowindex

행(또는 셀)이 전체 표에서 몇 번째 행인지 알립니다. 일부 행만 DOM에 있을 때 씁니다.

심화

한눈에 보기

구분
속성 (Property)
분류
표·목록 구조
값 형식
정수 (integer), 1 이상
기본값
자동 계산
적용 범위
특정 역할에만 사용
HTML 대체
<table>의 행 위치 (모든 행이 DOM에 있으면 자동 계산)

설명

aria-rowindex는 row나 셀이 전체 표 기준 몇 번째 행인지 1부터 세어 알립니다. aria-rowcount와 짝을 이룹니다.

명세는 각 행(row)에 넣을 것을 권고하고(SHOULD), 원하면 행 안의 셀에도 넣을 수 있다고 정합니다(MAY). 값은 1 이상, 앞 행보다 크고, 전체 행 수 이하여야 합니다. 여러 행을 병합한 셀은 병합이 시작되는 행 번호를 넣습니다. 머리글 행도 한 행으로 셉니다.

모든 행이 DOM에 있으면 필요 없습니다. 세로 가상 스크롤처럼 일부 행만 렌더링될 때, 첫 행(머리글)은 고정하고 100~102행만 그리는 식의 상황에 씁니다.

행 번호가 숫자로 의미가 없는 경우(예: 배틀십 게임의 A~J 행)에는 ARIA 1.3 초안의 aria-rowindextext를 보충으로 쓸 수 있지만, 숫자 값은 그대로 둡니다.

검수할 때는 스크롤로 행이 다시 그려진 뒤 값이 전체 기준으로 맞는지, 값이 중복되거나 감소하지 않는지, 표 탐색(Ctrl+Alt+위/아래)에서 안내되는 행 번호가 화면 표기와 일치하는지 확인합니다.

값

값
값의미
<정수 ≥ 1>전체 표 기준 행 위치입니다. 병합 셀은 시작 행을 넣습니다.
(생략) 기본값DOM 위치로 자동 계산합니다.

사용 예

머리글 + 100~102행

권장HTML
<div role="grid" aria-label="거래 내역" aria-rowcount="2000">
  <div role="row" aria-rowindex="1">
    <div role="columnheader">날짜</div><div role="columnheader">금액</div>
  </div>
  <div role="row" aria-rowindex="100">
    <div role="gridcell">10월 2일</div><div role="gridcell">12,000원</div>
  </div>
  <div role="row" aria-rowindex="101">
    <div role="gridcell">10월 3일</div><div role="gridcell">8,500원</div>
  </div>
</div>

스크롤 후 행 번호 다시 매기기

JavaScript
function renderRows(grid, rows, firstIndex) {
  rows.forEach((rowEl, i) => {
    rowEl.setAttribute('aria-rowindex', String(firstIndex + i));
  });
}

0부터 센 값

비권장HTML
<!-- 비권장: 1부터 셉니다 -->
<div role="row" aria-rowindex="0">...</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
100행 셀로 이동 (표 탐색)100행, 10월 2일
속성이 없을 때 같은 셀2행, 10월 2일

사용 지침

이렇게 쓰세요

  • 일부 행만 렌더링할 때 각 행에 넣습니다.
  • aria-rowcount와 함께 씁니다.
  • 병합 셀에는 시작 행 번호를 넣습니다.

이렇게 쓰지 마세요

  • 0이나 전체 행 수보다 큰 값을 넣지 않습니다.
  • 같은 값을 여러 행에 중복해 넣지 않습니다.
  • 모든 행이 있는 표에 불필요하게 넣지 않습니다.

사용할 수 있는 역할

rowcellgridcellcolumnheaderrowheader
aria-rowcountaria-rowspanaria-rowindextextaria-colindex

이 속성을 쓰는 패턴

정렬 가능한 표

참고 자료