Enviar pesquisa
Carregar
Accessible Javascript - Example Accordion
•
7 gostaram
•
3,974 visualizações
Sylvia Egger
Seguir
Talk at cologne.js October 2012
Leia menos
Leia mais
Tecnologia
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 37
Baixar agora
Baixar para ler offline
Recomendados
Was ist Barrierefreiheit? (18.05. 2010)
Was ist Barrierefreiheit? (18.05. 2010)
Sylvia Egger
Responsive Accessibility in der Praxis
Responsive Accessibility in der Praxis
Sylvia Egger
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Sylvia Egger
WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten barrierefrei?
Sylvia Egger
Wie? Mein WordPress-Theme geht auch barrierefrei!
Wie? Mein WordPress-Theme geht auch barrierefrei!
Sylvia Egger
2009: eine Tastatur-Odyssee
2009: eine Tastatur-Odyssee
Sylvia Egger
Was ist Barrierefreiheit? Ein Kurztest
Was ist Barrierefreiheit? Ein Kurztest
Sylvia Egger
Was ist Barrierefreiheit (12.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)
Sylvia Egger
Recomendados
Was ist Barrierefreiheit? (18.05. 2010)
Was ist Barrierefreiheit? (18.05. 2010)
Sylvia Egger
Responsive Accessibility in der Praxis
Responsive Accessibility in der Praxis
Sylvia Egger
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Sylvia Egger
WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten barrierefrei?
Sylvia Egger
Wie? Mein WordPress-Theme geht auch barrierefrei!
Wie? Mein WordPress-Theme geht auch barrierefrei!
Sylvia Egger
2009: eine Tastatur-Odyssee
2009: eine Tastatur-Odyssee
Sylvia Egger
Was ist Barrierefreiheit? Ein Kurztest
Was ist Barrierefreiheit? Ein Kurztest
Sylvia Egger
Was ist Barrierefreiheit (12.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)
Sylvia Egger
Cairo Graphics Kit
Cairo Graphics Kit
ESUG
OpenAjax Alliance And Widgets
OpenAjax Alliance And Widgets
guest42a607
Symfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating products
Xavier Lacot
Mozilla in Vietnam 2009
Mozilla in Vietnam 2009
Gen Kanai
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
Frank Wienberg
Mozilla In Malaysia
Mozilla In Malaysia
Gen Kanai
Duel of Two Libraries: Cairo & Skia
Duel of Two Libraries: Cairo & Skia
Samsung Open Source Group
Java and Serverless - A Match Made In Heaven, Part 1
Java and Serverless - A Match Made In Heaven, Part 1
Curity
Html5 Whats around the bend
Html5 Whats around the bend
Raj Lal
Eclipse Con 2009 Sca Tools Short Talk
Eclipse Con 2009 Sca Tools Short Talk
Vincent Zurczak
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
DataWorks Summit
Rich Ajax Platform - theEdge 2012 conference presentation
Rich Ajax Platform - theEdge 2012 conference presentation
Nicko Borodachuk
Felipe Erias: Wolvic: Web Browsing on Extended Reality
Felipe Erias: Wolvic: Web Browsing on Extended Reality
Igalia
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?
Peter Procházka
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
NETWAYS
Csa container-security-in-aws-dw
Csa container-security-in-aws-dw
Cloud Security Alliance, UK chapter
Shrinking the container_zurich_july_2018
Shrinking the container_zurich_july_2018
Ewan Slater
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...
Förderverein Technische Fakultät
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Mais conteúdo relacionado
Semelhante a Accessible Javascript - Example Accordion
Cairo Graphics Kit
Cairo Graphics Kit
ESUG
OpenAjax Alliance And Widgets
OpenAjax Alliance And Widgets
guest42a607
Symfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating products
Xavier Lacot
Mozilla in Vietnam 2009
Mozilla in Vietnam 2009
Gen Kanai
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
Frank Wienberg
Mozilla In Malaysia
Mozilla In Malaysia
Gen Kanai
Duel of Two Libraries: Cairo & Skia
Duel of Two Libraries: Cairo & Skia
Samsung Open Source Group
Java and Serverless - A Match Made In Heaven, Part 1
Java and Serverless - A Match Made In Heaven, Part 1
Curity
Html5 Whats around the bend
Html5 Whats around the bend
Raj Lal
Eclipse Con 2009 Sca Tools Short Talk
Eclipse Con 2009 Sca Tools Short Talk
Vincent Zurczak
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
Hadoop {Submarine} Project: Running Deep Learning Workloads on YARN
DataWorks Summit
Rich Ajax Platform - theEdge 2012 conference presentation
Rich Ajax Platform - theEdge 2012 conference presentation
Nicko Borodachuk
Felipe Erias: Wolvic: Web Browsing on Extended Reality
Felipe Erias: Wolvic: Web Browsing on Extended Reality
Igalia
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?
Peter Procházka
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
stackconf 2022: It’s Time to Debloat the Cloud with Unikraft
NETWAYS
Csa container-security-in-aws-dw
Csa container-security-in-aws-dw
Cloud Security Alliance, UK chapter
Shrinking the container_zurich_july_2018
Shrinking the container_zurich_july_2018
Ewan Slater
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...
Förderverein Technische Fakultät
Semelhante a Accessible Javascript - Example Accordion
(20)
Cairo Graphics Kit
Cairo Graphics Kit
OpenAjax Alliance And Widgets
OpenAjax Alliance And Widgets
Symfony Day 2009 - Symfony vs Integrating products
Symfony Day 2009 - Symfony vs Integrating products
Mozilla in Vietnam 2009
Mozilla in Vietnam 2009
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
Mozilla In Malaysia
Mozilla In Malaysia
Duel 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 1
Html5 Whats around the bend
Html5 Whats around the bend
Eclipse 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 YARN
Rich 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 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?
stackconf 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-dw
Shrinking 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?
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...
Último
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
BkGupta21
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Dilum Bandara
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
LoriGlavin3
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
Último
(20)
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Accessible Javascript - Example Accordion
1.
Accessible JavaScript Example: Accordion Cologne,
09.10.2012
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
23.
Accessible JavaScript 4. Screenreader
© pixelpark | 23
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
31.
Accessible JavaScript 4. Enhancements
© pixelpark | 31
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
Baixar agora