WAI-ARIA ?

WAI-ARIA ( Web Accessibility Initiative – Accessible Rich Internet Applications )

웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.

WAI-ARIA 탄생하게 된 배경은 ?

페이지를 새로고침하지 않고 콘텐츠를 Ajax 방식으로 갱신했을 때 전맹 시각장애인은 어떤 응답을 받을 수 있을까? 갱신 사실을 보조기기에 즉시 알려줄 수 있으면 좋겠다. 비장애인이 화면에 등장하는 툴팁을 보면서 비밀번호를 바르게 생성(입력)하는 동안 시각 장애인은 아무런 안내도 받지 못한 상태로 잘못된 비밀번호를 계속해서 입력하고 있다.

WAI-ARIA 의 역할

마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.

• 버튼을 클릭하여 페이지 새로고침이나 링크 이동으로 페이지가 전환되는 것이 아닌 컨텐츠 내용이나 구조가 바뀌는 상황에서 페이지 전환 상태나 정보를 WAI-ARIA로 알려준다.
• WAI-ARIA는 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여 시각적인 불편함이 있는 사용자들에게 일반적인 구조의 HTML에서 필요한 요소에 적절한 정보를 전달받아 원활하게 페이지 탐색 및 이용을 하도록 도와준다

WAI-ARIA 사용시 주의사항 !

• 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.

  • 스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데 바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게된다.

  		<div role="button">주문하기</div>
  

• ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성한다.

  		<!-- Bad -->
  		<div role="button">버튼</div>
  
  		<!-- Good -->
  		<button>버튼</button>

• 태그의 기본 의미를 중복해서 선언할 필요는 없다.
• 페이지에서 사용하는 태그의 역할이 잘못된 ARIA를 선언하면 안된다.

WAI-ARIA 가이드 라인

https://github.com/lezhin/accessibility/tree/master/aria

REFERENCE

https://abcdqbbq.tistory.com/77