[웹접근성]WAI-ARIA

김그묠·2022년 9월 24일

Accessibility

목록 보기

2/3

WAI-ARIA

WAI-ARIA란?

WAI : ‘Web Internet Applications’의 약자로 웹 접근성을 담당하는 조직
ARIA : ‘Accessible Rich Internet Applications’의 약자로 리치 인터넷을 위한 W3C 접근성 명세

WAI-ARIA 는 웹 콘텐츠와 애플리케이션의 접근성과 상호 운용성을 향상시키기 위한 프레임워크를 제공하는 기술 사양이다.

웹 접근성의 영역은 장애인이 웹 콘텐츠를 사용할 수 있도록 하는 방법을 정의한다.

장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성이 있다.

⇒ WAI-ARIA는 역할, 속성, 상태 정보를 동적 웹 애플리케이션에 추가함으로써 어플리케이션으로 선언할 수 있게 한다.

역할 : 컴포넌트, HTML 요소 내 역할을 정의
- 관련 역할에 대한 계층적 정보(예시: directory가 list의 타입인 것)
- 역할의 맥락(예시: listItem이 list 안에 포함된 것)
- 각 역할에 대해 지원되는 상태 및 속성

(몇가지 role의 종류)
role="tooltip" : 초점을 받으면 노출되는 컨텐츠 혹은 참고용 컨텐츠의 역할을 부여한다.
role="tablist" : role="tab"과 함께 사용되는 복합형 Role속성이며 요소에 탭목록 역할을 부여한다.
role="tab" : role="tablist"의 자식속성으로 사용되며 탭 역할을 부여한다.
role="tabpanel" : 탭의 본문 역할을 부여한다.
role="alert" : alert 역할은 사용자에게 동적인 변화를 알려줄 때 사용한다.

탭 버튼을 작업할 때 단순히 <ul>, <li>, <a> 태그로 탭을 구성한다.
WAI-ARIA role="tabList",  role="tab",  role="tabpanel"로 스크린 리더기 사용자에게 
더 정확한 정보를 제공할 수 있다.

탭 메뉴 WAI-ARIA 적용 전 : 페이지를 이동하는 "링크" 태그로서의 의미만을 정보만 전달한다.

탭 메뉴 WAI-ARIA 적용 후 : 버튼의 역할이 "탭"이라고 명시해주고, 선택된 요소 정보도 함께 전달해줄 수 있다.

// 예시 
<a>버튼</a>

<button role="button">버튼 </button>

  WAI-ARIA 적용 전 : 페이지를 이동하는 “링크"태그로써의 의미를 가진 정보를 전달한다.

WAI-ARIA 적용 후 : 버튼의 역할이 “tab”이라고 명시하며 선택된 요소 정보도 전달한다.

속성 : 해당 요소의 특징이나 상황을 정의하며 aria- 라는 접두사를 사용한다.
- HTML5에서 추가된 의미 있는 태그를 먼저 사용하고 의미를 부가적으로 설명해주고자 할 때 WAI-ARIA의 role을 함께 사용해준다.

(몇가지 role의 종류)

aria-controls : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 
										상태 값은 tabpanel의 id명 입력
aria-labelledby : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.

aria-describedby : aria-labelledby가 label을 제공하는 것과 같은 방식 DOM에서 숨겨지거나 
									보조 기술에서 숨겨졌는지에 상관 없이, 다른 방법으로는 보이지 않는 요소를 참조할
									 수 있다.

* aria-labelledby 은 aria-label 과 비슷하지만 다르게 사용된다.
aria-label 은 어떤 요소에 대한 설명을 직접 적는 반면, aria-labelledby 은 다른 요소의 ID 값을
매칭

상태 : 컴포넌트 상태 정보를 정의
- 메뉴의 활성 여부를 보여주는 aria-expanded, aria-selected, 폼 요소 유효성 검증과 관련 있는 aria-invalid를 가진다.
- 상태가 변화될 때 확장됨 or 축소됨, 눌림 or 눌리지 않음을 음성으로 알리며, aria-invalid 상태에 따라 에러 텍스트를 노출함으로써 사용성을 높인다.
  - 주로 탭, 아코디언, 폼 요소, 토글 버튼 등 상태 값을 이용하여 Javascript 기능을 만들어 사용한다.

