WAI-ARIA란?
Web Accessibility Initiative – Accessible Rich Internet Applications
WAI-ARIA는 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는 방법을 정의한다.
WAI는 W3C에서 웹 접근성을 담당하는 기관
ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미
ARIA가 등장한 이유는?
페이지 중심의 정적이던 사이트들은 동적으로 변화하고 있다.
이런 변화는 사용성과 반응형 향상에는 극적인 도움을 주지만 스크린리더 같은 보조기술을 사용하는 유저들에게는 접근성 격차가 발생했다. 이런 격차에 대해 보다 일관된 접근성 모델을 형성하고 상호 운용성 향상을 위해 등장했다.
ARIA는 어떻게 사용 하는가?
ARIA는 마크업에서 특별한 속성을 추가하여 위젯의 디테일한 정보를 제공할 때 사용한다.
이를 위한 ARIA의 속성(roles, states, properties)을 알아보자.
- 역할(Role) : 컴포넌트, 요소 내 역할을 정의
aria 구조 중 역할을 명시해주면 단지 링크 태그로서의 의미만을 전달해주는것이 아닌, 버튼의 역할이 Tab이라고 명시해준다.<ol role="tablist"> <li id="ch1Tab" role="tab"> <a href="#ch1Panel">Chapter 1</a> </li> </ol>
- 속성(Property) : 컴포넌트의 특징이나 상황을 정의
(속성명으로 aria-xx라는 접두사 사용)
검색이라는 안내 텍스트 없이 버튼을 나타낼 때, 스크린리더 사용자는 어떤 버튼인지 알 수 없다. aria-label을 이용하여 버튼 요소에 검색이라는 설명을 추가하여 정보를 전달할 수 있다.<button class="btn_search" aria-label="검색">
- 상태(State) : 해당 컴포넌트의 상태 정보를 정의메뉴의 활성 여부를 보여주는 aria-expanded, aria-selected와 같이 현재 상태 또는 변화된 값을 알려준다.
아코디언 메뉴의 활성 상태 값인 aria-expanded를 명시하면 스크린 리더기가 상태정보(확장 또는 축소)를 읽어줄 수 있다.<ul class="btnList"> <li> <button aria-controls="accordion-region" aria-expanded="true">btn</button> </li> </ul>
더 많은 ARIA의 역할, 속성, 상태는 (MDN-ARIA) 참고
ARIA는 사용 시 주의사항은?
-
제공되는 의미 체계 및 동작이 있는 HTML요소를 먼저 사용할 것
<!-- Do Not --> <!-- nav태그로 의미 전달이 가능한데 먼저 사용하지 않은경우--> <div role="navigation"> navi </div> <!-- 중복되는 역할을 전달한 경우 --> <nav role="navigation"> navi </nav> <!-- Do --> <nav> </nav> -
필요한 경우가 아니면 의미를 가진 HTML 요소를 변경하지 말 것
<!-- Do Not --> <h2 role=tab>heading tab</h2> <!-- Do --> <div role=tab><h2>heading tab</h2></div> -
키보들 이용하여 접근할 수 있게 할 것
<!-- 버튼으로 사용하기위해 role="button"속성 부여시 tabindex도 반드시 설정해서 접근이 가능하도록 한다. --> <!-- Do Not --> <span role="button"> button </span> <!-- Do --> <span role="button" tabindex="0"> button </span>
-
모든 대화형 요소에는 액세스 가능한 이름을 가질 것
<!-- Do Not --> user name <input type="text"> <!-- Do --> <input type="text" aria-label="User Name"> <span id="p1">user name</span> <input type="text" aria-labelledby="p1"> -
포커스 가능한 요소 에 role="presentation"또는 aria-hidden="true"를 사용하지 말것
-
사용자의 브라우저와 보조기기가 WAI-ARIA를 지원하는지 확인할 것
WAI-ARIA를 사용하여 구현해본 COMBOBOX UI
WAI-ARIA 미적용 사례
https://codesandbox.io/embed/combo-wai-aria-ojn9fz?fontsize=14&hidenavigation=1&theme=dark
WAI-ARIA 적용 사례
https://codepen.io/Won-Oh-Choi/pen/QWQQjop
어떤 부분에서 접근성이 문제가 있을까?
스크린리더는 어떻게 읽어줄까?
- 역할 명시가 없기 때문에 어떤 용도의 리스트인지 이해하기 어려울 것 같다.
- 포커스가 잡히지 않기 때문에 한번에 모든 리스트를 읽는 문제점이 있을 것 같다.
스크린리더 테스트 후 예상과 어떻게 다른가?
- 포커스가 잡히지 않는 예상은 했지만 하나만 알고 둘은 몰랐다. 기본적으로 포커스가 안되기 때문에 마우스클릭으로만 동작이 가능해 스크린리더 이용자가 전혀 사용할 수 없는 콤보 박스였다.
베스트 사례 분석 후 깨달은 점은?
-
role을 이용하여 역할 명시 ul태그에listbox를 주고 li태그에option을 준다. -
aria-autocomplete의 속성값으로'list'를 줘서 목록형 자동완성 편집 요소임을 명시
(우선, 스크린 리더 사용자가 자동완성이 가능한 편집 요소임을 알 수 있도록 하려면 사용자가 편집할 input 요소에 aria-autocomplete를 사용하고, 브라우저에서 제공하는 autocomplete 속성을 비활성 상태로 변경해야 한다.) -
aria-owns속성은 서로 구조상 관계가 없는 요소를 연결하는 역할을 수행한다.
input 요소는 닫는 태그가 별도로 없는 셀프 클로징 요소로 자손 요소를 둘 수 없다.
따라서 이 aria-owns를 사용하여 input의 자손처럼 스크린 리더가 인식할 수 있도록 listbox 요소를 연결하여 사용한다. -
aria-activedescendant는 aria-owns와 마찬가지로 HTML id 값을 받는 속성으로 스크린 리더 사용자의 실제 초점과 가상 커서는 편집창에 위치하고 있으나, 마치 초점이 어떠한 요소로 탐색하는 것과 같이 속성값에 제공한 id와 일치하는 요소를 읽게끔 전달한다. -
상위 메뉴가 하위 메뉴를 가지고 있는 경우
aria-haspopup="true"속성을 삽입하여 하위 메뉴가 있음을 스크린리더에서 읽게 하고, 하위 메뉴가 펼쳐졌을 때는aria-expanded="true"를 삽입하고aria-controls속성으로 하위 메뉴의 id 연결한다.
WAI-ARIA 학습 후 무엇을 느꼈는가?
WCAG에 이어 WAI-ARIA를 학습하며, 시맨틱 태그를 사용하지 않을 때 적절한 역할 속성을 어떻게 지정해 의미를 부여할지에 대해 고민해야 한다는 것을 깨달았다. 또한 웹 페이지를 보며 단순히 어떤 레이아웃을 갖고 어떤 태그를 사용했는지가 아니라 해당 태그를 사용하여 어떻게 접근성에 대해 고민하였고 풀어냈는지에 대해서도 관심 있게 바라보게 되었다. 거기에 더해 자바스크립트로 ARIA 속성 값을 어떻게 지정해줘야 하는지에 대해 고민해보는 시간도 가질 수 있어 좋았다. ARIA를 사용해 일관된 접근성을 사용자에게 제공할 수 있도록 신경쓰자
참고
