속성 · 표·목록 구조
aria-colindex
셀이 전체 표에서 몇 번째 열에 있는지 알립니다. 일부 열만 DOM에 있을 때 씁니다.
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 표·목록 구조
- 값 형식
- 정수 (integer), 1 이상
- 기본값
자동 계산- 적용 범위
- 특정 역할에만 사용
- HTML 대체
<table>의 셀 위치 (모든 열이 DOM에 있으면 자동 계산)
설명
aria-colindex는 셀(cell, gridcell, columnheader, rowheader)이 전체 표 기준 몇 번째 열인지 1부터 세어 알립니다. aria-colcount와 짝을 이루어 "16열 중 9열" 같은 안내를 가능하게 합니다.
모든 열이 DOM에 있으면 필요 없습니다. 일부 열만 렌더링될 때 씁니다. 값은 1 이상, 같은 행의 앞 셀보다 크고, 전체 열 수 이하여야 합니다. 여러 열을 병합한 셀은 병합이 시작되는 열 번호를 넣습니다.
렌더링된 열이 연속되어 있고 병합 셀이 없으면 각 셀 대신 row에 시작 열 번호 하나만 넣어도 됩니다(MAY). 열이 연속되지 않거나(예: 2, 3, 4, 9열) 병합 셀이 있으면 각 셀에 넣어야 합니다(SHOULD). 행에 넣는 방식은 ARIA 1.2에서 추가되었으므로 오래된 보조기술을 고려한다면 셀마다 넣는 편이 안전합니다.
스프레드시트처럼 열 이름이 숫자가 아닌 경우(A, B, C…)에는 ARIA 1.3 초안의 aria-colindextext로 읽을 텍스트를 보충할 수 있습니다. 하지만 숫자 aria-colindex는 그대로 유지해야 합니다.
검수할 때는 열을 가로로 스크롤해 다시 렌더링한 뒤에도 값이 전체 기준으로 맞는지, 같은 행에서 값이 증가하는지, 표 탐색 명령(Ctrl+Alt+방향키)으로 이동할 때 안내되는 열 번호가 화면과 일치하는지 확인합니다.
값
| 값 | 의미 |
|---|---|
<정수 ≥ 1> | 전체 표 기준 열 위치입니다. 병합 셀은 시작 열을 넣습니다. |
(생략) 기본값 | DOM 위치로 자동 계산합니다. |
사용 예
연속되지 않은 열 (셀마다 지정)
<div role="grid" aria-label="월별 실적" aria-colcount="16">
<div role="row">
<div role="gridcell" aria-colindex="2">120</div>
<div role="gridcell" aria-colindex="3">98</div>
<div role="gridcell" aria-colindex="4">143</div>
<div role="gridcell" aria-colindex="9">87</div>
</div>
</div>연속된 열 (행에 한 번만 지정)
<div role="grid" aria-label="월별 실적" aria-colcount="16">
<div role="row" aria-colindex="2">
<div role="gridcell">120</div>
<div role="gridcell">98</div>
<div role="gridcell">143</div>
</div>
</div>병합 셀이 없고 2~4열이 연속일 때만 가능합니다.
0부터 센 잘못된 값
<!-- 비권장: 1부터 세야 합니다 -->
<div role="gridcell" aria-colindex="0">120</div>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 그리드 셀로 이동 (NVDA, 표 탐색) | 9열, 87 |
| aria-colindex가 없을 때 같은 셀 | 4열, 87 (렌더링 순서 기준) |
사용 지침
이렇게 쓰세요
- 일부 열만 렌더링할 때
aria-colcount와 함께 씁니다. - 병합 셀에는 병합이 시작되는 열 번호를 넣습니다.
- 열이 바뀔 때마다 렌더링한 모든 셀의 값을 다시 계산합니다.
이렇게 쓰지 마세요
- 0이나 전체 열 수보다 큰 값을 넣지 않습니다.
- 같은 행에서 값이 줄어들거나 중복되게 넣지 않습니다.
- 연속되지 않은 열에서 행에만 값을 넣지 않습니다.
사용할 수 있는 역할
관련 속성·패턴
이 속성을 쓰는 패턴