웹 접근성 area-hidden을 사용하는 이유

 

area-hidden 사용이유

스크린 리더 사용자에게 정보 오버로드를 방지하기 위함.

시각적 콘텐츠를 음성으로 변화하여 스크린리더가 읽어줄 때 너무 많은 요소들이 읽히면 사용자가 어려움을 겪을 수 있다.

 

콘텐츠를 숨기기 위해서는 display:none, visibility:hidden 등을 활용 할 수 있다. 하지만 이런 css로 숨기는 기능은 웹 페이지에서도 보이지 않고 스크린리더가 접근이 불가능하다.

 

특징)

area-hidden="ture"로 설정 될 시 스크린 리더로 해당 콘텐츠를 탐색할 수 없다.

이 경우는 스크린리더가 접근하는 것은 막고, 시각적 디자인을 줄 때만 사용한다.

 

버튼, 링크와 같은 초점을 받을 수 있는 요소에 area-hidden으로 숨긴 경우에는 포커스가 갈 수 있어서 혼란을 일으킬 수 있기때문에 컨트롤에 대한 초점을 제거해야한다.

 

 

<div area-hidden="true">
	<!--내부의 콘텐츠가 스크린리더에 의해 읽히지 않음-->
	<p>모달 내부 컨텐츠</p>
    <button>닫기</button>
</div>

 

area-hidden="true"

스크린리더와 같은 보조기가 탐색을 제한한다. ul, table같은 요소에 추가하면 하위 요소 까지 숨기기 가능하다.

 

area-hidden="false"

콘텐츠를 탐색할 수 있다.