[HTML] WAI-ARIA 이란 ?? ( aria hidden 사용법)

 

ㅇ WAI-ARIA 이란 ??

ㅡ 마우스나 모니터를 사용 할 수 없는 사람들에게 스크린 리더를 통해  웹 컨텐츠와 웹 애플리케이션에 더욱 편리하게 접근할 수 있도록 하는 방법이다.

ㅡ 특히 HTML , JavaScript 등의 기술을 이용해서 동적 컨텐츠와 고급 사용자 인터페이스 컨트롤이 가능하게 한다.

ㅡ ARIA를 사용하기 전에 태그를 그 용도에 맞게 사용해야 한다 . (주로 시맨틱 태그 )

 

ㅇ aria hidden  (숨김)

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

작성자는 중복 되거나 관련 없는 콘텐츠를 제거하여 보조 기술 사용자의 경험을 개선하기 위한 목적으로 이 콘텐츠를 숨기는 행위인 경우 에만 aria-hidden을 사용하여 보조 기술에서 시각적으로 렌더링된 콘텐츠를 숨길 수 있습니다 . 

 

ㅇ 사용법 ?

    <div aria-hidden="true">

      <!-- 아래 내용은 스크린리더에서 숨겨진다. -->

      <p>자세한 내용은 하단 참조</p>

    </div>

   

 

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

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

 

ㅇ 이외에 label 과 role 의 속성이 있다.

aria label=" " 이름을 정의한다.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby

aria-labelledby - Accessibility | MDN

 

role=" "   시메틱한 역할을 준다.

ARIA: 버튼 역할

역할 button은 사용자가 활성화할 때 응답을 트리거하는 클릭 가능한 요소에 대한 것입니다. 추가하면 해당 role="button"요소가 버튼임을 스크린 리더에 알릴 수 있지만 버튼 기능은 제공하지 않습니다. button대신 또는 를 input사용 하세요 type="button".

 

ㅡ자세한 내용과 사용법 은 아래의 사이트 참조

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

WAI-ARIA Roles - Accessibility | MDN

 

 

role 사용예시

www.w3.org/TR/html-aria/#docconformance 

ARIA in HTML