[HTML&CSS] aria-hidden & aria-label

aria-hidden

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

 

 

 

관련 글: 

2022.08.12 - [분류 전체보기] - [Javascript] ARIA(Accessible Rich Internet Applications)

 

 

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

 

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

 

🟦 aria-hidden 사용 방법

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

 

true: 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한합니다.

aria-hidden이 "true"로 설정된 콘텐츠는 스크린 리더의 가상 커서에서 탐색되지 않습니다.

ul, table과 같이 하위 요소를 포함할 수 있는 요소에 aria-hidden을 "true"로 설정하면 하위 요소까지 숨길 수 있습니다.

 

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

 

 

---

aria-label

: 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 현재 요소에 레이블을 정의하기 위해 사용합니다

 

<div role="text" aria-hidden="false" aria-label="버튼">
  <button class="btn" aria-hidden>button</button>
</div>

 

※ 텍스트 레이블이 화면에 표시되지 않을 때 사용하는 것을 권장합니다.