Making your jQuery Plugins More Accessible


Published on

An accessibility primer for jQuery developers. This presentation covered teaches how to make widgets and plugins navigable with the keyboard, as well as support for assistive technologies with ARIA.

Presented at the 2009 jQuery Conference in Boston.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Making your jQuery Plugins More Accessible

  1. 1. Making Your jQuery More Accessible Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre
  2. 2. Topics We’ll Cover • A quick introduction • What is accessibility? • Challenges of DHTML accessibility • Quick ARIA refresher • Implementing keyboard navigation • An update on jQuery UI accessibility • Meet Infusion
  3. 3. Who am I? • I’m the technical lead for the Fluid community • IResource the Adaptive Technology work at Centre • I love JavaScript and jQuery
  4. 4. What’s the Fluid Project? • We’re an open source community of: • Interaction designers • Front-end developers • Accessibility people • We help other communities • We love the Open Web
  5. 5. What is Accessibility?
  6. 6. A New Definition • Accessibility is the ability of the system to accommodate the needs of the user • Disability is the mismatch between the user and the interface provided • We all experience disability • Accessible software = better software
  7. 7. DHTML: A New Can of Worms • Shift from documents to applications • Familiar a11y techniques aren’t enough • Most DHTML is completely inaccessible • New techniques are still being figured out
  8. 8. Assistive Technologies • Present and control the user interface in different ways • Not just screen readers! • Use built-in operating system APIs to understand the user interface Screen readers Screen magnifiers On-screen keyboards
  9. 9. The Problem • Custom widgets often look, but don’t act, like their counterparts on the desktop • HTML provides only simple semantics • Not enough information for ATs • Dynamic updates require new design strategies to be accessible
  10. 10. The Solution • Describe user interfaces with ARIA • Add consistent keyboard controls • Provide flexible styling and presentation
  11. 11. Supporting Assistive Technology
  12. 12. Where’s the Code? 13ckp
  13. 13. Opaque Markup // These are tabs. How would you know? <ol> <li><a href=”#cats”>Cats</a></li> <li><a href=”#dogs”>Dogs</a></li> <li><a href=”#gators”>Gators</a></li> </ol> <div> <div id=”cats”>Cats meow.</div> <div id=”dogs”>Dogs bark.</div> <div id=”gators”>Gators bite.</div> </div>
  14. 14. Opaque Markup: Tabs
  15. 15. ARIA • Accessible Rich Internet Applications • W3C specification in the works • Fills the semantic gaps in HTML • Roles, states, and properties • Live regions
  16. 16. Roles, States, Properties • Roles describe widgets not present in HTML 4 • slider, menubar, tab, dialog • Properties describe characteristics: • draggable, hasPopup, required • States describe what’s happening: • busy, disabled, selected, hidden
  17. 17. Using ARIA // Now *these* are Tabs! <ol id=”animalTabs” role=”tablist” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable --> <!-- We’ll focus them with JavaScript instead --> <li role=”tab”><a href=”#” tabindex=”-1”>Cats</a></li> <li role=”tab”><a href=”#” tabindex=”-1”>Dogs</a></li> <li role=”tab”><a href=”#” tabindex=”-1”>Gators</a></li> </ol> <div id=”panels”> <div role=”tabpanel” aria-labelledby=”cats”>Cats meow.</div> <div role=”tabpanel” aria-labelledby=”dogs”>Dogs bark.</div> <div role=”tabpanel” aria-labelledby=”gators”>Gators bite.</div> </div>
  18. 18. Adding ARIA in Code // Identify the container as a list of tabs. that.tabContainer.attr("role", "tablist"); // Give each tab the "tab" role. that.tabs.attr("role", "tab"); // Give each panel the appropriate role, that.panels.attr("role", "tabpanel"); that.panels.each(function (idx, panel) { var tabForPanel = that.tabs.eq(idx); // Relate the panel to the tab that labels it. $(panel).attr("aria-labelledby", tabForPanel[0].id); });
  19. 19. Keyboard Accessibility
  20. 20. Keyboard Navigation • Everything that works with the mouse should work with the keyboard • ... but not always in the same way • Support familiar conventions
  21. 21. Keyboard Conventions • Tab key focuses the control or widget • Arrow keys select an item • Enter or Spacebar activate an item • Tab is handled by the browser. For the rest, you need to write code. A lot of code.
  22. 22. Keyboard a11y: Tabs
  23. 23. Tabbing and Tabindex • Each focusable item can be reached in sequence by pressing the Tab key • Shift-Tab moves backwards • The tabindex attribute allows you to customize the tab order • tabindex=”-1” removes element from the tab order: useful for custom handlers
  24. 24. Tabindex examples <!-- Tab container should be focusable --> <ol id=”animalTabs” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable --> <!-- We’ll focus them with JavaScript instead --> <li id=”tab1”> <a href=”#cats” tabindex=”-1”>Cats</a> </li> <li id=”tab2”> <a href=”#cats” tabindex=”-1”>Dogs</a> </li> <li id=”tab3”> <a href=”#cats” tabindex=”-1”>Alligators</a> </li> </ol>
  25. 25. Making Things Tabbable • Tabindex varies subtly across browsers • jquery.attr() normalizes it as of 1.3 • For all the gory details: getting-setting-and-removing-tabindex-values-with- javascript/ // Make the tablist accessible with the Tab key. tabContainer.attr("tabindex", "0"); // And take the anchors out of the Tab order. $(“a”, tabs).attr("tabindex", "-1");
  26. 26. Adding the Arrow Keys // Make each tab accessible with the left and right arrow keys. that.tabContainer.fluid("selectable", { selectableSelector: that.options.selectors.tabs, direction: fluid.a11y.orientation.HORIZONTAL, onSelect: function (tab) { $(tab).addClass(that.options.styles.highlighted); }, onUnselect: function (tab) { $(tab).removeClass(that.options.styles.highlighted); } });
  27. 27. Making Them Activatable // Make each tab activatable with Spacebar and Enter. that.tabs.fluid("activatable", function (evt) { // Your handler code here. Maybe the same as .click()? });
  28. 28. Documentation • Tutorial: +Tutorial • API Reference: +Plugin+API
  29. 29. Accessibility Resources +Protocols navigable_custom_DHTML_widgets
  30. 30. jQuery UI Accesssibility • A truly community-driven effort • A step-by-step approach • Features include: • Several accessible widgets, more to come • Comprehensive ARIA in ui.core.js • Tabindex in jquery.js and ui.core.js
  31. 31. jQuery UI Accessibility • Accordion • Dialog • Progress Bar • Slider (fresh patch landed on Friday!)
  32. 32. jQuery UI Accessibility • You can help! • We’ll help get you started
  33. 33. Accessibility in Infusion • jQuery Keyboard Navigation Plugin • ARIA everywhere • Everything is highly adaptable and flexible • UI Options and the Fluid Skinning System: • Users can customize their environment
  34. 34. UI Options & FSS
  35. 35. UI Options & FSS
  36. 36. Wrapping up... • Join me at the Ajax Experience • Monday at 10 am • Building Accessible UIs with jQuery & Infusion • Questions?