Embed Size (px)
DESCRIPTION
2010년 7월 17일 KWAG 12번째 모임 발표자료입니다.
Citation preview
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” 하세요!
![[MS-WAI-ARIA-11]: Microsoft Edge Accessible Rich Internet ...… · 4 / 13 [MS-WAI-ARIA-11] - v20180828 Microsoft Edge Accessible Rich Internet Applications (WAI-ARIA) 1.1 Standards](https://img.pdfslide.us/doc/110x75/5f05bf6d7e708231d414814a/ms-wai-aria-11-microsoft-edge-accessible-rich-internet-4-13-ms-wai-aria-11.jpg)
![[MS-ARIA]: Internet Explorer Accessible Rich …...4 / 15 [MS-ARIA] - v20180828 Internet Explorer Accessible Rich Internet Applications (WAI-ARIA) 1.0 Standards Support Document Copyright](https://img.pdfslide.us/doc/110x75/5f11e609dabfa333981c3af0/ms-aria-internet-explorer-accessible-rich-4-15-ms-aria-v20180828-internet.jpg)
