- WSConf. Seoul 2016 / 2017 - 2016.12.17(토) / 2017.03.11(토). 한국 Microsoft - 발표자 : 지성봉(㈜콘텐츠연합플랫폼)

1. WAI-ARIA
– 이제는 실전이다ஸ–

2. 지성봉 ஼멀더끙஽
콘텐츠연합플랫폼஼주஽ 퍼블리셔
‘예제로 살펴보는 WAIிARIAெ 집필진

3. 들어가기에 앞서...

4. HTML의 목적
semantically describing
scientific documentsீ
HTML was primarily designed as a language for

5. What is Semantic
certain meanings
Elementsா attributesா and attribute values in HTML are defined to
have ஼semantics஽ீ

6. Accessibillity - Semantic
integral to making contentஸon
the web accessible
Semantic information carried by HTML elements and attributes is

7. This is the base, starting here.

8. Why WAI-ARIA?

12. 이게 최선입니까 확실해요

13. Listen Carefully

14. WAI‐ARIA

15. Listen Carefully again

16. How to apply WAI-ARIA?

17. just Attributes
ARIA is a set of attributes that you can add to HTML elementsீ

18. add any role
<input type="text" role="combobox" >

19. add any property
<input type="text" role="conbobox" aria­haspopup="true" >

20. add any state
<input type="text"
role="conbobox" aria­haspopup="true" aria­expanded="false" >

21. 4 rules of ARIA use

22. 1. native HTML 요소/속성 사용
ARIA roleா stateா property를 추가하는 대신ா
native HTML elementுattribute
를 사용

23. <!­­ If not possible to use the correct element, use this ­­>
<span role="button">버튼</span>
<!­­ If possible to use the correct element, use this ­­>
<button type="button">버튼</button>
<!­­ If not possible to use the correct element/attribute, use this ­­>
<input type="text" name="usrId" id="usrId" aria­label="아이디">
<!­­ If possible to use the correct element/attribute, use this ­­>
<label for="usrId" class="hidden­accessible">아이디</label>
<input type="text" name="usrId" id="usrId">

24. 2. native semantic을 변경 금지
정말로 그래야 하는 것이 아닌 이상ா
native semantic을 변경하지 말아야 함ீ

25. <!­­ Do not do this ­­>
<h1 role=button>heading button</h1>

26. 3. 키보드 사용 가능
clickா tapா dragா dropா slideா scroll 등의 user interaction은
키보드로도 동등한 동작이 가능해야 함ீ

27. <span role="button" aria­pressed="false">좋아요</span>
/*
* required keyboard interaction
* ­ button must be focusable
* ­ when on focus the button, presssing Enter or Space key
* activates (or deactivates) the button
* ­ when the button activated, sets 'aria­pressed' to 'true',
* otherwise 'false'.
*/

28. 4. visible focusable 요소를
의미를 없애거나 숨겨진 요소로 인식하지 않도록
키보드 접근이 가능한 요소가 인식될 수 없다면 오류

29. <!­­ Do not do this ­­>
<button type="button" role="presentation">좋아요</button>
<button type="button" aira­hidden="true">좋아요</button>

30. appropriate
role / property / state

31. Role
use dialog role
use tablist / tab / tabpanel role
use alert role
 대화상자 UI를 만들고 있다면Ĭ
 탭 UI를 만들고 있다면Ĭ
 경고 알람 UI를 만들고 있다면Ĭ

32. property
use ariaிhaspopup=஺true஺
use ariaிlive=஺polite஺
use ariaிlabelledby=஺anyId஺
 컴포넌트가 하위 메뉴를 가진다면Ĭ
 실시간으로 변경되는 컴포넌트라면Ĭ
 개체에 label을 제공해야 한다면Ĭ

33. state
use ariaிhidden=஺true஺
use ariaிexpanded=஺true஺
use ariaிpressed=஺true஺
 컴포넌트가 숨김 상태라면Ĭ
 컴포넌트가 펼침 상태라면Ĭ
 컴포넌트가 눌림 상태라면Ĭ

34. keyboard interaction

35. checkbox
SPACE 키 : check 상태 변경

36. combobox
상ு하 방향키 : 목록 위ு아래 포커스 이동
ALT + 상ு하 방향키 : 목록 열기ு닫기
ESC 키 : 드롭다운 목록 닫기
ENTER 키 : 현재 항목 선택
PAGE UPுDOWN : 이전ு다음 페이지

38. ஼httpsĬுுwwwீw3ீorgுTRுwaiிariaிpracticesு#button஽
대다수 UI의 키보드 인터랙션 요구사항이 W3C 문서에 기술
WAIிARIA Authoring Practices 1.1

39. 실제 적용해 보자

41.
஼httpsĬுுgooீglுllRSXO஽
예제로 살펴보는 WAIிARIA 사례집

42.
஼httpsĬுுgithubீcomுmulder21cுariaிexamples஽
 WAIிARIA 사례집 수록 코드
஼httpsĬுுgithubீcomுniawaுARIA஽
 mulder21c஻s ARIAிEXAMPLES

43. 어디까지나 기본은
semantic markup
WAIிARIA는 기본으로 부족한 것을
보완하기 위한 수단

45. reference URL

46. ARIA 1.0 Rec ஼W3C஽
ARIA in HTML WD ஼W3C஽
Notes on Using ARIA in HTML WD ஼W3C஽
WAIிARIA Authoring Practices 1.1 WD ஼W3C஽
WAIிARIA
httpsĬுுwwwீw3ீorgுTRுwaiிariaு
஼httpsĬுுwwwீw3ீorgுTRுwaiிariaு஽
httpsĬுுwwwீw3ீorgுTRுhtmlிaria
஼httpsĬுுwwwீw3ீorgுTRுhtmlிaria஽
httpsĬுுwwwீw3ீorgுTRுariaிinிhtmlு
஼httpsĬுுwwwீw3ீorgுTRுariaிinிhtmlு஽
httpsĬுுwwwீw3ீorgுTRுwaiிariaிpracticesி1ீ1ு
஼httpsĬுுwwwீw3ீorgுTRுwaiிariaிpracticesி1ீ1ு஽
httpĬுுseminar1505ீpublisherீname
஼httpĬுுseminar1505ீpublisherீname஽

47. Contact


publisher@publisherீname
githubீcomுmulder21cுariaிexamples