속성 · 표·목록 구조
aria-rowcount
표·그리드에 전체 행이 몇 개인지 알립니다. 일부 행만 DOM에 있을 때 씁니다.
심화
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 표·목록 구조
- 값 형식
- 정수 (integer), 전체 행 수 또는 -1
- 기본값
자동 계산- 적용 범위
- 특정 역할에만 사용
- HTML 대체
<table>(모든 행이 DOM에 있으면 브라우저가 자동 계산)
설명
aria-rowcount는 table, grid, treegrid의 전체 행 수(머리글 행 포함)를 알립니다. 표 컨테이너에 붙입니다.
수천 행짜리 데이터를 보이는 부분만 렌더링(세로 가상 스크롤)하거나, 서버에서 일부만 불러오는 경우에 필요합니다. 값을 넣지 않으면 화면낭독기는 렌더링된 행 수만 안내해 "행 10개짜리 표"로 오해하게 됩니다.
값은 전체 표의 행 수와 같아야 하며, 전체 행 수를 모르면 -1을 넣습니다(명세상 MUST). 각 행의 실제 위치는 aria-rowindex로 함께 알려야 합니다.
페이지 번호로 나누어 보여 주는 일반적인 표(한 페이지에 20건)는 페이지마다 독립된 표로 보는 것이 자연스러우므로 보통 넣지 않습니다. 대신 "총 200건 중 21~40번째" 같은 정보를 캡션이나 상태 메시지로 제공합니다.
검수할 때는 표 진입 시 안내되는 행 수가 실제 전체 행 수와 일치하는지, 스크롤로 행이 바뀐 뒤에도 값이 유지되는지, aria-rowindex가 함께 있는지 확인합니다.
값
| 값 | 의미 |
|---|---|
<정수> | 전체 표의 행 수입니다(머리글 행 포함). |
-1 | 전체 행 수를 알 수 없습니다. 브라우저가 계산하지 않습니다. |
(생략) 기본값 | DOM에 있는 행을 세어 자동 계산합니다. |
사용 예
2,000행 중 일부만 렌더링한 그리드
<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>끝을 모르는 로그
<div role="grid" aria-label="실시간 로그" aria-rowcount="-1">...</div>행 속성과 혼동
<!-- 비권장: 행에 붙여도 효과가 없습니다 -->
<div role="row" aria-rowcount="2000">...</div>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| aria-rowcount="2000" 그리드에 진입 | 거래 내역, 그리드, 행 2000개, 열 2개 |
| 속성 없이 3행만 렌더링된 경우 | 거래 내역, 그리드, 행 3개, 열 2개 |
사용 지침
이렇게 쓰세요
- 일부 행만 렌더링할 때 표 컨테이너에 넣습니다.
- 각 행에
aria-rowindex를 함께 넣습니다. - 전체 수를 모르면
-1을 씁니다.
이렇게 쓰지 마세요
- 모든 행이 DOM에 있는 표에 넣지 않습니다.
- 행이나 셀에 붙이지 않습니다.
- 렌더링된 행 수를 넣지 않습니다. 전체 표 기준입니다.
사용할 수 있는 역할
관련 속성·패턴
이 속성을 쓰는 패턴