Successfully reported this slideshow.

ARIA (SydJS lightning talk)

1,446 views

Published on

Lightning talk given to SydJS, about using ARIA attributes as an off-shelf definition of state, as well as for accessbility. For a better transcript and some background, see http://weblog.200ok.com.au/2013/03/aria-sydjs-lightning-talk.html

Published in: Technology
  • Be the first to comment

ARIA (SydJS lightning talk)

  1. 1. ARIASydJS lightning talk, 2013.03.20 Ben Buchanan / @200okpublic weblog.200ok.com.au
  2. 2. "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee, 1997
  3. 3. This is relevant to your interests.
  4. 4. ARIA● Accessible Rich Internet Applications● Enhances the DOM● Describes richer interactions
  5. 5. Reasons to use it● Obviously, because a11y is good● But also its freakin useful
  6. 6. State reinvented over and over and overclass="disabled"class="enabled"class="on"class="off"class="ticked"class="checked"class="focus"class="active"class="hidden"
  7. 7. ...and overdata-my-awesome-namespace="disabled"data-my-awesome-namespace="enabled"data-my-awesome-namespace="on"data-my-awesome-namespace="off"data-my-awesome-namespace="ticked"data-my-awesome-namespace="checked"data-my-awesome-namespace="focus"data-my-awesome-namespace="active"data-my-awesome-namespace="hidden"
  8. 8. "What meaningful properties does this object have at this time?"- http://www.w3.org/TR/2010/WD-wai-aria-primer-20100916/#properties
  9. 9. Description requires definition
  10. 10. Link elementsBad:<a>Trigger</a><div class="tooltip" id="foo">Not announced</div>
  11. 11. Link elementsGood:<a aria-describedby="foo">Trigger</a><div role="tooltip" id="foo">Announced</div>
  12. 12. Side by sideBad:<a>Trigger</a><div class="tooltip" id="foo">Not announced</div>Good:<a aria-describedby="foo">Trigger</a><div role="tooltip" id="foo">Announced</div>
  13. 13. Dont overdo it...● Use core HTML where valid ● <input type="checkbox" disabled />● ARIA fills in the gaps ● <span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
  14. 14. Separate your functional CSSDOM:aria-hidden="true"CSS:[aria-hidden="true"] { display: none; }
  15. 15. Support
  16. 16. Careful! Browsers may rock at ARIA, but suck at assistive tech. eg. Firefox + NVDA = good Chrome + NVDA = bad
  17. 17. To summarise:Rejoice! ARIA means Javascript no longer kills kittens!
  18. 18. More info● "Using WAI-ARIA in HTML" https://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html● "WAI-ARIA 1.0 Authoring Practices" http://www.w3.org/WAI/PF/aria-practices/● ARIA on MDN https://developer.mozilla.org/en-US/docs/Accessibility/ARIA● ARIA posts on TPG blog http://blog.paciellogroup.com/category/wai-aria/

×