WAI-ARIA in 10

From a talk given at She Codes Brighton's Tech in 10 in March, 2015

Transcript

1. WAI-ARIA in 10 Laura Kalbag @laurakalbag @indie
2. Why is web accessibility important?
3. Accessibility makes the web a good experience for as many people as possible
4. Accessibility isn’t just about screen readers
5. Web accessibility is built on a foundation of meaningful HTML
6. <ul  class="links-­‐list  rooms">      <li>          <a  href="#hall">Hall</a>      </li>      <li>          <a  href="#kitchen">Kitchen</a>      </li>      …   </ul> <div  class="links-­‐list  rooms">      <a  href="#hall">Hall</a>      <br>      <a  href="#kitchen">Kitchen</a>   </div>   Meaningful vs not-so meaningful HTML
7. Screen readers
9. <ul  class="links-­‐list  rooms">      <li>          <a  href="#hall">Hall</a>      </li>      <li>          <a  href="#kitchen">Kitchen</a>      </li>      …   </ul> list 2 items • • internal, link, Hall internal, link, Kitchen end of list How VoiceOver reads it
10. <div  class="links-­‐list  rooms">      <a  href="#hall">Hall</a>      <br>      <a  href="#kitchen">Kitchen</a>   </div> internal, link, Hall internal, link, Kitchen How VoiceOver reads it
11. What is WAI-ARIA?
12. Web Accessibility Initiative – Accessible Rich Internet Applications (or ARIA for short) Born March 2013
13. Dynamic content / “complex web apps” (Sites that update without refreshing the page)
14. ARIA is particularly useful for keyboard navigation and screen readers
15. Tabs
16. Tabs WAI-ARIA Overview, selected, tab, 1 of 3 Laura Kalbag, tab, 2 of 3 Ind.ie, tab, 3 of 3
18. visited, link, Images link, Fonts link, Ways To Pay link, Offers link, Ideas link, Subscriptions
19. Web browsers need a few more cues to assist the human
20. ARIA is a layer on top of markup content structure (HTML) additional structure (ARIA)
21. WAI-ARIA gives developers a way to describe roles, states, and properties for custom widgets
22. <a  role="tab">Images</a> ARIA Roles
23. tab, Images tab, Fonts tab, Ways To Pay tab, Offers tab, Ideas tab, Subscriptions
24. ARIA Roles vs Implied Roles <button>Images</button> Images, button <button  role="tab">Images</button> tab, Images
25. <div  role="alert">Incorrect  password,  please  try  again</div>   <div  role="dialog">Successfully  saved</div> Other roles Full list at http://www.w3.org/TR/wai-aria/roles#abstract_roles_header
26. <a  role="tab"        aria-­‐selected="true">Images</a> ARIA States http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected
27. tab, Images, selected tab, Fonts tab, Ways To Pay tab, Offers tab, Ideas tab, Subscriptions
28. Expanding/collapsing menu <button  class="menu"        aria-­‐expanded="false"> <button  class="menu"        aria-­‐expanded="true"> Menu, collapsed, button Menu, expanded, button
29. ARIA Landmarks <div  class="site-­‐header"  role="header">      <ul  class="site-­‐navigation"  role="navigation"></ul>   </div>
30. When we shouldn’t use WAI-ARIA
31. <ul  class="site-­‐navigation"  role="navigation"> HTML5 vs Landmarks <nav>      <ul  class="site-­‐navigation"></ul>   </nav> http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics
32. ARIA vs HTML <span  role="link">   <div  role="list">   <span  role="button">   <span  role="checkbox"> <a>   <ul>   <button>   <input  type="checkbox"> http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
33. ARIA should be your last resort
34. However, there’s a lot ARIA can do, that HTML can’t…
35. Live Regions
36. New tweets available. Press period to review them. <div  id="event-­‐log"  aria-­‐live="assertive">      <p>New  Tweets  available.  Press  period  to  review  them.</p>   </div>
37. Without ARIA, people can miss out
38. http://caniuse.com/#search=WAI-ARIA
39. http://html5accessibility.com by The Paciello Group
40. ARIA can’t fix an unusable site
41. Thank you! @laurakalbag @indie