Accessible JavaScript: Aim for More Accessible JS Widgets

Slide 1

Slide 1 text

Accessible JavaScript AIM FOR MORE ACCESSIBLE JS WIDGETS Melissa Avery-Weir Future Proof Games @averymd

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Accessible Interactivity o Screenreaders o Keyboards o UI element sizes jQuery UI Multiselect: http://www.quasipartikel.at/multiselect/

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

jQuery UI Droppable o Overall, jQuery UI is not very accessible o Droppable: ◦ Has no keyboard bindings ◦ Has no ARIA state information

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Questions?

Slide 14

Slide 14 text

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/