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

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
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
 
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
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
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
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
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
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
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
 

Recently uploaded (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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...
 
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
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
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
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
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
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
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...
 

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” !