정의 및 사용 방법

aria-hidden 속성이 true로 설정되면, 해당 요소가 화면에 실제로 렌더링되는지 여부와 관계없이 웹 접근성 측면에서 해당 요소와 그 하위 트리 전체가 '접근성 API'로부터 숨겨져 노출되지 않음을 나타냅니다.

다음은 '접근성 API' 용어에 대한 간단한 부연설명입니다.
접근성 API(Accessibility APIs)
웹 콘텐츠의 접근성 정보(HTML 문서의 구조와 역할, 상태 및 특성 등)를 스크린 리더 및 기타 보조 기술(assistive technologies, 또는 ATs)이 이용할 수 있도록 제공하는 Application Programming Interface(API, 애플리케이션 프로그래밍 인터페이스)입니다. '접근성 API'로부터 숨겨져 노출되지 않는다는 의미는 해당 콘텐츠 전체의 접근성 정보가 스크린 리더 및 기타 보조 기술에 제공되지 않는다는 의미입니다.

값

aria-hidden 속성은 지정할 수 있는 세 가지 키워드 값이 있습니다.

aria-hidden 속성의 값 설명
true 요소가 접근성 API에서 숨겨집니다.
undefined(기본 값) 요소의 숨김 상태는 렌더링 여부에 따라 브라우저가 결정합니다.
  • 요소 또는 조상 요소가 HTML의 hidden 속성이 설정되어 있어 숨겨져 해당 요소가 표시되지 않으며, 요소 안의 콘텐츠도 존재하지 않는 것처럼 렌더링되는 경우에는 접근성 API에서 숨겨집니다.
  • 요소 또는 조상 요소가 CSS의 display: none으로 설정되어 있어 해당 요소와 그 영역이 표시되지 않으며, 요소 안의 콘텐츠도 존재하지 않는 것처럼 렌더링되는 경우에는 접근성 API에서 숨겨집니다.
  • 요소 또는 조상 요소가 CSS의 visibility 속성 값이 hidden 또는 collapse로 설정되어 있어 해당 요소가 표시되지 않으며, 요소 안의 콘텐츠도 존재하지 않는 것처럼 렌더링되는 경우에는 접근성 API에서 숨겨집니다.
  • 이 외에도 요소 또는 조상 요소가 CSS 설정으로 인해 해당 요소가 표시되지 않으며, 요소 안의 콘텐츠도 존재하지 않는 것처럼 렌더링되는 경우에는 접근성 API에서 숨겨질 수 있습니다.
  • 이러한 경우들이 아니라 해당 요소와 요소 안의 콘텐츠도 렌더링된 것이라면 접근성 API에 노출됩니다.
false 요소의 숨김 상태는 렌더링 여부에 따라 브라우저가 결정합니다. undefined 값과 동일한 값입니다.

aria-hidden="false"

aria-hidden="false"의 원래 의도는 '접근성 API'로부터 숨겨져 있던 콘텐츠를 사용자 에이전트가 노출할 수 있도록 허용하는 것이었습니다. 그러나 명세의 모호함과 false값에 대한 브라우저 지원의 일관성 부족으로 인해, 당초 의도했던 기능은 더 이상 지원되지 않습니다.

변경 이력

ARIA 1.3 버전 이전에 aria-hidden="false"는 해당 요소가 마치 렌더링된 것처럼 접근성 API에 노출된다는 의미였고, aria-hidden="undefined"는 요소의 숨김 상태는 렌더링 여부에 따라 브라우저가 결정된다는 의미였습니다.

ARIA 1.3 버전부터 aria-hidden="false"는 aria-hidden="undefined"와 동일한 의미를 갖습니다.

올바른 사용 방법

aria-hidden 속성은 웹 접근성 측면에서 페이지나 문서의 작성자가 스크린 리더 등과 같은 웹 접근성 도구를 사용하는 사용자의 접근성 향상을 고려해 중복되거나 불필요한 콘텐츠를 제거하는 목적으로 사용해야 합니다.

  • 아이콘이나 이미지와 같은 순수 장식 콘텐츠
  • 화면상으로는 적절하게 보일 수 있지만 스크린 리더로 들을 때에는 중복된 콘텐츠(예: 이미지의 alt 속성 값과 이어서 오는 텍스트 콘텐츠가 동일한 경우)

주의할 점

요소에 aria-hidden="true"를 설정하면 해당 요소가 화면에 실제로 렌더링되는지 여부와 관계없이 웹 접근성 측면에서 해당 요소와 그 모든 자식 요소 및 콘텐츠 전체가 '접근성 API'로부터 숨겨져 노출되지 않습니다.

