Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WAI-ARIA in 10

WAI-ARIA in 10

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


Laura Kalbag

March 16, 2015

More Decks by Laura Kalbag

Other Decks in Technology


  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

  8. None
  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
  17. None
  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

  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>

  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