SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
Accessible JavaScript
Example: Accordion



Cologne, 09.10.2012
1   Accessible JavaScript: Accordion

2   Inaccessible examples

3   Keyboard

4   User defined colours

5   Screenreader

6   Enhancements

7   Accordion: The future
Accessible JavaScript

1. Accessible JavaScript?

                         





                             © pixelpark   |   3
Accessible JavaScript

1.  Can you use it fully with keyboard and keys?

2.  Can you use it with user defined colours?

3.  Can you use it with Screenreader?




                                                   © pixelpark   |   4
Accessible JavaScript

1. Inaccessible examples 





                             © pixelpark   |   5
Accessible JavaScript – Inaccessible examples 

1.  Only with mouse over (Example: Elegant Accordion)

2.  You can only click on it (Example: Easy Accordion)




                                                         © pixelpark   |   6
Elegant Accordion

                 





                     © pixelpark   |   7
Easy Accordion

              





                  © pixelpark   |   8
Accessible JavaScript

2. Keyboard and keys 





                         © pixelpark   |   9
Accessible JavaScript
Keyboard
JavaScript must be fully accessible with keyboard.

You mostly use with keyboard:
•  Tab
•  Arrow keys




                                                     © pixelpark   |   10
WAI-ARIA Best Practice:
Accordion
“An accordion component is a collection of expandable panels associated with a common outer
container. Panels consist of a header and an associated content region or panel. The primary
use of an Accordion is to present multiple sections of content on a single page without
scrolling, where all of the sections are peers in the application or object hierarchy. The general
look is similar to a tree where each root tree node is an expandable accordion header. The
user navigates and makes the contents of each panel visible (or not) by interacting with the
Accordion Header.”

http://www.w3.org/TR/wai-aria-practices/#accordion




                                                                                       © pixelpark   |   11
WAI-ARIA Best Practice:
Accordion
•  First you use tab to get on the first header of the accordion
•  Within the accordion:
     -  enter- / space key: open and close
     -  Arrow key right / down: next header
     -  Arrow key left / up: previous header
     -  end- / home key: first / last header
     -  CTRL + arrow key up: if you are in accordion content you get to header above




                                                                                       © pixelpark   |   12
Accessible JavaScript

2.1 Accessible Mootools Accordion

                                 





                                     © pixelpark   |   13
Accessible Mootools Accordion

                             





                                 © pixelpark   |   14
Accessible JavaScript

2.2 jQuery UI Accordion

                       





                           © pixelpark   |   15
jQuery UI Accordion

                   





                       © pixelpark   |   16
Accessible JavaScript

3. User defined colours 





                            © pixelpark   |   17
Accessible JavaScript
 

User defined colours 

If you are using your own colours, background images are not shown anymore.

                                                                           


In this case in most accordions you can not get the actual state of it – if it is open or closed.

                                                                                                 





                                                                                          © pixelpark   |   18
Accessible JavaScript

3.1 Accessible Mootools Accordion

                                 





                                     © pixelpark   |   19
Accessible Mootools Accordion

                             





                                 © pixelpark   |   20
Accessible JavaScript

3.2 jQuery UI Accordion

                       





                           © pixelpark   |   21
jQuery UI Accordion

                   





                       © pixelpark   |   22
Accessible JavaScript

4. Screenreader 





                        © pixelpark   |   23
Accessible JavaScript
Screenreader
JavaScript must be fully accessible with a Screenreader.

Using WAI-ARIA accordions could be optimized for a Screenreader:
•  You can use it the same way as without a Screenreader
•  A Screenreader gets additional information about actual state of the accordion and how it
  works.




                                                                                     © pixelpark   |   24
Accessible JavaScript
WAI-ARIA – Accordion Widget
WAI shows in detail how WAI-ARIA can improve widgets.

Accordion widget needs following attributes:
•  Accordion itself: role=tablist
•  Accordion header:
    -  role=tab
    -  aria-selected (is header is selected or not)
    -  aria-expanded (is selected header open or not)
    -  optional: aria-controls
•  Accordion – content open:
    -  role=tabpanel
    -  aria-labelledby (with header)
    -  aria-hidden (is content visible / open or not)



                                                        © pixelpark   |   25
WAI-ARIA – Accordion Widget

                           





                               © pixelpark   |   26
WAI-ARIA – Accordion Widget (ChromeVox) 





                                            © pixelpark   |   27
WAI-ARIA Example & Screenreader 

