Accessible JavaScriptExample: AccordionCologne, 09.10.2012
1   Accessible JavaScript: Accordion2   Inaccessible examples3   Keyboard4   User defined colours5   Screenreader6   Enhan...
Accessible JavaScript1. Accessible JavaScript?                                                      © pixelpark   |   3
Accessible JavaScript1.  Can you use it fully with keyboard and keys?2.  Can you use it with user defined colours?3.  Can ...
Accessible JavaScript1. Inaccessible examples                              © pixelpark   |   5
Accessible JavaScript – Inaccessible examples 1.  Only with mouse over (Example: Elegant Accordion)2.  You can only click ...
Elegant Accordion                                      © pixelpark   |   7
Easy Accordion                                © pixelpark   |   8
Accessible JavaScript2. Keyboard and keys                          © pixelpark   |   9
Accessible JavaScriptKeyboardJavaScript must be fully accessible with keyboard.You mostly use with keyboard:•  Tab•  Arrow...
WAI-ARIA Best Practice:Accordion“An accordion component is a collection of expandable panels associated with a common oute...
WAI-ARIA Best Practice:Accordion•  First you use tab to get on the first header of the accordion•  Within the accordion:  ...
Accessible JavaScript2.1 Accessible Mootools Accordion                                                                    ...
Accessible Mootools Accordion                                                              © pixelpark   |   14
Accessible JavaScript2.2 jQuery UI Accordion                                                  © pixelpark   |   15
jQuery UI Accordion                                          © pixelpark   |   16
Accessible JavaScript3. User defined colours                             © pixelpark   |   17
Accessible JavaScript User defined colours If you are using your own colours, background images are not shown anymore.    ...
Accessible JavaScript3.1 Accessible Mootools Accordion                                                                    ...
Accessible Mootools Accordion                                                              © pixelpark   |   20
Accessible JavaScript3.2 jQuery UI Accordion                                                  © pixelpark   |   21
jQuery UI Accordion                                          © pixelpark   |   22
Accessible JavaScript4. Screenreader                         © pixelpark   |   23
Accessible JavaScriptScreenreaderJavaScript must be fully accessible with a Screenreader.Using WAI-ARIA accordions could b...
Accessible JavaScriptWAI-ARIA – Accordion WidgetWAI shows in detail how WAI-ARIA can improve widgets.Accordion widget need...
WAI-ARIA – Accordion Widget                                                          © pixelpark   |   26
WAI-ARIA – Accordion Widget (ChromeVox)                                             © pixelpark   |   27
WAI-ARIA Example & Screenreader Screenreader        Header information                       Open content: informationNVDA...
WAI-ARIA – Accordion header                           Accordion         tab   aria-controls   aria-expanded   aria-selecte...
WAI-ARIA – Accordion contentAccordion           tabpanel   aria-labelledby   aria-hiddenWAI example            X          ...
Accessible JavaScript4. Enhancements                         © pixelpark   |   31
Accessible JavaScript                     Accordion enhancedWhat can be still enhanced?•  Better contrast for keyboard use...
jQuery UI Accordion enhanced                                                            © pixelpark   |   33
Accessible JavaScript4. Accordion: The future                                                    © pixelpark   |   34
Future: HTML 5 details/summary element                                                                                © pi...
HTML 5 details/summary element (ChromeVox) Problem until now: details – content is not yet accessible.                    ...
ImprintDie in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derPixelpark AG und unterli...
Nächste SlideShare
Wird geladen in …5
×

Accessible Javascript - Example Accordion

4.142 Aufrufe

Veröffentlicht am

Talk at cologne.js October 2012

Veröffentlicht in: Technologie
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.142
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
18
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Accessible Javascript - Example Accordion

  1. 1. Accessible JavaScriptExample: AccordionCologne, 09.10.2012
  2. 2. 1 Accessible JavaScript: Accordion2 Inaccessible examples3 Keyboard4 User defined colours5 Screenreader6 Enhancements7 Accordion: The future
  3. 3. Accessible JavaScript1. Accessible JavaScript? © pixelpark | 3
  4. 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. 5. Accessible JavaScript1. Inaccessible examples © pixelpark | 5
  6. 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. 7. Elegant Accordion © pixelpark | 7
  8. 8. Easy Accordion © pixelpark | 8
  9. 9. Accessible JavaScript2. Keyboard and keys © pixelpark | 9
  10. 10. Accessible JavaScriptKeyboardJavaScript must be fully accessible with keyboard.You mostly use with keyboard:•  Tab•  Arrow keys © pixelpark | 10
  11. 11. WAI-ARIA Best Practice:Accordion“An 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. 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. 13. Accessible JavaScript2.1 Accessible Mootools Accordion © pixelpark | 13
  14. 14. Accessible Mootools Accordion © pixelpark | 14
  15. 15. Accessible JavaScript2.2 jQuery UI Accordion © pixelpark | 15
  16. 16. jQuery UI Accordion © pixelpark | 16
  17. 17. Accessible JavaScript3. User defined colours © pixelpark | 17
  18. 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. 19. Accessible JavaScript3.1 Accessible Mootools Accordion © pixelpark | 19
  20. 20. Accessible Mootools Accordion © pixelpark | 20
  21. 21. Accessible JavaScript3.2 jQuery UI Accordion © pixelpark | 21
  22. 22. jQuery UI Accordion © pixelpark | 22
  23. 23. Accessible JavaScript4. Screenreader © pixelpark | 23
  24. 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 it works. © pixelpark | 24
  25. 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. 26. WAI-ARIA – Accordion Widget © pixelpark | 26
  27. 27. WAI-ARIA – Accordion Widget (ChromeVox) © pixelpark | 27
  28. 28. WAI-ARIA Example & Screenreader Screenreader Header information Open content: informationNVDA (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. 29. WAI-ARIA – Accordion header Accordion tab aria-controls aria-expanded aria-selectedWAI example X X X XAccessible X X XMootools WidgetjQuery UI X X XAccordionjQuery Mobile © pixelpark | 29
  30. 30. WAI-ARIA – Accordion contentAccordion tabpanel aria-labelledby aria-hiddenWAI example X X XAccessible X X XMootools Widget jQuery UI X X XAccordion jQuery Mobile X © pixelpark | 30
  31. 31. Accessible JavaScript4. Enhancements © pixelpark | 31
  32. 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. 33. jQuery UI Accordion enhanced © pixelpark | 33
  34. 34. Accessible JavaScript4. Accordion: The future © pixelpark | 34
  35. 35. Future: HTML 5 details/summary element © pixelpark | 35
  36. 36. HTML 5 details/summary element (ChromeVox) Problem until now: details – content is not yet accessible. © pixelpark | 36
  37. 37. ImprintDie in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derPixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweiseVervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung derPixelpark AG nicht gestattet. (All rights reserved to Pixelpark AG)Sylvia EggerSenior Online DeveloperPixelpark AGCäcilienkloster 2D-50676 Kölnsylvia.egger@pixelpark.comwww.pixelpark.com © pixelpark | 37

×