WAI-ARIA를 사용해야 하는 이유

RIA의 동적 웹 애플리케이션 접근성 보장 지침이 부족
Ajax, 통한 실시간 변경 콘텐츠, SPA 방식의 콘텐츠 변경
화면 확대사용자의 경우, 가시 범위 밖 콘텐츠의 변경 내용 인지 불가능
HTML5 Section 요소와 중복되어 사용하지 않아야 한다.
HTML5에서 추가된 의미 있는 태그를 먼저 사용하고 의미를 부가적으로 설명해주고자 할 때 WAI-ARIA의 role을 추가해준다.

WAI-ARIA를 사례

YOUTUBE MUSIC
- aria-selected : 단일 또는 다중 선택이 가능한 요소(role="gridcell|option|row|tab")에 한하여 선택 상태를 명시하는 용도로 사용한다.
- role="tab" 요소에 가장 흔히 사용한다. 키보드 초점을 받을 수 있는 요소에 적용해야 한다.
- 선택 요소에만 aria-selected="true" 속성을 적용하면 aria-selected 속성을 적용하지 않은 요소는 aria-selected="undefined" 상태(선택할 수 없음)가 된다. 따라서 선택하지 않은 요소에는 명시적으로 aria-selected="false" 속성과 값을 적용한다.
- aria-haspopup="true": 메뉴를 열기 위한 버튼에 설정 혹은 메뉴 항목이 서브메뉴를 가진 경우 설정하며, 메뉴 버튼인 경우 해당 버튼이 팝업 메뉴를 가지고 있음을 스크린 리더 사용자가 알 수 있도록 하기 위해 사용한다.

    aria-selected 사례

aria-haspopup사례

    aria-expanded=“true”

아코디어 메뉴 WAI-ARIA 적용 전 : 아코디언 버튼 메뉴가 활성화/비활성화 상태에 대한 정보를 알 수 없다.
아코디어 메뉴 WAI-ARIA 적용 후 : 아코디언 버튼 메뉴가 활성화됐을 경우, “확장됨, 축소됨"으로 상태 정보를 전달해줄 수 있다.

APPLE
- 속성 50개 (aria-labelledby 1개, aria-live 1개 제외하고는 모두 aria-label과 aria-hidden이 절반씩 차지)
- 역할 36개 (navigation, button, presentation, combox, listbox, option, status, main, text, contentinfo)
- 분석 : role=”presentation” 과 aria-hidden이 많이 사용 됨. presentation은 스크린리더가 읽지 못하게 하는 역할
- aria-hidden과의 차이는?
- aria-hidden의 경우 해당 속성이 적용 된 태그를 포함하여 모든 자식 요소들과 포함된 컨텐츠들을 accessibility tree에서 제거하여 스크린 리더가 읽지 않는다.
- role=”presentation”의 경우 사용된 시멘틱 태그의 시멘틱이 의미가 없어 스크린리더에 전달할 필요가 없을 경우 사용한다. ex) ul, table 등으로 레이아웃을 잡았을 시 레이아웃 용도이기에 본래의 테이블과 목록의 시멘틱 의미는 전달할 필요가 없다. aria-hidden과 마찬가지로 해당 속성이 적용된 태그와 그 자식들을 accessibility tree에서 삭제하지만 focusable한 요소들과 그 안의 컨텐츠들은 삭제하지 않는다.

Accessibility tree : DOM 트리의 부분 집합으로 accessible object로 구성된 트리이다. 각 노드는 UI에 있는 요소로 accessibility API를 통해 노출되어 assistive technologies가 읽는다.
Accessible object : accessibility tree에 포함된 노드로 assistive technologies가 사용 할 수 있도록 상태, 속성, 이벤트들을 제공한다.
ex) 일반적으로 마크업 태그와 그 속성들을 말한다.
Assistive technologies : 쉽게 말해 스크린리더나 스크린 확대기 같은 것들을 말한다.
Accessibility API : 운영체제가 assistive technologies에 전달하는 object와 event 정보가 담긴 인터페이스. AXAPI (Mac OS X Accessibility Protocol) 등이 있다.
Accessible name: alt, aria-label, 버튼 텍스트 등에 적힌 내용들로 accessibility tree의 노드에 포함된다.

