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

1. ARIA
SydJS lightning talk, 2013.03.20
Ben Buchanan / @200okpublic
weblog.200ok.com.au

2. "The power of the Web is in its universality. Access
by everyone regardless of
disability is an essential aspect."
- Tim Berners-Lee, 1997

4. This is relevant to your interests.

5. ARIA
●
Accessible Rich Internet Applications
●
Enhances the DOM
●
Describes richer interactions

6. Reasons to use it
●
Obviously, because a11y is good
●
But also it's freakin useful

7. State reinvented over and over and over
class="disabled"
class="enabled"
class="on"
class="off"
class="ticked"
class="checked"
class="focus"
class="active"
class="hidden"

8. ...and over
data-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"

9. "What meaningful properties does
this object have at this time?"
- http://www.w3.org/TR/2010/WD-wai-aria-primer-20100916/#properties

10. Description requires definition

11. Link elements
Bad:
<a>Trigger</a>
<div class="tooltip" id="foo">
Not announced</div>

12. Link elements
Good:
<a aria-describedby="foo">Trigger</a>
<div role="tooltip" id="foo">
Announced</div>

13. Side by side
Bad:
<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>

14. Don't 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>

15. Separate your functional CSS
DOM:
aria-hidden="true"
CSS:
[aria-hidden="true"] { display: none; }

16. Support

17. Careful! Browsers may rock at ARIA,
but suck at assistive tech.
eg.
Firefox + NVDA = good
Chrome + NVDA = bad

18. To summarise:
Rejoice! ARIA means Javascript
no longer kills kittens!

19. 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/