aria-expanded

설명

aria-expanded는 요소가 펼치고 접는 대상을 가지고 있으며, 그 대상이 지금 펼쳐져 있는지(true) 접혀 있는지(false)를 알립니다. 화면낭독기는 “확장됨”, “축소됨”으로 읽어, 사용자가 버튼을 누르기 전에 무엇이 일어날지, 누른 뒤 무엇이 바뀌었는지 알 수 있게 합니다.

디스클로저(펼침 버튼), 아코디언 헤더 버튼, 드롭다운 메뉴를 여는 메뉴 버튼, 콤보 상자(목록이 열렸는지), 트리 항목(하위 항목이 펼쳐졌는지), 모바일 햄버거 메뉴 버튼에 씁니다. 값은 펼쳐지는 영역이 아니라 그 영역을 여닫는 요소(보통 버튼)에 붙입니다. 영역과의 연결은 aria-controls로 표현할 수 있지만, 화면낭독기 지원이 고르지 않아 펼쳐지는 영역을 버튼 바로 뒤에 두는 것이 가장 확실합니다.

펼침 여부가 의미 없는 요소에는 속성을 생략합니다(undefined). 접힌 상태를 나타내려고 속성을 지우면 화면낭독기는 “펼칠 수 있는 요소”라는 정보 자체를 잃으므로, 접힌 상태는 반드시 "false"로 명시합니다. 또한 버튼 텍스트를 “열기/닫기”로 바꾸면서 aria-expanded도 같이 쓰면 “닫기, 버튼, 확장됨”처럼 정보가 중복되므로, 이름은 고정하고 상태만 바꾸는 것이 좋습니다.

WAI-ARIA 1.2에서 쓸 수 있는 역할은 button, combobox, link, menuitem, tab, treeitem, row, gridcell, listbox, checkbox, application, rowheader 등입니다. 역할 없는 <div>에 붙이면 무시됩니다.

테스트할 때는 Enter·Space로 펼치고 접을 때마다 값이 실제 화면 상태와 함께 바뀌는지, 페이지 첫 로드 때 초기값이 화면 상태와 맞는지, 접힌 영역의 내용이 hidden 등으로 실제로 숨겨지는지(포커스가 들어가지 않는지) 확인합니다.

값

사용 예

<button type="button" aria-expanded="false" aria-controls="ship-info">배송 안내</button>
<div id="ship-info" hidden>주문 후 2~3일 안에 도착합니다.</div>

btn.addEventListener('click', function () {
  var open = btn.getAttribute('aria-expanded') !== 'true';
  btn.setAttribute('aria-expanded', String(open));
  panel.hidden = !open;
});

<details>
  <summary>배송 안내</summary>
  <p>주문 후 2~3일 안에 도착합니다.</p>
</details>

<button type="button">배송 안내</button>
<div id="ship-info" aria-expanded="true">주문 후 2~3일 안에 도착합니다.</div>

직접 해 보기

버튼을 클릭하거나 Tab으로 이동해 Enter·Space를 눌러 보세요. 아래 실시간 코드에서 값이 바뀝니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-expanded (새 창)
• APG: Disclosure 패턴 (새 창)
• APG: Accordion 패턴 (새 창)
• MDN: aria-expanded (새 창)