Screenreader        Header information                       Open content: information
NVDA (Firefox)      „Tab ausgewählt, erweitert /             1 x read
                    reduziert“ (translated: Tab selected
                    extended / reduced)
JAWS (IE)           „Registerkarte offen /                   Not read
                    geschlossen“ (translated: Tab open /
                    closed)
ChromeVox           „Tab ausgewählt, minimiert /             Not read
                    maximiert“ (translated: Tab selected
                    minimized / maximized)
VoiceOver           „Titel ausgewählt“ (translated: Titel    Not read
                    selected)
VoiceOver (iOS 6)   „Tabulator Auswahl 3 von 6“ (translated: Not read
                    Tab selected 3 of 6)




                                                                                  © pixelpark   |   28
WAI-ARIA – Accordion header

                           

Accordion         tab   aria-controls   aria-expanded   aria-selected

WAI example       X          X               X               X


Accessible        X                          X               X
Mootools Widget


jQuery UI         X          X                               X
Accordion


jQuery Mobile




                                                            © pixelpark   |   29
WAI-ARIA – Accordion content

Accordion           tabpanel   aria-labelledby   aria-hidden

WAI example            X             X               X


Accessible             X             X               X

Mootools Widget 



jQuery UI              X             X               X

Accordion 



jQuery Mobile                                        X




                                                               © pixelpark   |   30
Accessible JavaScript

4. Enhancements 





                        © pixelpark   |   31
Accessible JavaScript

                     

Accordion enhanced


What can be still enhanced?
•  Better contrast for keyboard users
•  For status icons on header use CSS content
•  A small description how accordion works (visible or only for Screenreader)




                                                                                © pixelpark   |   32
jQuery UI Accordion enhanced

                            





                                © pixelpark   |   33
Accessible JavaScript

4. Accordion: The future

                        





                            © pixelpark   |   34
Future: HTML 5 details/summary element

                                      





                                          © pixelpark   |   35
HTML 5 details/summary element (ChromeVox) 

Problem until now: details – content is not yet accessible.





                                                               © pixelpark   |   36
Imprint
Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum der
Pixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweise
Vervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung der
Pixelpark AG nicht gestattet. (All rights reserved to Pixelpark AG)

Sylvia Egger
Senior Online Developer
Pixelpark AG
Cäcilienkloster 2
D-50676 Köln

sylvia.egger@pixelpark.com

www.pixelpark.com



                                                                                   © pixelpark   |   37

Weitere ähnliche Inhalte

Ähnlich wie Accessible Javascript - Example Accordion

Cairo Graphics Kit
Cairo Graphics KitCairo Graphics Kit
Cairo Graphics KitESUG
 
OpenAjax Alliance And Widgets
OpenAjax Alliance And WidgetsOpenAjax Alliance And Widgets
OpenAjax Alliance And Widgetsguest42a607
 
Symfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating productsSymfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating productsXavier Lacot
 
Mozilla in Vietnam 2009
Mozilla in Vietnam 2009Mozilla in Vietnam 2009
Mozilla in Vietnam 2009Gen Kanai
 
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"Frank Wienberg
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In MalaysiaGen Kanai
 
Java and Serverless - A Match Made In Heaven, Part 1
Java and Serverless - A Match Made In Heaven, Part 1Java and Serverless - A Match Made In Heaven, Part 1
Java and Serverless - A Match Made In Heaven, Part 1Curity
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Eclipse Con 2009 Sca Tools Short Talk
Eclipse Con 2009   Sca Tools Short TalkEclipse Con 2009   Sca Tools Short Talk
Eclipse Con 2009 Sca Tools Short TalkVincent Zurczak
 
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARNHadoop {Submarine} Project: Running Deep Learning Workloads on YARN
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARNDataWorks Summit
 
Rich Ajax Platform - theEdge 2012 conference presentation
Rich Ajax Platform - theEdge 2012 conference presentationRich Ajax Platform - theEdge 2012 conference presentation
Rich Ajax Platform - theEdge 2012 conference presentationNicko Borodachuk
 
Felipe Erias: Wolvic: Web Browsing on Extended Reality
Felipe Erias: Wolvic: Web Browsing on Extended RealityFelipe Erias: Wolvic: Web Browsing on Extended Reality
Felipe Erias: Wolvic: Web Browsing on Extended RealityIgalia
 
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Peter Procházka
 
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Peter Procházka
 
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
stackconf 2022: It’s Time to Debloat the Cloud with Unikraftstackconf 2022: It’s Time to Debloat the Cloud with Unikraft
stackconf 2022: It’s Time to Debloat the Cloud with UnikraftNETWAYS
 
