WAI-ARIA - 접근성

웹 접근성 왜 필요할 까?

웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 웹 사이트를 디자인, 개발하는 것을 의미합니다. 예를 들어 1스크린리더를 이용하는 사람, 키보드만 이용하는 사람들이 사용 할 수 있게 만드는 것 입니다.

그래서 보조과학기술(assistive technology)들이 웹 사이트를 해석할 수 있도록 접근성을 갖추는 것이 필요합니다.

표준 및 지침 중 WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications 문서에는 접근성을 갖춘 JavaScript 위젯을 만드는 데 필요한 기술들이 담겨있습니다.

React는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있으며, 대부분은 표준 HTML 기술이 사용됩니다 .JSX에서는 role 또는 aria-* 속성을 추가하여 콘텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다.

<div
    ...
    role="button"
  aria-label={labelText}
  aria-required="true"
    ...
/>

이 어트리뷰트 속성을 이용하여 현재 컴포넌트의 상태를 알 수 있게 합니다. 현재 이 태그의 역할, 속성, 상태등을 표현하여 보조과학기술을 활용하는 스크린 리더 및 보조기기 등이 읽고 전달 할 수 있도록 합니다.

No ARIA is better than Bad ARIA

잘못된 AIRA는 보조기기에 잘못된 정보를 전달하기 때문에 접근성에 치명적입니다. 잘못된 AIRA를 설정 할바에는 설정하지 않는게 좋습니다.

<a role="menuitem">보조 기술 사용자는 이 요소를 링크가 아닌 메뉴의 항목으로 인식합니다.</a>
<a aria-label="보조 기술 사용자는 아리아 레이블의 내용만 인식할 수 있습니다.">
    Link로 이동
</a>

첫 번째 태그에서 role을 menuItem으로 지정했습니다. 이는 일반적인 사용자는 차이점을 알 수가 없으나 보조기술 사용자는 a태그의 용도인 링크 이동이 아니라 메뉴의 항목(menuitem)으로 인식합니다. 두 번째 태그도 마찬가지로 보조기술 사용자는 “Link로 이동”이라는 내용을 인식 못하고 aria-label에 있는 내용만 인식 할수도 있습니다.

즉 잘못된 ARIA를 입력하는 것보다는 없는게 훨씬 좋습니다.

WAI-ARIA의 가이드라인

전 레전엔터테인먼트의 가이드라인을 참고하고자 합니다. 접근성에 대하여 잘 정리되어 있고 WAI-ARIA의 가이드 라인이 잘 되어있습니다.

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