[웹접근성] wai-aria

웹접근성 - wai-aria

 

🔎 wai-aria

• 접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다.
• 포인팅 장비를 사용하기 어려운 사람들이 스크린 리더를 사용할 때, 동적인 컨텐츠에 대한 접근성을 높여 페이지 이동에 도움을 주는 기능
• HTML로 표현할 수 없는 의미를 태그에 담아 스크린 리더를 통해 적절한 정보를 제공해줄 수 있다.

 

🔎 aria-* 을 통한 html 의미체계 확장

• Html 기본 태그 속성에는 “누름” 상태를 노출시키는 속성이 없다. 하지만 aria-pressed="true"를 통한 의미의 확장은 컨트롤의 시각적표현과 일치하는 청각적 UI가 가능해진다.

//버튼이 눌려진 상태를 aria로 전달
<button aria-pressed=true>버튼</button>

 

🔎 한계

• 환경별 지원 수준에서 차이를 보인다.
  (운영체제, 브라우저, 보조기술 등)
• 구식 소프트웨어버전은 aria 역할을 지원하지 않거나 부분적으로만 지원 또는 잘못된 기능을 가지고 있을 수 있다.
  때문에 의미를 가진 HTML요소를 사용하여 마크업 작업을 하는 것이 좋다. (ex. button, a, img, checkbox, radio 등)

 

🔎 주의

• 정확한 태그의 역할을 선언해야한다.

<h2 role="heading">제목영역</h2> (O)
<button role="heading">버튼</button> (X)

 

• 태그가 가진 기본 의미를 중복 선언 할 필요가 없다.

<ul role="list">...</ul>
<button role="button">버튼</button>

https://www.w3.org/TR/html-aria/

ARIA in HTML