Successfully reported this slideshow.

ARIA (SydJS lightning talk)


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

Published in: Technology
  • Be the first to comment

ARIA (SydJS lightning talk)

  1. 1. ARIASydJS lightning talk, 2013.03.20 Ben Buchanan / @200okpublic
  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?"-
  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"● "WAI-ARIA 1.0 Authoring Practices"● ARIA on MDN● ARIA posts on TPG blog