WAI-ARIA 규격을 전반적으로 설명합니다.

1. 김군우 - from SK planet

2. 목차
• WAI-ARIA란?
• Screen Reader 동작 원리, 접근성
API
• WAI-ARIA의 3대 요소: 역할(role),
상태(state), 속성(property)
• 각 요소의 설명/예제

3. WAI-ARIA란?
• Accessible Rich Internet Applications
• 장애를 가진 사람에게 웹 콘텐츠, 웹
어플리케이션이 조금 더 접근성을
갖도록 하는 방법들을 정의
• 특히 Ajax/HTML/JavaScript 등의 기술로
개발된 동적인 콘텐츠, UI 콘트롤 개발을
도움

4. Screen Reader의 동작 원리
1
스크린 리더접근성 API컴퓨터
시각장애
사용자

5. 접근성 API
1
Active Accessibility 역할 UI Automation 컨트롤 형식
ROLE_SYSTEM_PUSHBUTTON Button
ROLE_SYSTEM_CLIENT Calendar
ROLE_SYSTEM_CHECKBUTTON Check box
ROLE_SYSTEM_COMBOBOX Combo box
ROLE_SYSTEM_LIST Data grid
ROLE_SYSTEM_LISTITEM Data item
ROLE_SYSTEM_LINK Hyperlink
… …
예: UI Automation

6. Screen Reader가 되어봅시다.
<a href="http://recopick.com">레코픽</a>
<button>레코픽</button> <- ROLE_SYSTEM_PUSHBUTTON
<- ROLE_SYSTEM_LINK
<span onclick="location.href='http://recopick.com'">레코픽</span>
<span onclick="location.href='http://recopick.com'">
레코픽 링크</span>
<span onclick="location.href='http://recopick.com'" tabindex="0">
레코픽 링크</span>

7. 접근성 있다? 없다?
<span onclick="location.href='http://recopick.com'" tabindex="0">
레코픽 링크</span>
• 디자인을 수정한 라디오버튼, 체크박스, 콤보박스, …
• 오래된(Legacy) 잘못된 코드들
• 웹 앱이나 위젯 등의 RIA(Rich Internet Application) 제작 시
답 = 없다…
하지만 어쩔 수 없이 쓰게 되는 코드…

9. <span onclick="location.href='http://recopick.com'"
role="link">레코픽</span>
WAI-ARIA는 특정 요소에 특정 역할(role)을 부여할 수 있는
규격입니다.
<span role="checkbox" aria-checked="aria-checked">
아리따운 체크박스</span>
역할(Role) 외에 상태(State)나 속성(Property)을 부여할 수도
있습니다.

10. WAI-ARIA를 지원하지 않는 유저 에이전트는 해당 속성을
무시합니다.
<span role="checkbox" aria-checked="aria-checked">
아리따운 체크박스</span>
<span role="checkbox" aria-checked="aria-checked"
tabindex="0" onclick="toggle()">아리따운 체크박스</span>
동작 자바스크립트, 키보드 조작은 직접 구현해야 합니다…

11. 역할(role)
• 체크박스(checkbox), 버튼(button),
상태바(progress) 등을 포함하는 위젯 역할
• 아티클(article), 이미지(img),
장식요소(presentation) 등 문서 구조 역할
• 메인 영역(main), 검색 영역(search),
내비게이션 영역(navigation) 등
랜드마크(이정표) 역할

12. 역할(role) – 랜드마크(이정표) 역할
• 어떤 요소가 메뉴 영역인지 콘텐츠 영역인지
푸터 영역인지 등을 선언할 수 있습니다.
• 랜드마크 역할(Role)을 지원하는 스크린리더는
시각장애인이 랜드마크로 지정한 주요 영역을
단축키 혹은 간단한 제스쳐로 왔다갔다 할 수
있게 해줍니다. 이는 스킵 네비게이션이
발전한 형태입니다.

15. 역할(role) – 문서 구조 역할
• 아티클(article), 표 제목(columnheader), 헤딩(heading),
이미지(img), 장식용(presentation), 툴바(toolbar) 등
<figure role="img" aria-labelledby="fish-caption">
<a href="#fish-caption">아스키 아트 건너뛰기</a>
<pre>
o .'`/
' / (
O .-'` ` `'-._ .')
_/ (o) '. .' /
) ))) >< <
` |_ _.' '.
'-._ _ .-' '.)
jgs `__
</pre>
<figcaption id="fish-caption">
Joan G. Stark, "<cite>fish</cite>".
October 1997. ASCII on electrons. 28×8.
</figcaption>
</figure>>

16. 역할(role) – 위젯 역할
• 대부분의 위젯 역할(Role)이 하위호환성을 갖게
만들기 어렵다.
• 선언하면 작동되는 것이 아니고 자바스크립트로 모든
동작을 구현해야 한다.
• 대체로 상호작용이 필요한 역할들로서 단축키 할당,
키보드 접근성 등의 이슈를 고려해야 한다.

17. 역할(role) – 위젯 역할
<span role="checkbox" aria-checked="aria-checked">
아리따운 체크박스</span>

18. 역할(role) – 위젯 역할
<span role="slider" aria-valuenow="8" aria-valuemin="0"
aria-valuemax="13"></span>

19. 상태(State)와 속성( Property)
• 자동완성(aria-autocomplete), 체크 여부(aria-
checked) 등을 포함하는 위젯 속성
• 실시간 업데이트(aria-live) 등을 포함하는
라이브 영역 속성
• 드래그 앤 드롭 기능을 포함하는 드래그앤드롭
속성
• DOM 요소들간의 관계를 정의하는 관계 속성

20. 예: 라이브 영역 속성
<div aria-live="polite"></div>
...
<div aria-live="polite">새로 올라온 얘기가 1개 더 있어요.</div>

21. 예: 라이브 영역 속성

22. 유용한 링크
• jQuery UI:
• dialog: http://goo.gl/nO07kM
• menu: http://goo.gl/eRsOq2
• 실전 WAI-ARIA 예제(?)
• http://heydonworks.com/practical
_aria_examples/

23. 감사합니다. 