Accessibility tree 예시

https://timwright.org/blog/2016/11/19/difference-rolepresentation-aria-hiddentrue/

레진코믹스

HTML 명세 만으로는 javascript로 인한 비동기 요소들에대한 접근성 지원에 제약이 있다. 레진코믹스에서는 WAI-ARIA 명세를 만들어 재사용 가능하며 개발 구성원이 접근성을 고려한 웹 컨텐츠 제작에 효율성을 가져 올 수 있도록 가이드라인을 만들었다.

총 25개의 항목으로 구성되어 있는 해당 가이드라인과 레진 코믹스에서 서비스 중인 WAI-ARIA 사례를 대표적인 특징점 위주로 정리해보려고 한다.
- 사용자 편의 (탭 목록, 탭, 탭 패널)

로그인 입력 폼에서 이메일 실패 안내 메시지를 제공하기 위해 사용중이다.
input의 aria-error-message와 p id 속성를 연결한다.
aria-error-message 이외에도 다른 aria-* 속성으로 다양한 정보를 명시할 수 있다.
- 실시간 정보 제공 역할
  - 성공(결과 메세지) 성공 또는 결과에 대한 메시지로 사용자의 작업을 방해하지 않고(초점을 옮기지 않고) 조언할만한 메시지를 전달하는 것을 목적으로한다. 웹툰 한 회를 다 보고 다음 화로 넘어기기 위해 계속 스크롤 하라는 사용 팁도 **role='status**' 속성으로 전달하고 있다.
오류(제안) 메세지
시간에 민감하고 중요한(오류, 제안) 메시지를 사용자에게 전달하는 컨텐츠이다.
로딩 아이콘을 role='alert'으로 사용하고 있다는 것을 확인 했다.
사용자 인터렉션 window 역할
role="alertdialog ⇒ 사용자 동의 , 확인 등 인터랙션 요소를 포함한 상태로 다른 과업을 차단하는 경우
alert 대화상자는 다름 과업을 차단해야 하기 때문에 모달 윈도우 스타일로 처리하고 aria-modal=”true’속성을 추가한다.
`role="dialog" ⇒ 사용자가 입력하거나 응답하려는 내용
탐색
aria-current 속성은 현재 맥락과 일치하는 항목을 의미한다.
탭 목록에서 현재 페이지인 랭킹 항목을 aria-current="page" 속성으로 명시해주고 있다.

WAI-ARIA 실습

Nexflix Clone 팀프로젝트의 accordion코드에 WAI-ARIA를 적용한 모습

<a role=”button”>

a태그에 button의 역할을 주어 페이지 이동의 혼란을 막을 수 있다.
중요하다고 생각되는 부분에 role=”region”을 주어 문서 영역을 식별하게 한다.
aria-labelledby를 사용하여 위의 ID와 값을 매칭 시킨다.
aria-controls로 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다
aria-expanded는 확장 또는 축소되었는지 여부와 해당 자식 요소가 표시되거나 숨겨져 있는지 여부를 나타내기 위해 요소에 설정한다.

WAI-ARIA에 대해 조사하며, 우리는 접근성이 지켜지지 않은 사이트부터 접근성에 많은 노력을 기울인 사이트들까지 다양한 사례를 보았다.

접근성을 공부하기 전엔 보이지 않았던 것들이 보이기 시작했고, 우리가 개발자라는 직업을 바라보고 성장하면서 무엇을 지켜야 하는지에 대한 기준이 조금 더 명확해졌다. 과제에만 그치는 것이 아니라 계속해서 사용하는 연습을 하며 접근성을 높이기 위해 노력해야겠다는 생각이 우리 조원의 결론이다.

참고 자료 |

https://www.w3.org/TR/wai-aria-1.1/#usage_intro

https://ko.wikipedia.org/wiki/WAI-ARIA

https://story.pxd.co.kr/1588

https://tech.lezhin.com/2018/04/20/wai-aria

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Roles/dialog_role

https://github.com/lezhin/accessibility/blob/master/aria/README.md#html

https://developer.mozilla.org/enUS/docs/Web/Accessibility/ARIA/ARIA_Techniques#widget_roles