Talk at cologne.js October 2012

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