1. Accessible JavaScriptExample: AccordionCologne, 09.10.2012

2. 1 Accessible JavaScript: Accordion2 Inaccessible examples3 Keyboard4 User defined colours5 Screenreader6 Enhancements7 Accordion: The future 3. Accessible JavaScript1. Accessible JavaScript? pixelpark | 3 4. Accessible JavaScript1. 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 JavaScript1. 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 JavaScript2. Keyboard and keys pixelpark | 9 10. Accessible JavaScriptKeyboardJavaScript must be fully accessible with keyboard.You mostly use with keyboard: Tab Arrow keys pixelpark | 10 11. WAI-ARIA Best Practice:AccordionAn accordion component is a collection of expandable panels associated with a common outercontainer. Panels consist of a header and an associated content region or panel. The primaryuse of an Accordion is to present multiple sections of content on a single page withoutscrolling, where all of the sections are peers in the application or object hierarchy. The generallook is similar to a tree where each root tree node is an expandable accordion header. Theuser navigates and makes the contents of each panel visible (or not) by interacting with theAccordion 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 JavaScript2.1 Accessible Mootools Accordion pixelpark | 13 14. Accessible Mootools Accordion pixelpark | 14 15. Accessible JavaScript2.2 jQuery UI Accordion pixelpark | 15 16. jQuery UI Accordion pixelpark | 16 17. Accessible JavaScript3. 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 JavaScript3.1 Accessible Mootools Accordion pixelpark | 19 20. Accessible Mootools Accordion pixelpark | 20 21. Accessible JavaScript3.2 jQuery UI Accordion pixelpark | 21 22. jQuery UI Accordion pixelpark | 22 23. Accessible JavaScript4. Screenreader pixelpark | 23 24. Accessible JavaScriptScreenreaderJavaScript 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 itworks. pixelpark | 24 25. Accessible JavaScriptWAI-ARIA Accordion WidgetWAI 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 ScreenreaderHeader information Open content: informationNVDA (Firefox)Tab ausgewhlt, erweitert / 1 x readreduziert (translated: Tab selectedextended / reduced)JAWS (IE) Registerkarte offen / Not readgeschlossen (translated: Tab open /closed)ChromeVox Tab ausgewhlt, minimiert / Not readmaximiert (translated: Tab selectedminimized / maximized)VoiceOver Titel ausgewhlt (translated: TitelNot readselected)VoiceOver (iOS 6) Tabulator Auswahl 3 von 6 (translated: Not readTab selected 3 of 6) pixelpark | 28 29. WAI-ARIA Accordion header Accordion tab aria-controls aria-expanded aria-selectedWAI example XX X XAccessibleXX XMootools WidgetjQuery UI XX XAccordionjQuery Mobile pixelpark | 29 30. WAI-ARIA Accordion contentAccordion tabpanel aria-labelledby aria-hiddenWAI exampleX X XAccessible X X XMootools Widget jQuery UIX X XAccordion jQuery MobileX pixelpark | 30 31. Accessible JavaScript4. Enhancements pixelpark | 31 32. Accessible JavaScript Accordion enhancedWhat 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 JavaScript4. 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. ImprintDie in dieser Prsentation erarbeiteten Gedanken und Vorschlge sind geistiges Eigentum derPixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweiseVervielfltigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung derPixelpark AG nicht gestattet. (All rights reserved to Pixelpark AG)Sylvia EggerSenior Online DeveloperPixelpark AGCcilienkloster 2D-50676 Klnsylvia.egger@pixelpark.comwww.pixelpark.com pixelpark | 37