Shrinking the container_zurich_july_2018
Shrinking the container_zurich_july_2018Shrinking the container_zurich_july_2018
Shrinking the container_zurich_july_2018Ewan Slater
 
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Peter Procházka
 
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...Förderverein Technische Fakultät
 

Ähnlich wie Accessible Javascript - Example Accordion (20)

Cairo Graphics Kit
Cairo Graphics KitCairo Graphics Kit
Cairo Graphics Kit
 
OpenAjax Alliance And Widgets
OpenAjax Alliance And WidgetsOpenAjax Alliance And Widgets
OpenAjax Alliance And Widgets
 
Symfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating productsSymfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating products
 
Mozilla in Vietnam 2009
Mozilla in Vietnam 2009Mozilla in Vietnam 2009
Mozilla in Vietnam 2009
 
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
 
Duel of Two Libraries: Cairo & Skia
Duel of Two Libraries: Cairo & SkiaDuel of Two Libraries: Cairo & Skia
Duel of Two Libraries: Cairo & Skia
 
Java and Serverless - A Match Made In Heaven, Part 1
Java and Serverless - A Match Made In Heaven, Part 1Java and Serverless - A Match Made In Heaven, Part 1
Java and Serverless - A Match Made In Heaven, Part 1
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Eclipse Con 2009 Sca Tools Short Talk
Eclipse Con 2009   Sca Tools Short TalkEclipse Con 2009   Sca Tools Short Talk
Eclipse Con 2009 Sca Tools Short Talk
 
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARNHadoop {Submarine} Project: Running Deep Learning Workloads on YARN
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
 
Rich Ajax Platform - theEdge 2012 conference presentation
Rich Ajax Platform - theEdge 2012 conference presentationRich Ajax Platform - theEdge 2012 conference presentation
Rich Ajax Platform - theEdge 2012 conference presentation
 
Felipe Erias: Wolvic: Web Browsing on Extended Reality
Felipe Erias: Wolvic: Web Browsing on Extended RealityFelipe Erias: Wolvic: Web Browsing on Extended Reality
Felipe Erias: Wolvic: Web Browsing on Extended Reality
 
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
 
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
 
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
stackconf 2022: It’s Time to Debloat the Cloud with Unikraftstackconf 2022: It’s Time to Debloat the Cloud with Unikraft
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
 
Csa container-security-in-aws-dw
Csa container-security-in-aws-dwCsa container-security-in-aws-dw
Csa container-security-in-aws-dw
 
Shrinking the container_zurich_july_2018
Shrinking the container_zurich_july_2018Shrinking the container_zurich_july_2018
Shrinking the container_zurich_july_2018
 
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
Are Frameworks Evil? Should you care about Sitecore SXA and JSS?
 
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
 

Kürzlich hochgeladen

Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 

Kürzlich hochgeladen (20)

Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.
 

