ARIA 접근성 가이드

속성 · 표·목록 구조

aria-sort

표의 열(또는 행) 머리글 기준으로 데이터가 어떤 순서로 정렬되었는지 알립니다.

중급

한눈에 보기

구분
속성 (Property)
분류
표·목록 구조
값 형식
토큰 (token): ascending / descending / none / other
기본값
none
적용 범위
특정 역할에만 사용
HTML 대체
없음 (HTML 표에는 정렬 상태를 나타내는 속성이 없습니다)

설명

aria-sort는 표나 그리드가 이 머리글 기준으로 정렬되어 있음과 방향(오름차순·내림차순)을 알립니다. columnheader와 rowheader에만 씁니다. 네이티브 <th>도 해당 역할이므로 그대로 붙일 수 있습니다.

명세는 한 표에서 한 번에 하나의 머리글에만 붙이도록 권고합니다. 다른 열로 정렬을 바꾸면 이전 머리글의 속성은 제거하거나 none으로 바꿉니다. APG 정렬 표 예제는 정렬되지 않은 머리글에서 속성을 제거하는 방식을 씁니다. 모든 머리글에 aria-sort="none"을 넣으면 화면낭독기가 열마다 "정렬 안 됨"을 반복할 수 있기 때문입니다.

aria-sort는 상태를 알려 줄 뿐 정렬 기능은 없습니다. 정렬은 머리글 안의 <button>으로 실행하게 해야 키보드로 조작할 수 있습니다. <th> 자체에 클릭 이벤트만 거는 방식은 키보드·화면낭독기 사용자가 정렬할 수 없게 만듭니다. 또한 "정렬 가능한 열"이라는 사실은 이 속성으로 알 수 없으므로, 캡션이나 버튼 이름으로 안내합니다.

정렬 결과가 즉시 안내되지는 않습니다. 버튼을 누르면 포커스가 버튼에 그대로 있으므로, 많은 화면낭독기는 변경된 aria-sort를 다시 읽어 주지만 일관되지 않습니다. 필요하면 status 라이브 리전으로 "가격 오름차순으로 정렬했습니다"를 보조로 알립니다.

검수할 때는 정렬 버튼을 키보드로 누를 수 있는지, 값이 화면의 정렬 화살표와 일치하는지, 동시에 두 머리글에 값이 남아 있지 않은지, 정렬 아이콘이 화면낭독기에 불필요하게 읽히지 않는지(aria-hidden="true") 확인합니다.

값

값
값의미
ascending이 열 기준 오름차순(작은 값 → 큰 값, ㄱ → ㅎ)으로 정렬되어 있습니다.
descending이 열 기준 내림차순(큰 값 → 작은 값)으로 정렬되어 있습니다.
none 기본값이 열 기준으로 정렬되어 있지 않습니다.
other오름차순·내림차순이 아닌 다른 정렬 방식(예: 사용자 지정 순서)이 적용되어 있습니다.

사용 예

버튼으로 정렬하는 열 머리글

권장HTML
<table>
  <caption>상품 목록 <span class="sr-only">(열 머리글 버튼으로 정렬할 수 있습니다)</span></caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">
        <button type="button">상품명 <span aria-hidden="true">▲</span></button>
      </th>
      <th scope="col">
        <button type="button">가격 <span aria-hidden="true">♢</span></button>
      </th>
    </tr>
  </thead>
  ...
</table>

정렬 상태 바꾸기

JavaScript
function sortBy(th, direction) {
  // 다른 머리글에서는 제거 (한 번에 하나만)
  th.closest('tr').querySelectorAll('th[aria-sort]').forEach((h) => h.removeAttribute('aria-sort'));
  th.setAttribute('aria-sort', direction); // 'ascending' | 'descending'
}

키보드로 조작할 수 없는 정렬

비권장HTML
<!-- 비권장: th에 클릭만 걸려 있고, 모든 열에 none을 넣음 -->
<th onclick="sort(0)" aria-sort="ascending">상품명</th>
<th onclick="sort(1)" aria-sort="none">가격</th>
<th onclick="sort(2)" aria-sort="none">재고</th>

직접 해 보기

열 머리글의 버튼을 Tab으로 이동해 Enter나 Space로 눌러 보세요. 같은 버튼을 다시 누르면 방향이 바뀌고, 다른 열을 누르면 이전 머리글의 aria-sort가 제거됩니다.

과일 가격표 (열 머리글 버튼으로 정렬할 수 있습니다)

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
정렬된 열 머리글의 버튼에 포커스품목, 버튼 (표 탐색 시: 품목, 열 머리글, 오름차순 정렬)
가격 버튼을 누름가격 오름차순으로 정렬했습니다. (status 라이브 리전 안내)
표 탐색으로 가격 열 셀로 이동가격, 오름차순 정렬, 2열, 2,500원

사용 지침

이렇게 쓰세요

  • 한 표에서 현재 정렬 기준인 머리글 하나에만 넣습니다.
  • 정렬은 머리글 안의 <button>으로 실행해 키보드로 조작할 수 있게 합니다.
  • 정렬 화살표 아이콘은 aria-hidden="true"로 숨기고, 상태는 aria-sort로 알립니다.
  • "정렬할 수 있음"은 캡션이나 안내 문구로 따로 알립니다.

이렇게 쓰지 마세요

  • 여러 머리글에 동시에 ascending·descending을 남겨 두지 않습니다.
  • td·cell이나 table에 넣지 않습니다.
  • <th>에 클릭 이벤트만 걸어 마우스로만 정렬되게 만들지 않습니다.

사용할 수 있는 역할

columnheaderrowheader
aria-labelaria-livearia-colindex

이 속성을 쓰는 패턴

정렬 가능한 표

참고 자료