Diese Präsentation wurde erfolgreich gemeldet.

Accessible Javascript - Example Accordion

7

Teilen

Wird geladen in …3
×
1 von 37
1 von 37

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Accessible Javascript - Example Accordion

  1. 1. Accessible JavaScript Example: Accordion Cologne, 09.10.2012
  2. 2. 1 Accessible JavaScript: Accordion 2 Inaccessible examples 3 Keyboard 4 User defined colours 5 Screenreader 6 Enhancements 7 Accordion: The future
  3. 3. Accessible JavaScript 1. Accessible JavaScript? © pixelpark | 3
  4. 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. 5. Accessible JavaScript 1. 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 JavaScript 2. Keyboard and keys © pixelpark | 9
  10. 10. Accessible JavaScript Keyboard JavaScript 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 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. 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 JavaScript 2.1 Accessible Mootools Accordion © pixelpark | 13
  14. 14. Accessible Mootools Accordion © pixelpark | 14
  15. 15. Accessible JavaScript 2.2 jQuery UI Accordion © pixelpark | 15
  16. 16. jQuery UI Accordion © pixelpark | 16
  17. 17. Accessible JavaScript 3. 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 JavaScript 3.1 Accessible Mootools Accordion © pixelpark | 19
  20. 20. Accessible Mootools Accordion © pixelpark | 20
  21. 21. Accessible JavaScript 3.2 jQuery UI Accordion © pixelpark | 21
  22. 22. jQuery UI Accordion © pixelpark | 22
  23. 23. Accessible JavaScript 4. Screenreader © pixelpark | 23
  24. 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. 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. 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: 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. 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. 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. 31. Accessible JavaScript 4. Enhancements © pixelpark | 31
  32. 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. 33. jQuery UI Accordion enhanced © pixelpark | 33
  34. 34. Accessible JavaScript 4. 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. 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

×