속성 · 표·목록 구조
aria-rowspan
셀이 세로로 몇 개의 행을 차지하는지(행 병합) 알립니다. 네이티브 표에서는 rowspan을 씁니다.
심화
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 표·목록 구조
- 값 형식
- 정수 (integer), 0 이상
- 기본값
1 (한 행)- 적용 범위
- 특정 역할에만 사용
- HTML 대체
<td rowspan>,<th rowspan>
설명
aria-rowspan은 ARIA로 만든 표·그리드의 셀이 여러 행에 걸쳐 있음을 알립니다. cell, gridcell, columnheader, rowheader에 씁니다.
aria-colspan과 마찬가지로 네이티브 표가 아닌 경우를 위한 속성입니다. <table>의 셀에는 HTML rowspan을 쓰며, 함께 쓰면 브라우저는 rowspan을 노출합니다.
값은 0 이상의 정수이며, 같은 열의 아래 셀과 겹치지 않아야 합니다. 0은 행 그룹의 남은 모든 행에 걸친다는 뜻입니다. 병합 셀이 있으면 aria-rowindex를 병합 셀에도 넣고, 그 값은 병합이 시작되는 행입니다.
검수할 때는 시각적 병합과 값이 일치하는지, 병합된 셀 옆 열을 아래로 이동할 때 머리글 정보가 올바르게 안내되는지, 네이티브 표에 aria-rowspan을 쓰지 않았는지 확인합니다.
값
| 값 | 의미 |
|---|---|
<정수 ≥ 1> | 셀이 차지하는 행 수입니다. |
0 | 현재 행 그룹의 남은 모든 행에 걸칩니다. |
(생략) 기본값 | 한 행만 차지합니다. |
사용 예
ARIA 그리드의 세로 병합
<div role="grid" aria-label="근무표">
<div role="row">
<div role="rowheader" aria-rowspan="2" style="grid-row: span 2">1팀</div>
<div role="gridcell">오전</div>
</div>
<div role="row">
<div role="gridcell">오후</div>
</div>
</div>네이티브 표에서는 rowspan
<!-- 비권장 -->
<th aria-rowspan="2" scope="row">1팀</th>
<!-- 권장 -->
<th rowspan="2" scope="row">1팀</th>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 병합된 행 머리글로 이동 | 1행부터 2행까지, 1팀 |
| 두 번째 행의 셀로 이동 | 1팀, 2행, 오후 |
사용 지침
이렇게 쓰세요
- ARIA 역할로 만든 표·그리드의 병합 셀에만 씁니다.
- 시각적 병합과 값을 일치시킵니다.
- 병합 셀의
aria-rowindex는 시작 행으로 넣습니다.
이렇게 쓰지 마세요
<td>·<th>에 쓰지 않습니다.rowspan을 씁니다.- 아래 셀과 겹치는 값을 넣지 않습니다.
- 음수를 넣지 않습니다.
사용할 수 있는 역할
관련 속성·패턴
이 속성을 쓰는 패턴