이때, 웹 접근성 측면에서 aria-hidden="true"를 설정한 콘텐츠가 스크린 리더나 기타 보조 기술을 사용하지 않는 일반 사용자에게는 접근 가능하지만 스크린 리더나 기타 보조 기술을 사용하는 사람에게는 접근 가능하지 않게 숨겨 접근성 보장에 문제가 되지는 않는지 주의를 기울여 사용해야 합니다.

  • 페이지나 문서의 작성자는 루트 요소나 현재 화면에 표시된 주 문서의 내용을 나타내거나 포함하는 요소(예: HTML 문서의 <html> 또는 <body> 요소)를 숨기기 위해 사용해서는 안 됩니다.
  • 화면에 표시되는 콘텐츠를 스크린 리더 사용자에게 숨기기 위해 aria-hidden="true"를 사용하는 경우, 작성자는 스크린 리더를 사용하지 않는 일반 사용자에게 제공되는 콘텐츠와 동일하거나 동등한 의미와 기능이 스크린 리더 및 기타 보조 공학 기기를 사용하는 사용자에게 제공되도록 보장되는지 확인해야 합니다. 보장이 되지 않는다면 aria-hidden="true"를 사용해야 하는지를 다시 살펴보는 것이 좋습니다.
  • aria-hidden="true"는 상호 작용이 가능한 대화형 요소(Interactive Elements, 예: <a>, <input> 등)나 포커스를 받을 수 있는 요소(focusable elements)에 사용하면 안 됩니다. 이 속성은 하위 요소에도 적용되므로, 이러한 요소들이 포함되면 안 됩니다.

예제

다음 예제들을 통해 aria-hidden="true"를 사용하는 방법에 대해 살펴보겠습니다.

순수 장식용 아이콘

다음은 <span>로 오직 스타일을 위한 시각적 장식용 태그로 활용한 예제입니다.
<button> 태그의 텍스트 옆에 시각적 장식용으로 화살표를 표시합니다. 이 화살표는 자체적으로는 특별한 의미가 없는 화살표입니다. 이럴 경우 스타일을 위한 장식용이므로, aria-hidden="true"를 사용해서 '접근성 API'로부터 숨겨져 노출되지 않음을 나타냅니다.

HTML 
<button type="button" id="toggle-button">
    <span class="toggle-button-text">클릭하기</span>
    <!-- 오직 시각적 스타일을 위한 장식용 태그로 사용: 화살표를 표시 -->
    <span aria-hidden="true" class="toggle-button-arrow"></span>  
</button>
CSS 
#toggle-button {
    padding: 0.5em 1em;
    background: none;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-button-text {
    margin-right: 1em;
}
.toggle-button-arrow { /* 화살표를 표시 */
    display: inline-flex;
    width: 0.7em;
    height: 0.7em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(-45deg) translateY(-0.3em);
}
브라우저에서 실제 표시된 모습

화면에는 보이지만 스크린 리더에서는 중복되는 콘텐츠

다음은 화면에 표시되는 콘텐츠가 스크린 리더 사용자에게는 다른 콘텐츠와 중복되어 전달될 수 있는 경우에 aria-hidden="true"를 사용하는 예제입니다.

HTML 
<figure>
    <img src="..." alt="코딩하는 사람">
    <figcaption aria-hidden="true">코딩하는 사람</figcaption>
</figure>

하위 콘텐츠 전체에 적용

aria-hidden="true"를 지정한 요소에 포함된 하위 콘텐츠 전체가 접근성 API에서 숨겨져 노출되지 않는 경우를 살펴보겠습니다.

HTML 
<div class="container" aria-hidden="true">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
</div>
CSS 
.container {
    position: relative;
    height: 200px;
}
.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.circle-1 {
    top: 0;
    background-color: red;
}
.circle-2 {
    top: 80px;
    left: 100px;
    background-color: green;
}
.circle-3 {
    bottom: 0;
    left: 50px;
    background-color: blue;
}
브라우저에서 실제 표시된 모습

부록: 요소가 접근성 측면에서 숨겨지는 경우

요소에 aria-hidden="true"를 설정해 접근성 측면에서 숨겨지는 경우 이외에도 HTML과 CSS에는 요소가 접근성 측면에서 숨겨지는 경우가 있습니다.

대표적인 경우를 표로 정리하면 다음과 같습니다.

요소가 접근성 측면에서 숨겨지는 대표적인 경우
경우 화면 표시 접근성 측면
HTML aria-hidden="true" 표시됨 👀 접근성 API에서 숨겨짐 🚫
HTML role="presentation" 표시됨 👀 요소의 고유한 역할의 의미가 제거됨
(단, 하위 요소 중 상호 작용이 가능한 대화형 요소의 경우와 텍스트 콘텐츠는 그 고유한 역할의 의미가 제거되지 않음)
HTML hidden 숨겨짐 🚫 접근성 API에서 숨겨짐 🚫
CSS display: none 숨겨짐 🚫 접근성 API에서 숨겨짐 🚫
CSS visibility: hidden 숨겨짐 🚫
(단, 시각적으로 보이지 않지만, 여전히 레이아웃에 정상적으로 영향을 미침)		 접근성 API에서 숨겨짐 🚫

명세서

aria-hidden 속성의 명세서 사양
명세서 사양
aria-hidden Accessible Rich Internet Applications (WAI-ARIA)
#aria-hidden

참고문헌

같이 보기