ARIA 접근성 가이드

역할 · 문서 구조

role="columnheader"

표·그리드에서 한 열의 제목 칸입니다. 그 열의 각 칸을 읽을 때 함께 안내됩니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<th scope="col"> (또는 열 머리글로 판단되는 <th>)
이름 정하는 방법
콘텐츠, 작성자 (contents, author)
이름 필수
예
필수 상위 요소
row
필수 하위 요소
없음

설명

columnheader는 열의 제목 칸입니다. 화면낭독기는 표 안에서 다른 열로 옮겨 갈 때 그 열의 제목을 함께 읽어 주므로, 숫자만 있는 칸도 무엇을 뜻하는지 알 수 있습니다. 반드시 row 안에 있어야 합니다.

HTML과의 관계

<th>가 열 머리글로 쓰이면 columnheader가 됩니다. 표 구조가 단순하면 브라우저가 위치로 판단하지만, 확실히 하려면 scope="col"을 적습니다.

정렬 표시

열 기준 정렬을 제공하면 현재 정렬된 열의 머리글에만 aria-sort(ascending/descending)를 둡니다. 정렬 기능은 머리글 안에 <button>을 넣어 키보드로 조작할 수 있게 만듭니다.

읽기 전용, 필수, 선택 등 나머지 지원 속성은 grid·treegrid 안에서 머리글 칸이 조작 가능한 칸일 때 의미가 있습니다.

함께 쓰는 속성

지원 속성

aria-sortaria-colindexaria-colspanaria-disabledaria-errormessagearia-expandedaria-haspopuparia-invalidaria-readonlyaria-requiredaria-rowindexaria-rowspanaria-selected

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

정렬 가능한 열 머리글

권장HTML
<table>
  <caption>도서 목록</caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">
        <button type="button">제목</button>
      </th>
      <th scope="col"><button type="button">출판일</button></th>
    </tr>
  </thead>
  …
</table>

ARIA 표의 열 머리글

HTML
<div role="row">
  <span role="columnheader">이름</span>
  <span role="columnheader">대출 권수</span>
</div>

굵은 글씨 td로 제목 흉내 (비권장)

비권장HTML
<tr><td><b>제목</b></td><td><b>출판일</b></td></tr>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
다른 열의 칸으로 이동출판일, 2열, 2024년 3월
정렬된 머리글에 포커스제목, 열 머리글, 오름차순 정렬됨, 버튼

사용 지침

이렇게 쓰세요

  • 열 제목에 <th scope="col">를 씁니다.
  • 정렬된 열에만 aria-sort를 둡니다.

이렇게 쓰지 마세요

  • <td>를 굵게 만들어 제목처럼 보이게만 하지 않습니다.
  • 모든 열에 aria-sort="none"을 남발하지 않습니다.
rowheaderrowcelltablegrid

이 역할을 쓰는 패턴

정렬 가능한 표

참고 자료