aria-hidden 사용법과 사용이유

'aria-hidden'은 웹접근성을 개선하기 위한 속성중 하나로 특정 요소를 스크린 리더등의 보조 기술이 무시하도록 지시하는 역할을 한다. 주로 css와 함께 사용되며, 웹페이지의 일부 콘텐츠를 시각적으로 숨기면서, 그 내용이 스크린 리더 등의 보조 기술에게는 여전히 사용 가능하도록 만들어준다.

 

사용법

<div aria-hidden="true">이 콘텐츠는 시각적으로 숨겨짐</div>

 

[aria-hidden="true"] {display: none;}

 

css 통해 적용할 경우

.hidden{display:none;}

 

<div class="hidden" aria-hidden="true">이 콘텐츠는 시각적으로 숨겨짐</div>

 

 

사용 이유

1. 시각적으로 표시되지 않는 콘텐츠를 화면에서 감추기 위해 사용된다. 이를 통해 디자인 요소를 개선하고 uiux 기능을 향상시킬 수 있다.

2. 웹접근성 준수 : 시각적으로 숨겨진 콘텐츠를 스크린 리더 등의 보조 기술이 무시하도록 만들어 해당콘텐츠가 시각적으로는 필요하지 않지만 의미적으로 필요할 경우 사용된다.

3. 스크린 리더 사용자에게 특정 정보를 제공 : 스크린 리더 사용자에게는 특정 시각적 요소를 숨기고, 그 대신 해당 정보를 다른 방식으로 제공함으로써 접근성을 향상시킬수 있다.

 

예를들어, 아이콘 폰트를 사용하여 화살표를 시각적으로 표현하고 'aria-hidden'을 사용하여 해당 아이콘 폰트를 화면에 표지하지 않으면서 스크린 리더 사용자에게는 "이전" 또는 "다음"과 같은 텍스트를 제공할 수 있다.