ARIA 접근성 가이드

속성 · 표·목록 구조

aria-colindextext

열 번호를 숫자 대신 사람이 읽는 텍스트(예: "B열", "e")로 알립니다. ARIA 1.3 초안 속성입니다.

심화ARIA 1.3 (초안)

한눈에 보기

구분
속성 (Property)
분류
표·목록 구조
값 형식
문자열 (string)
기본값
없음
적용 범위
특정 역할에만 사용
HTML 대체
없음

설명

aria-colindextext는 aria-colindex의 숫자를 대신할 읽기용 텍스트입니다. 스프레드시트의 열 이름(A, B, C…)이나 체스판의 열(a~h)처럼 화면에 보이는 열 표기가 숫자가 아닐 때 씁니다.

이 속성은 ARIA 1.2에는 없고 ARIA 1.3 초안에서 추가되었습니다. 브라우저 구현은 Chromium·Firefox 일부 최신 버전에서 시작되었지만, 이를 읽어 주는 화면낭독기는 아직 많지 않습니다. 지원하지 않는 환경에서는 그냥 무시되므로, 필요한 정보는 열 머리글 텍스트에도 담아 두어야 합니다.

명세 초안은 aria-colindex가 의미 없거나 화면 표기와 다를 때만 쓰고, aria-colindex를 대체하지 말라고 권고합니다. 일부 보조기술은 숫자 열 번호로 위치를 추적하거나 표 탐색을 하기 때문입니다. 또한 aria-colindex와 달리 row에는 쓸 수 없고 각 셀에 넣어야 합니다.

검수할 때는 숫자 aria-colindex가 함께 있는지(또는 모든 열이 DOM에 있는지), 텍스트가 화면 표기와 같은지, 속성을 지원하지 않는 화면낭독기에서도 열 머리글로 위치를 알 수 있는지 확인합니다.

값

값
값의미
<문자열>열 위치를 사람이 읽기 좋게 표현한 텍스트입니다. (예: B, e열)

사용 예

스프레드시트 셀

권장HTML
<div role="grid" aria-label="예산표">
  <div role="row" aria-rowindex="3">
    <div role="gridcell" aria-colindex="2" aria-colindextext="B">50,000</div>
    <div role="gridcell" aria-colindex="3" aria-colindextext="C">72,000</div>
  </div>
</div>

aria-colindex를 대체한 경우

비권장HTML
<!-- 비권장: 숫자 열 번호를 없애면 표 탐색이 깨질 수 있습니다 -->
<div role="gridcell" aria-colindextext="B">50,000</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
지원하는 환경에서 셀로 이동B열, 50,000
지원하지 않는 환경2열, 50,000

사용 지침

이렇게 쓰세요

  • 열 표기가 숫자가 아닐 때(A, B, C… / a~h)만 씁니다.
  • 숫자 aria-colindex는 그대로 유지합니다.
  • 열 머리글 텍스트로도 같은 정보를 제공합니다.

이렇게 쓰지 마세요

  • aria-colindex 대신 쓰지 않습니다.
  • row에 넣지 않습니다. 셀에 넣습니다.
  • 모든 환경에서 읽힐 것이라고 기대하지 않습니다. ARIA 1.3 초안 단계이며 지원이 제한적입니다.

사용할 수 있는 역할

cellgridcellcolumnheaderrowheader
aria-colindexaria-rowindextextaria-colcount

참고 자료