[HTML] WAI-ARIA : aria-hidden

사용 이유

숨김 제목과 같이 일부 콘텐츠를 숨길 필요가 있다.

콘텐츠를 숨기는 방법으로는 CSS활용해 display : none, visibility:hidden 을 활용할 수 있습니다.

이러한 기술은 웹 페이지에서 보이지 않을 뿐만 아니라 스크린 리더와같은 보조 기술로도 탐색이 불가능합니다. 

 

가. 스크린 리더 사용자에게 정보 오버로드 방지: 스크린 리더 사용자는 시각적 콘텐츠를 음성으로 변환하여 이해합니다. 따라서 너무 많은 노이즈 요소가 읽히면 콘텐츠를 이해하는 데 어려움을 겪을 수 있습니다. aria-hidden을 사용하여 불필요한 정보를 제거함으로써 사용자의 이해를 돕습니다.

 

나. 숨겨진 콘텐츠 제공: 일부 콘텐츠는 초기에는 보이지 않지만, 특정 상황에서 스크린 리더 사용자에게 제공되어야 할 수도 있습니다. 이때 aria-hidden을 동적으로 관리하여 필요한 시점에 정보를 전달할 수 있습니다.

 

다. 검색 엔진 최적화 (SEO) 개선: aria-hidden 요소는 검색 엔진에 노출되지 않으므로, 의미 없는 콘텐츠를 숨기는 데에도 유용합니다. 이는 SEO 측면에서 긍정적인 영향을 미칠 수 있습니다. 

 

aria-hidden

aria-hidden은 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한합니다.

aria-hidden이 "true"로 설정되면, 스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없습니다.

 

스크린리더(보조기기)가 접근하는 것은 원치 않지만, 시각적으로 디자인을 주기 위해서 보여지게 하고 싶은경우에 사용

 

aria-hidden 사용법

aria-hidden은 키보드 및 마우스 사용자 등과 같은 모든 사용자를 대상으로 콘텐츠를 숨기는 방법이 아니므로, 사용에 주의해야 합니다.

또한, 링크, 버튼과 같이 초점을 받을 수 있는 요소를 aria-hidden으로 숨긴 경우 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란이 있을 수 있으므로 컨트롤에 대한 초점을 제거해야 합니다.

 

<div aria-hidden="true">
  <!-- 보조 기기 사용자에게는 이 요소 내용이 읽히지 않음 -->
  <p>모달 창 안의 콘텐츠</p>
  <button>닫기</button>
</div>

 

true: 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한합니다. aria-hidden이 "true"로 설정된 콘텐츠는 스크린 리더의 가상 커서에서 탐색되지 않습니다. ul, table과 같이 하위 요소를 포함할 수 있는 요소에 aria-hidden을 "true"로 설정하면 하위 요소까지 숨길 수 있습니다.

 

false: 접근성 API가 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있습니다.