속성 · 표·목록 구조
aria-colspan
셀이 가로로 몇 개의 열을 차지하는지(열 병합) 알립니다. 네이티브 표에서는 colspan을 씁니다.
심화
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 표·목록 구조
- 값 형식
- 정수 (integer), 1 이상
- 기본값
1 (한 열)- 적용 범위
- 특정 역할에만 사용
- HTML 대체
<td colspan>,<th colspan>
설명
aria-colspan은 ARIA로 만든 표·그리드의 셀이 여러 열에 걸쳐 있음을 알립니다. cell, gridcell, columnheader, rowheader에 씁니다.
명세는 이 속성이 네이티브 표가 아닌 경우를 위한 것이라고 명시합니다. <table> 안의 셀에는 HTML colspan을 써야 하며, 둘을 함께 쓰면 브라우저는 aria-colspan을 무시하고 colspan을 노출합니다.
값은 1 이상이어야 하고, 같은 행의 다음 셀과 겹치지 않아야 합니다. 병합 셀이 있으면 aria-colindex를 행 단위가 아니라 각 셀에 넣고, 병합 셀에는 시작 열 번호를 넣습니다. CSS Grid로 만든 표라면 grid-column: span 2 같은 시각적 병합과 속성 값을 일치시켜야 합니다.
검수할 때는 화면에서 병합된 셀에 같은 값이 있는지, 표 탐색으로 이동할 때 병합 셀 다음 셀의 열 번호가 건너뛰어 안내되는지, 네이티브 표에서 aria-colspan을 쓰지 않았는지 확인합니다.
값
| 값 | 의미 |
|---|---|
<정수 ≥ 1> | 셀이 차지하는 열 수입니다. 같은 행의 다음 셀과 겹치지 않아야 합니다. |
(생략) 기본값 | 한 열만 차지합니다. |
사용 예
ARIA 그리드의 병합 셀
<div role="grid" aria-label="시간표">
<div role="row">
<div role="rowheader">월</div>
<div role="gridcell" aria-colspan="2" style="grid-column: span 2">국어 (1~2교시)</div>
<div role="gridcell">수학</div>
</div>
</div>네이티브 표에서는 colspan
<!-- 비권장 -->
<td aria-colspan="2">국어</td>
<!-- 권장 -->
<td colspan="2">국어</td>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 병합 셀로 이동 | 2열부터 3열까지, 국어 (1~2교시) |
| 오른쪽 셀로 이동 | 4열, 수학 |
사용 지침
이렇게 쓰세요
- ARIA 역할로 만든 표·그리드의 병합 셀에만 씁니다.
- 시각적 병합과 값을 일치시킵니다.
- 병합 셀이 있으면
aria-colindex를 셀마다 넣습니다.
이렇게 쓰지 마세요
<td>·<th>에 쓰지 않습니다.colspan을 씁니다.- 0이나 다음 셀과 겹치는 값을 넣지 않습니다.
- 레이아웃용 병합(꾸밈)을 표 병합으로 표현하지 않습니다.
사용할 수 있는 역할
관련 속성·패턴
이 속성을 쓰는 패턴