Accessible Javascript - Example Accordion

  • 2. 1 Accessible JavaScript: Accordion 2 Inaccessible examples 3 Keyboard 4 User defined colours 5 Screenreader 6 Enhancements 7 Accordion: The future
  • 3. Accessible JavaScript 1. Accessible JavaScript? © pixelpark | 3
  • 4. Accessible JavaScript 1.  Can you use it fully with keyboard and keys? 2.  Can you use it with user defined colours? 3.  Can you use it with Screenreader? © pixelpark | 4
  • 5. Accessible JavaScript 1. Inaccessible examples © pixelpark | 5
  • 6. Accessible JavaScript – Inaccessible examples 1.  Only with mouse over (Example: Elegant Accordion) 2.  You can only click on it (Example: Easy Accordion) © pixelpark | 6
  • 7. Elegant Accordion © pixelpark | 7
  • 8. Easy Accordion © pixelpark | 8
  • 9. Accessible JavaScript 2. Keyboard and keys © pixelpark | 9
  • 10. Accessible JavaScript Keyboard JavaScript must be fully accessible with keyboard. You mostly use with keyboard: •  Tab •  Arrow keys © pixelpark | 10
  • 11. WAI-ARIA Best Practice: Accordion “An accordion component is a collection of expandable panels associated with a common outer container. Panels consist of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates and makes the contents of each panel visible (or not) by interacting with the Accordion Header.” http://www.w3.org/TR/wai-aria-practices/#accordion © pixelpark | 11
  • 12. WAI-ARIA Best Practice: Accordion •  First you use tab to get on the first header of the accordion •  Within the accordion: -  enter- / space key: open and close -  Arrow key right / down: next header -  Arrow key left / up: previous header -  end- / home key: first / last header -  CTRL + arrow key up: if you are in accordion content you get to header above © pixelpark | 12
  • 13. Accessible JavaScript 2.1 Accessible Mootools Accordion © pixelpark | 13
  • 14. Accessible Mootools Accordion © pixelpark | 14
  • 15. Accessible JavaScript 2.2 jQuery UI Accordion © pixelpark | 15
  • 16. jQuery UI Accordion © pixelpark | 16
  • 17. Accessible JavaScript 3. User defined colours © pixelpark | 17
  • 18. Accessible JavaScript User defined colours If you are using your own colours, background images are not shown anymore. In this case in most accordions you can not get the actual state of it – if it is open or closed. © pixelpark | 18
  • 19. Accessible JavaScript 3.1 Accessible Mootools Accordion © pixelpark | 19
  • 20. Accessible Mootools Accordion © pixelpark | 20
  • 21. Accessible JavaScript 3.2 jQuery UI Accordion © pixelpark | 21
  • 22. jQuery UI Accordion © pixelpark | 22
  • 24. Accessible JavaScript Screenreader JavaScript must be fully accessible with a Screenreader. Using WAI-ARIA accordions could be optimized for a Screenreader: •  You can use it the same way as without a Screenreader •  A Screenreader gets additional information about actual state of the accordion and how it works. © pixelpark | 24
  • 25. Accessible JavaScript WAI-ARIA – Accordion Widget WAI shows in detail how WAI-ARIA can improve widgets. Accordion widget needs following attributes: •  Accordion itself: role=tablist •  Accordion header: -  role=tab -  aria-selected (is header is selected or not) -  aria-expanded (is selected header open or not) -  optional: aria-controls •  Accordion – content open: -  role=tabpanel -  aria-labelledby (with header) -  aria-hidden (is content visible / open or not) © pixelpark | 25
  • 26. WAI-ARIA – Accordion Widget © pixelpark | 26
  • 27. WAI-ARIA – Accordion Widget (ChromeVox) © pixelpark | 27
  • 28. WAI-ARIA Example & Screenreader Screenreader Header information Open content: information NVDA (Firefox) „Tab ausgewählt, erweitert / 1 x read reduziert“ (translated: Tab selected extended / reduced) JAWS (IE) „Registerkarte offen / Not read geschlossen“ (translated: Tab open / closed) ChromeVox „Tab ausgewählt, minimiert / Not read maximiert“ (translated: Tab selected minimized / maximized) VoiceOver „Titel ausgewählt“ (translated: Titel Not read selected) VoiceOver (iOS 6) „Tabulator Auswahl 3 von 6“ (translated: Not read Tab selected 3 of 6) © pixelpark | 28
  • 29. WAI-ARIA – Accordion header Accordion tab aria-controls aria-expanded aria-selected WAI example X X X X Accessible X X X Mootools Widget jQuery UI X X X Accordion jQuery Mobile © pixelpark | 29
  • 30. WAI-ARIA – Accordion content Accordion tabpanel aria-labelledby aria-hidden WAI example X X X Accessible X X X Mootools Widget jQuery UI X X X Accordion jQuery Mobile X © pixelpark | 30
  • 32. Accessible JavaScript Accordion enhanced What can be still enhanced? •  Better contrast for keyboard users •  For status icons on header use CSS content •  A small description how accordion works (visible or only for Screenreader) © pixelpark | 32
  • 33. jQuery UI Accordion enhanced © pixelpark | 33
  • 34. Accessible JavaScript 4. Accordion: The future © pixelpark | 34
  • 35. Future: HTML 5 details/summary element © pixelpark | 35
  • 36. HTML 5 details/summary element (ChromeVox) Problem until now: details – content is not yet accessible. © pixelpark | 36
  • 37. Imprint Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum der Pixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweise Vervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung der Pixelpark AG nicht gestattet. (All rights reserved to Pixelpark AG) Sylvia Egger Senior Online Developer Pixelpark AG Cäcilienkloster 2 D-50676 Köln sylvia.egger@pixelpark.com www.pixelpark.com © pixelpark | 37