ARIA 접근성 가이드

상태 · 위젯 상태 · 전역

aria-hidden

화면에는 보이지만 보조기술에서는 숨길 요소를 표시합니다. 하위 요소 전체가 접근성 트리에서 빠집니다.

기초

한눈에 보기

구분
상태 (State)
분류
위젯 상태
값 형식
true / false / undefined
기본값
undefined
적용 범위
모든 요소 (전역 속성)
HTML 대체
hidden 속성, CSS display: none·visibility: hidden(화면과 보조기술 모두에서 숨김), inert 속성(숨김 + 상호작용 차단)

설명

aria-hidden="true"는 요소와 그 모든 하위 요소를 접근성 트리(보조기술이 읽는 페이지 구조)에서 제외합니다. 화면 표시나 마우스·키보드 동작에는 영향을 주지 않습니다. 화면에는 보이지만 화면낭독기에는 들리지 않게 됩니다.

주로 의미 없는 장식이나 중복 정보를 숨길 때 씁니다. 텍스트 옆의 장식 아이콘, 이미 텍스트로 전달된 내용을 반복하는 아이콘 폰트·SVG, 이모지 장식, 화면에 같은 링크가 두 번(이미지와 제목) 있을 때 하나를 숨기는 경우가 대표적입니다. 모달 대화상자가 열렸을 때 뒤쪽 본문을 숨기는 용도로도 쓰였지만, 지금은 aria-modal이나 inert 속성, <dialog>의 showModal()을 쓰는 편이 낫습니다.

가장 중요한 규칙은 포커스를 받을 수 있는 요소를 숨기지 않는 것입니다. aria-hidden="true" 영역 안에 버튼·링크·입력란이 있으면 Tab으로는 포커스가 가는데 화면낭독기는 아무것도 읽지 않거나 이름 없이 읽어, 사용자가 “빈 곳”에 갇히게 됩니다. 숨겨야 한다면 inert를 함께 쓰거나 해당 요소에 tabindex="-1"을 주어 포커스도 막아야 합니다. 이는 WCAG 4.1.2와 axe의 aria-hidden-focus 규칙으로 점검됩니다.

aria-hidden="false"는 숨겨진 부모 아래의 자식을 다시 드러내지 못하며, 브라우저마다 처리 방식도 달라 쓰지 않는 것이 좋습니다. 숨김을 해제할 때는 속성을 제거합니다. 또한 aria-hidden으로 숨긴 요소라도 aria-labelledby·aria-describedby로 참조하면 그 텍스트는 이름·설명 계산에 쓰입니다. <body>나 페이지 전체를 감싼 요소에 쓰면 페이지 전체가 사라지므로 주의합니다.

테스트할 때는 개발자 도구 접근성 트리에서 숨긴 요소가 빠졌는지, Tab으로 이동하면서 아무것도 읽히지 않는 “유령 포커스”가 없는지, 숨긴 내용이 정말 다른 곳에서 텍스트로 전달되는 정보인지 확인합니다.

포커스 가능한 요소에 쓰지 마세요

<button aria-hidden="true">나 링크를 포함한 영역에 aria-hidden="true"를 쓰면 키보드 사용자는 이동할 수 있지만 화면낭독기 사용자에게는 보이지 않는 요소가 생깁니다.

값

값
값의미
true요소와 하위 요소 전체를 접근성 트리에서 제외합니다.
false요소를 보조기술에 노출합니다. 숨겨진 부모 아래에서는 효과가 없고 처리가 일정하지 않아 쓰지 않는 것이 좋습니다.
undefined 기본값브라우저가 렌더링 상태에 따라 노출 여부를 판단합니다.

사용 예

장식 아이콘 숨기기

권장HTML
<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>
  장바구니에 담기
</button>

같은 링크가 반복되는 카드

HTML
<article>
  <a href="/p/12" tabindex="-1" aria-hidden="true"><img src="shoe.jpg" alt=""></a>
  <h3><a href="/p/12">러닝화 에어 12</a></h3>
</article>

이미지 링크는 포커스도 막고(tabindex="-1") 보조기술에서도 숨겨, 제목 링크 하나만 남깁니다.

포커스 가능한 요소를 숨긴 경우 (비권장)

비권장HTML
<div class="cookie-banner" aria-hidden="true">
  쿠키 사용에 동의하십니까?
  <button type="button">동의</button>
</div>

Tab으로 “동의” 버튼에 갈 수 있지만 화면낭독기는 읽지 않습니다. 숨길 필요가 없다면 속성을 제거하고, 화면에서도 숨긴다면 hidden을 씁니다.

본문을 비활성으로 만들 때는 inert

JavaScript
// 사용자 정의 모달을 열 때 (네이티브 <dialog>.showModal()을 쓰면 자동 처리)
document.getElementById('page').inert = true;   // 숨김 + 포커스·클릭 차단
// 닫을 때
document.getElementById('page').inert = false;

직접 해 보기

체크 상자를 바꿔 보며 아래 “읽히는 내용”을 비교해 보세요. 두 번째 체크 상자는 하면 안 되는 예입니다. 켠 뒤 Tab으로 “목록 보기” 버튼에 가 보세요.

즐겨찾기 12개

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
장식 아이콘을 숨긴 버튼에 포커스장바구니에 담기, 버튼
장식 기호를 숨기지 않은 텍스트 읽기검은 별 즐겨찾기 12개
aria-hidden="true" 영역 안의 버튼에 Tab으로 포커스(아무것도 읽지 않거나 “버튼”만 읽음)

사용 지침

이렇게 쓰세요

  • 텍스트와 함께 있는 장식 아이콘·이모지·기호에 씁니다.
  • SVG 아이콘에는 focusable="false"도 함께 붙여 구형 브라우저의 포커스를 막습니다.
  • 숨김을 해제할 때는 false로 바꾸지 말고 속성을 제거합니다.
  • 배경 콘텐츠를 막을 때는 inert나 네이티브 <dialog>를 우선 검토합니다.

이렇게 쓰지 마세요

  • 버튼·링크·입력란 등 포커스를 받을 수 있는 요소나 그것을 포함한 영역에 쓰지 않습니다.
  • 유일한 정보(아이콘만 있는 버튼의 아이콘 등)를 대체 텍스트 없이 숨기지 않습니다.
  • <body>나 페이지 전체를 감싼 요소에 쓰지 않습니다.
  • 화면에서 이미 hidden·display: none으로 숨긴 요소에 중복으로 쓰지 않아도 됩니다.

사용할 수 있는 역할

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

imgpresentationgroupregiongeneric
aria-modalaria-labelaria-labelledbyaria-describedbyaria-disabled

이 속성을 쓰는 패턴

모달 대화상자캐러셀(슬라이드)버튼과 토글 버튼

참고 자료