WAI-ARIA in 10

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

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

    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