ARIA 접근성 가이드

상태 · 위젯 상태 · 전역

aria-current

여러 항목 중 현재 페이지·현재 단계·현재 위치에 해당하는 항목을 표시합니다.

기초

한눈에 보기

구분
상태 (State)
분류
위젯 상태
값 형식
토큰 (page / step / location / date / time / true / false)
기본값
false
적용 범위
모든 요소 (전역 속성)
HTML 대체
없음 (CSS 클래스로만 표시하던 “현재 메뉴” 표시를 대신합니다)

설명

aria-current는 관련된 여러 요소 가운데 지금 사용자가 있는 곳에 해당하는 요소를 표시합니다. 내비게이션에서 현재 페이지 링크, 단계형 진행 표시에서 현재 단계, 달력에서 오늘 날짜처럼, 시각적으로는 굵은 글씨나 색으로만 구분하던 “현재” 표시를 보조기술에도 전달합니다.

값은 “무엇의 현재인지”를 나타내는 토큰입니다. 사이트 메뉴·페이지 번호·이동 경로(브레드크럼)의 마지막 항목에는 page, 결제 단계·설치 마법사에는 step, 흐름도나 지도에서 현재 위치에는 location, 달력의 오늘에는 date, 시간표의 현재 시각에는 time을 씁니다. 알맞은 토큰이 없으면 true를 씁니다. 목록에 없는 값을 쓰면 true로 처리됩니다.

aria-selected와 헷갈리기 쉽습니다. aria-selected는 탭·목록 상자처럼 사용자가 고르는 위젯 안의 선택 상태이고, aria-current는 “현재 위치”라는 사실을 알리는 것입니다. 일반 내비게이션 링크 목록에 aria-selected를 쓰면 화면낭독기가 무시하거나 엉뚱하게 읽습니다. 반대로 탭에는 aria-current가 아니라 aria-selected를 씁니다.

한 묶음 안에서는 한 요소에만 값을 둡니다. 페이지가 바뀌거나 단계가 넘어가면 이전 요소의 속성을 제거하고 새 요소에 설정합니다. 단일 페이지 앱(SPA)에서 라우팅으로 화면만 바꿀 때 이 처리를 빠뜨리기 쉽습니다. CSS 선택자로 [aria-current="page"]를 쓰면 시각 표시와 속성이 자동으로 일치합니다.

테스트할 때는 내비게이션을 Tab이나 가상 커서로 지나가면서 현재 항목에서만 “현재 페이지”가 읽히는지, 페이지 이동 후에 값이 올바른 링크로 옮겨졌는지 확인합니다.

값

값
값의미
page현재 페이지를 나타냅니다. 사이트 메뉴, 페이지 번호, 이동 경로의 마지막 항목 등.
step여러 단계로 진행되는 과정의 현재 단계를 나타냅니다.
location흐름도·지도 등 시각적으로 표현된 위치 중 현재 위치를 나타냅니다.
date달력·날짜 모음에서 현재(오늘) 날짜를 나타냅니다.
time시간표 등에서 현재 시각을 나타냅니다.
true묶음 안에서 현재 항목입니다. 위 토큰이 맞지 않을 때 씁니다.
false 기본값현재 항목이 아닙니다. 속성을 생략한 것과 같습니다.

사용 예

사이트 메뉴의 현재 페이지

권장HTML
<nav aria-label="주 메뉴">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/products" aria-current="page">제품</a></li>
    <li><a href="/support">고객 지원</a></li>
  </ul>
</nav>

단계 표시

HTML
<ol aria-label="주문 단계">
  <li>장바구니</li>
  <li aria-current="step">배송 정보</li>
  <li>결제</li>
</ol>

페이지 이동 시 값 옮기기 (SPA)

JavaScript
function markCurrent(nav, path) {
  nav.querySelectorAll('a').forEach(function (a) {
    if (a.getAttribute('href') === path) a.setAttribute('aria-current', 'page');
    else a.removeAttribute('aria-current');
  });
}

내비게이션에 aria-selected 사용 (비권장)

비권장HTML
<a href="/products" class="active" aria-selected="true">제품</a>

aria-selected는 링크(link) 역할에서 지원되지 않습니다. aria-current="page"를 씁니다.

직접 해 보기

메뉴 링크를 누르거나 “이전 / 다음 단계” 버튼을 눌러 보세요. aria-current가 한 항목에서 다른 항목으로 옮겨 갑니다.

  1. 장바구니
  2. 배송 정보
  3. 결제

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
aria-current="page" 링크에 포커스현재 페이지, 제품, 링크
다른 메뉴 링크에 포커스고객 지원, 링크
가상 커서로 aria-current="step" 항목 읽기현재 단계, 배송 정보
aria-current="date" 날짜 버튼에 포커스현재 날짜, 22, 버튼

사용 지침

이렇게 쓰세요

  • 내비게이션·페이지 번호·이동 경로에서 현재 페이지 링크에 page를 씁니다.
  • 상황에 맞는 토큰(step, date 등)을 고르고, 없으면 true를 씁니다.
  • 한 묶음에서 한 요소에만 설정하고, 이동할 때 이전 요소에서는 제거합니다.
  • 시각적 “현재” 표시를 [aria-current] 선택자로 스타일링해 상태를 일치시킵니다.

이렇게 쓰지 마세요

  • 내비게이션 링크에 aria-selected나 aria-pressed를 쓰지 않습니다.
  • 탭·목록 상자의 선택 항목에 쓰지 않습니다. 이 경우 aria-selected를 씁니다.
  • 현재 항목이 바뀌었는데 여러 요소에 값을 남겨 두지 않습니다.

사용할 수 있는 역할

전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.

linklistitembuttongridcellrow
aria-selectedaria-label

이 속성을 쓰는 패턴

브레드크럼(현재 위치)페이지 레이아웃(랜드마크)

참고 자료