Post on 08-May-2015
description
WAI-ARIA in Real World김군우 (NCsoft)
2010-07-17
http://www.clker.com/clipart-4108.html
KWAG의 부활을 축하드립니다!
WAI-ARIA???
WAI-ARIA???
WAI-ARIA!Web Accessibility Initiative - Accessible Rich Internet Applications
접근성 있는 리치 인터넷 어플리케이션!
Why ARIA?
Why ARIA?
Why ARIA?
Why ARIA?
지금 당장 사용할 수 있습니다.
IE 8 RC1 91%
Firefox 3.6 100%
Opera 10.10 45%
Safari 4 Beta 17%
Chrome 3 38%
The Paciello Group Blog - ARIA role support: how the Windows browsers stack up (http://www.paciellogroup.com/blog/?p=474)
스크린리더들도 지원합니다.
JAWSWindow-Eyes
NVDA......................................................
스크린리더들도 지원합니다.
JAWSWindow-Eyes
NVDA......................................................
Official Google Reader Blog: Reader and ARIA: A new way to read (http://googlereader.blogspot.com/2008/03/reader-and-aria-new-way-to-read.html)
구현해보자!
Landmark Role (http://www.w3.org/TR/wai-aria/#landmark_role)
구현해보자! Step 1
Landmark Role (http://www.w3.org/TR/wai-aria/#landmark_role)
구현해보자! Step 1
Widget Roles (http://www.w3.org/TR/wai-aria/roles#widget_roles)
구현해보자! Step 2
Widget Roles (http://www.w3.org/TR/wai-aria/roles#widget_roles)
구현해보자! Step 2
Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
구현해보자! Step 2
Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
구현해보자! Step 2
Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
구현해보자! Step 2
Widget role의 모든 ARIA 속성은자바스크립트가 없으면 필요하지 않습니다.
구현해보자! 정리!
1. Widget Roles 문서에서 적절한 role을 찾는다!(http://www.w3.org/TR/wai-aria/roles#widget_roles)
구현해보자! 정리!
2. 찾은 role의 문서를 참고해 구현한다!예: Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
구현해보자! 정리!
구현해보자! 정리!
하지만! 더 쉬운 방법이 있습니다!
구현해보자! 정리!
하지만! 더 쉬운 방법이 있습니다!
잘 만들어놓은 자바스크립트 라이브러리들이 이미 많타고??????
BBC Glow Widgets * Info Panel * Overlay * Slider * Time TableDojo (Dijit) * Dojo (Dijit) Widget explorer * Dojo: an accessible JavaScript toolkit * Dijit Accessibility (a11y) * Dojo Toolkit Accessibility Final Report from the ATRC, University of TorontoEXTJS * ARIA Enabled Tree * Ext GWT 2.0 ExplorerFluid Infusion * Inline edit * Reorderer * Progress bar * Use interface options * File uploaderGoogle Web Toolkit * Custom Button * Date Picker * Suggest Box * Tree * Menu Bar * Rich text * Tab PanelJQuery UI * accordion * dialog * progress barYahoo! User Interface Library (YUI) * Button * Carousel
The Paciello Group Blog >> WAI-ARIA Implementation in JavaScript UI Libraries - updated (http://www.paciellogroup.com/blog/?p=313)
HTML 5에서도 “ARIA”하세요!
감사합니다! 즐 “ARIA” 하세요!