SlideShare a Scribd company logo
1 of 30
Download to read offline
WAI-ARIA in Real World
            (NCsoft)
        2010-07-17
KWAG                                            !




       http://www.clker.com/clipart-4108.html
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)
.


                    JAWS
             Window-Eyes
                   NVDA
                        ...
...................................................
.


                    JAWS
             Window-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)
!
! Step 1
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 2
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)




   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                       The Paciello Group Blog >> WAI-ARIA Implementation in JavaScript      UI
 * Slider                             Libraries - updated (http://www.paciellogroup.com/blog/?p=313)
 * Time Table
Dojo (Dijit)
 * Dojo (Dijit) Widget explorer
 * Dojo: an accessible JavaScript toolkit
 * Dijit Accessibility (a11y)
 * Dojo Toolkit Accessibility Final Report from the ATRC, University of Toronto
EXTJS
 * ARIA Enabled Tree
 * Ext GWT 2.0 Explorer
Fluid Infusion
 * Inline edit
 * Reorderer
 * Progress bar
 * Use interface options
 * File uploader
Google Web Toolkit
 * Custom Button
 * Date Picker
 * Suggest Box
 * Tree
 * Menu Bar
 * Rich text
 * Tab Panel
JQuery UI
 * accordion
 * dialog
 * progress bar
Yahoo! User Interface Library (YUI)
 * Button
HTML 5   “ARIA”   !
!   “ARIA”   !

More Related Content

Similar to Wai Aria In Real World

An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIAIWMW
 
Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo
 
Ferramentas de apoio ao desenvolvedor
Ferramentas de apoio ao desenvolvedorFerramentas de apoio ao desenvolvedor
Ferramentas de apoio ao desenvolvedorLuciano Filho
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010Patrick Lauke
 
Accessible Rich Internet Applications for the OU
Accessible Rich Internet Applications for the OUAccessible Rich Internet Applications for the OU
Accessible Rich Internet Applications for the OUNick Freear
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why howbrucelawson
 
Javascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsJavascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsNet7
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript AccessibleDennis Lembree
 
aria-live: the good, the bad and the ugly
aria-live: the good, the bad and the uglyaria-live: the good, the bad and the ugly
aria-live: the good, the bad and the uglyRuss Weakley
 
Rhodes And Phone Gap
Rhodes And Phone GapRhodes And Phone Gap
Rhodes And Phone GapMakoto Inoue
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introductionvrt-medialab
 
Beyond the Checklists - Demystifying Accessibility Testing and Implementation...
Beyond the Checklists - Demystifying Accessibility Testing and Implementation...Beyond the Checklists - Demystifying Accessibility Testing and Implementation...
Beyond the Checklists - Demystifying Accessibility Testing and Implementation...Radina Matic
 
Linux & Open Source - Alternative Software
Linux & Open Source - Alternative SoftwareLinux & Open Source - Alternative Software
Linux & Open Source - Alternative SoftwareSebastiano Merlino (eTr)
 
从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用Alipay
 
DevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdfDevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdfFelipeYanaga1
 
DevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdfDevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdfFelipe Yanaga
 

Similar to Wai Aria In Real World (20)

An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo Status ESUG 2014
Pharo Status ESUG 2014
 
儲かるドキュメント
儲かるドキュメント儲かるドキュメント
儲かるドキュメント
 
Ferramentas de apoio ao desenvolvedor
Ferramentas de apoio ao desenvolvedorFerramentas de apoio ao desenvolvedor
Ferramentas de apoio ao desenvolvedor
 
Cucaruba!
Cucaruba!Cucaruba!
Cucaruba!
 
Transforming WebSockets
Transforming WebSocketsTransforming WebSockets
Transforming WebSockets
 
Pharo Status
Pharo StatusPharo Status
Pharo Status
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
 
Accessible Rich Internet Applications for the OU
Accessible Rich Internet Applications for the OUAccessible Rich Internet Applications for the OU
Accessible Rich Internet Applications for the OU
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
Javascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsJavascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basics
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
aria-live: the good, the bad and the ugly
aria-live: the good, the bad and the uglyaria-live: the good, the bad and the ugly
aria-live: the good, the bad and the ugly
 
Rhodes And Phone Gap
Rhodes And Phone GapRhodes And Phone Gap
Rhodes And Phone Gap
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introduction
 
Beyond the Checklists - Demystifying Accessibility Testing and Implementation...
Beyond the Checklists - Demystifying Accessibility Testing and Implementation...Beyond the Checklists - Demystifying Accessibility Testing and Implementation...
Beyond the Checklists - Demystifying Accessibility Testing and Implementation...
 
Linux & Open Source - Alternative Software
Linux & Open Source - Alternative SoftwareLinux & Open Source - Alternative Software
Linux & Open Source - Alternative Software
 
从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用
 
DevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdfDevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdf
 
DevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdfDevoxxUK-2023 - Java Divergence.pdf
DevoxxUK-2023 - Java Divergence.pdf
 

Recently uploaded

Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 

Recently uploaded (20)

Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

Wai Aria In Real World

  • 1. WAI-ARIA in Real World (NCsoft) 2010-07-17
  • 2. KWAG ! http://www.clker.com/clipart-4108.html
  • 5. WAI-ARIA! Web Accessibility Initiative - Accessible Rich Internet Applications !
  • 10. . 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)
  • 11. . JAWS Window-Eyes NVDA ... ...................................................
  • 12. . JAWS Window-Eyes NVDA ... ...................................................
  • 13. 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)
  • 14. !
  • 15. ! Step 1 Landmark Role (http://www.w3.org/TR/wai-aria/#landmark_role)
  • 16. ! Step 1 Landmark Role (http://www.w3.org/TR/wai-aria/#landmark_role)
  • 17. ! Step 2 Widget Roles (http://www.w3.org/TR/wai-aria/roles#widget_roles)
  • 18. ! Step 2 Widget Roles (http://www.w3.org/TR/wai-aria/roles#widget_roles)
  • 19. ! Step 2 Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
  • 20. ! Step 2 Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
  • 21. ! Step 2 Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab) Widget role ARIA .
  • 22. ! ! 1. Widget Roles role ! (http://www.w3.org/TR/wai-aria/roles#widget_roles)
  • 23. ! ! 2. role ! : Tab Roles (http://www.w3.org/TR/wai-aria/roles#tab)
  • 24. ! !
  • 25. ! ! ! !
  • 26. ! ! ! !
  • 28. BBC Glow Widgets * Info Panel * Overlay The Paciello Group Blog >> WAI-ARIA Implementation in JavaScript UI * Slider Libraries - updated (http://www.paciellogroup.com/blog/?p=313) * Time Table Dojo (Dijit) * Dojo (Dijit) Widget explorer * Dojo: an accessible JavaScript toolkit * Dijit Accessibility (a11y) * Dojo Toolkit Accessibility Final Report from the ATRC, University of Toronto EXTJS * ARIA Enabled Tree * Ext GWT 2.0 Explorer Fluid Infusion * Inline edit * Reorderer * Progress bar * Use interface options * File uploader Google Web Toolkit * Custom Button * Date Picker * Suggest Box * Tree * Menu Bar * Rich text * Tab Panel JQuery UI * accordion * dialog * progress bar Yahoo! User Interface Library (YUI) * Button
  • 29. HTML 5 “ARIA” !
  • 30. ! “ARIA” !