Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessible JavaScript: Aim for More Accessible JS Widgets

Accessible JavaScript: Aim for More Accessible JS Widgets


Melissa Avery-Weir

November 20, 2014


  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/