Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Real JavaScript Ninjas should know how to role with WAI-ARIA

2,596 views

Published on

ARIA provides a lot of really useful additional semantics to HTML 5 that , if used properly, can lead to awesome accessible UIs

Published in: Technology, Design
  • Be the first to comment

Real JavaScript Ninjas should know how to role with WAI-ARIA

  1. 1. Real JavaScript Ninja’s know how to role with WAI- ARIA
  2. 2. Dylan Barrell Twitter: @dylanbarrell, @unobfuscator GitHub: dylanb http://unobfuscated.blogspot.com/
  3. 3. 8 trillion
  4. 4. $8 trillion
  5. 5. 15%
  6. 6. 1 billion
  7. 7. P O U R
  8. 8. Perceivable Operable Understandable Robust
  9. 9. Role Name State(s) Value Call a Spade a Spade
  10. 10. Keyboard (and gestures) – add graphic of a Braille keyboard
  11. 11. Insert periodic table of ARIA roles
  12. 12. • ARIA roles: – Provide the ability to control the transition between application (forms) mode and document mode – Provide more native announcments for widgets like menus, tabs, sliders etc. – Provide for the ability to control announcements when updates occur away from the focus – Provide much more control over the structure of the document and how someone navigates around it
  13. 13. Insert periodic table of ARIA attributes
  14. 14. • ARIA attributes: – Solve the problem of multiple labels and descriptions through the addition of finergrained labeling attributes – Enhance the ARIA roles through the addition of standard state, value and role-specifying attributes – Add some attributes for better control of what is spoken by the screen reader versus what is simply there for presentational purposes
  15. 15. First rule of ARIA – If there is a native HTML element that does the job, use that Examples 1. Use <button> and <input type=“submit”> NOT <a role=“button”> 2. Use <ul>, <ol> and <li> NOT <span role=“list”> etc.
  16. 16. Compelling ARIA roles • Landmark Roles – main, search, navigation, contentinfo, complementary, banner – region in combination with aria-label • Live Region Roles – log, status, alert • Some Widget Roles – – – – tabpanel and tab slider menu, menubar, menuitem and associated attributes dialog – in combination with the document role to get it to work in NVDA – tree and treeitem – a bit tricky to get to work reliably • Some form roles – button, textbox, checkbox, radio, radiogroup • presentation role
  17. 17. Second rule of ARIA – test it on all YOUR platforms with the assistive technology YOU support All platforms have problems, most have workarounds, iOS is the most problematic and Android is not quite ready for prime time yet
  18. 18. ARIA holes • Tables, tables, tables – Use the a11yfy library • Arrow keys on iOS – Insert dynamic modal content in line – Use gestures • Gestures – Think hard about your mapping to the portable gestures – add on screen controls where possible
  19. 19. Accessible Gesture Calendar Example https://github.com/dylanb/gestura11y http://dylanb.github.io/datepicker/datepicker.html • Shows use of tabindex to control focus • Shows use of role=“application” to force application mode • Shows use of aria-live regions to announce the current date as the user moves around • Shows use of aria-hidden to hide presentation markup from the screen reader • Shows use of keyboard handler and mapping to gestures • Shows how to ensure that gestures are consistent regardless of zoom level
  20. 20. Accessible Gesture Calendar Example https://github.com/dylanb/gestura11y
  21. 21. Third rule of ARIA – Always attach your event handlers to the same element that has the role and the focus If you stick to this rule, you will avoid events not being delivered consistently
  22. 22. Fourth rule of ARIA – In complex widgets like menubars, tabpanels etc. always make all interim structures presentational
  23. 23. Fifth rule of ARIA – in a complex widget where you are managing focus, disable all naturally focusable elements with tabindex=“-1” Example is the a11yfy menu examples where the anchors are given tabindex=“-1”
  24. 24. Finally There is a wealth or resources including The ARIA specificationhttp://www.w3.org/TR/waiaria/ The Authoring Practices http://www.w3.org/TR/wai-aria-practices/ The WAI Web Site http://www.w3.org/WAI/intro/aria Mozilla Developer Network https://developer.mozilla.org/enUS/docs/Web/Accessibility/ARIA

×