Accessible JavaScript: Aim for More Accessible JS Widgets

Transcript

1. Accessible JavaScript AIM FOR MORE ACCESSIBLE JS WIDGETS Melissa Avery-Weir Future Proof Games @averymd
2. Overview o General accessibility o “Interactive” accessibility o Old school: jQuery UI o New school: HTML5 draggable o Other JS frameworks o What we can do: AccDC API
3. Accessibility and “Disability” o Auditory: hard of hearing, deafness o Visual: low-vision, blindness, color blindness o Neurological or Cognitive: memory impairments, distractibility, learning disabilities o Motor: reduced response time, inability to use a mouse, lack of fine motor control
4. Accessible Interactivity o Screenreaders o Keyboards o UI element sizes jQuery UI Multiselect: http://www.quasipartikel.at/multiselect/
5. Screenreader Needs Semantic markup: HTML tags that reflect meaning (lists, forms, anchor tags) ARIA attributes: HTML attributes that provide information on elements’: ◦ roles in the page (header, banner, search) ◦ properties (labeled by, required) ◦ states (hidden, checked, grabbed)
6. Keyboard Needs o All functionality available to a mouse should be keyboard accessible o keydown event o Focus should be visible to keyboard users o :active and :focus in CSS
7. jQuery UI Droppable o Overall, jQuery UI is not very accessible o Droppable: ◦ Has no keyboard bindings ◦ Has no ARIA state information
8. jQuery UI Droppable - Bindings o Uses jQuery UI’s mouse “widget” o Public API: _mouseStart(), _mouseDrag(), _mouseStop(), _mouseCapture() o You could modify the internals to bind on keyboard events as well.
9. jQuery UI Droppable – ARIA States o ARIA state changes when jQuery UI changes CSS classes: o aria-grabbed=true/false o aria-dropeffect=copy/move/reference/execute/popup/none
10. HTML5 Draggable o HTML5 introduced the: o “draggable” and “dropzone” attributes o “dragstart”, “dragenter”, “dragover”, “drop”, “dragend” events o DataTransfer objects to store dragged items o No mobile support yet o Still need to implement the ARIA states – W3C won’t do it o Example: https://dev.opera.com/articles/accessible-drag- and-drop/example.html
11. Other Frameworks o Kendo UI: o Incomplete keyboard support o Minimal ARIA support o Dojo: o Provides keyboard support o Hooks for dev-provided ARIA support o YUI o Provides keyboard support
12. What We Can Use: AccDC API o Accelerated Dynamic Content – an accessibility API o Available for plain JS, jQuery, Dojo, and MooTools o Useful if you don’t need a large, pre- styled UI toolkit
13. Questions?
14. References o W3C’s HTML5 Drag and Drop spec: http://www.w3.org/html/wg/drafts/html/master/editing.html#dnd o Why W3C won’t tie HTML5 draggable to ARIA: https://www.w3.org/Bugs/Public/show_bug.cgi?id=6912 o AccDC: http://whatsock.com/tsg/ o SSB Bart Group’s drag and drop demo: https://www.ssbbartgroup.com/blog/2011/12/12/accessible-drag-and- drop-why-foolproof-scripting-is-critical-when-using-aria/ o SSB Bart Group’s jQuery UI accessibility analysis: https://www.ssbbartgroup.com/blog/2013/07/03/jquery-ui- accessibility-analysis/