ARIA 접근성 가이드

속성 · 표·목록 구조

aria-level

제목·트리 항목·중첩 목록 등이 계층 구조에서 몇 번째 수준인지 알립니다.

중급

한눈에 보기

구분
속성 (Property)
분류
표·목록 구조
값 형식
정수 (integer), 1 이상
기본값
없음
적용 범위
특정 역할에만 사용
HTML 대체
<h1>~<h6>, 중첩된 <ul>·<ol>

설명

aria-level은 계층 구조에서의 깊이를 1부터 셉니다. 숫자가 클수록 깊은 수준입니다. heading, treeitem, listitem, row(treegrid 안에서만)에 씁니다.

heading에서는 필수 속성입니다. <div role="heading" aria-level="2">는 <h2>와 같은 의미가 됩니다. 하지만 네이티브 <h1>~<h6>가 있으므로 이를 먼저 씁니다. ARIA 제목은 6보다 큰 수준이 필요하거나, 마크업을 바꿀 수 없는 위젯 안에서만 고려합니다(6을 넘는 수준은 보조기술마다 처리가 다릅니다).

treeitem과 treegrid의 row에서는 DOM 중첩으로 수준을 계산할 수 있으면 생략해도 되지만, 가상 렌더링이나 평평한(flat) DOM 구조처럼 DOM 계층이 실제 수준을 반영하지 못하면 직접 넣어야 합니다. 명세는 이 속성을 컨테이너(group)가 아닌 항목 자체에 넣도록 정합니다. table·grid의 row에 넣은 값은 노출되지 않습니다.

ARIA 1.3 초안에서는 listitem이 이 속성의 사용 역할에서 빠지는 방향이므로, 중첩 목록은 실제 <ul> 중첩으로 표현하는 것이 좋습니다.

검수할 때는 제목 목록(NVDA+F7)이나 트리 탐색에서 안내되는 수준이 화면의 시각적 계층과 일치하는지, 제목 수준을 건너뛰지 않았는지(h2 다음 바로 h4 등), 트리 항목을 펼친 뒤 하위 항목의 수준이 1씩 증가하는지 확인합니다.

값

값
값의미
<정수 ≥ 1>계층 깊이입니다. 1이 가장 바깥(최상위) 수준입니다.
(생략) 기본값treeitem·listitem은 DOM 중첩으로 계산합니다. heading은 필수이므로 생략하지 않습니다.

사용 예

네이티브 제목 우선

권장HTML
<!-- 가능하면 -->
<h2>배송 안내</h2>

<!-- 마크업을 바꿀 수 없을 때만 -->
<div role="heading" aria-level="2">배송 안내</div>

평평한 DOM으로 그린 트리

HTML
<ul role="tree" aria-label="폴더">
  <li role="treeitem" aria-level="1" aria-expanded="true" aria-setsize="2" aria-posinset="1">문서</li>
  <li role="treeitem" aria-level="2" aria-setsize="1" aria-posinset="1">보고서.hwp</li>
  <li role="treeitem" aria-level="1" aria-setsize="2" aria-posinset="2">사진</li>
</ul>

DOM 중첩이 없으므로 수준·위치·개수를 모두 직접 지정합니다.

컨테이너에 수준 지정

비권장HTML
<!-- 비권장: group이 아니라 각 treeitem에 넣어야 합니다 -->
<ul role="group" aria-level="2">
  <li role="treeitem">보고서.hwp</li>
</ul>

수준 바꾸기

JavaScript
heading.setAttribute('aria-level', String(level)); // 1 이상의 정수

직접 해 보기

제목 수준을 골라 보세요. role="heading" 요소의 aria-level이 바뀝니다. 화면낭독기에서는 제목 탐색(H 키, 숫자 키 1~6)으로 이 제목의 수준이 다르게 안내됩니다.

배송 안내

주문 후 2~3일 안에 도착합니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
제목으로 이동 (H 키)제목 수준 2, 배송 안내
트리 항목에 포커스보고서.hwp, 1/1, 수준 2
제목 목록 열기 (NVDA+F7)수준별로 들여쓰기된 제목 목록에 표시

사용 지침

이렇게 쓰세요

  • 제목은 먼저 <h1>~<h6>를 씁니다.
  • DOM 계층이 실제 수준을 반영하지 못하는 트리·트리 그리드에서는 각 항목에 넣습니다.
  • 시각적 계층과 수준 값을 일치시키고, 수준을 건너뛰지 않습니다.

이렇게 쓰지 마세요

  • group이나 tree 같은 컨테이너에 넣지 않습니다.
  • 0이나 음수를 넣지 않습니다.
  • table·grid의 row에 넣지 않습니다(treegrid에서만 의미가 있음).
  • 글자 크기를 바꾸려고 수준을 바꾸지 않습니다. 모양은 CSS로 조정합니다.

사용할 수 있는 역할

headingtreeitemlistitemrow
aria-posinsetaria-setsizearia-expandedaria-owns

참고 자료