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
   

   View Slide

2. Why is web accessibility important?
   

   View Slide

3. Accessibility makes the web a good
   experience for as many people as possible
   

   View Slide

4. Accessibility isn’t just about
   screen readers
   

   View Slide

5. Web accessibility is built on a foundation
   of meaningful HTML
   

   View Slide

6.  
        
          Hall  
        
        
          Kitchen  
        
      …  
   
    
      Hall  
      
    
      Kitchen  
    
   Meaningful vs not-so meaningful HTML
   

   View Slide

7. Screen readers
   

   View Slide

8. View Slide

9.  
        
          Hall  
        
        
          Kitchen  
        
      …  
   
   list 2 items
   •
   •
   internal, link, Hall
   internal, link, Kitchen
   end of list
   How VoiceOver reads it
   

   View Slide

10.  
       Hall  
       
     
       Kitchen  
    
    internal, link, Hall
    internal, link, Kitchen
    How VoiceOver reads it
    

    View Slide

11. What is WAI-ARIA?
    

    View Slide

12. Web Accessibility Initiative –
    Accessible Rich Internet Applications
    (or ARIA for short)
    Born March 2013
    

    View Slide

13. Dynamic content / “complex web apps”
    (Sites that update without
    refreshing the page)
    

    View Slide

14. ARIA is particularly useful for keyboard
    navigation and screen readers
    

    View Slide

15. Tabs
    

    View Slide

16. Tabs
    WAI-ARIA Overview, selected, tab, 1 of 3
    Laura Kalbag, tab, 2 of 3
    Ind.ie, tab, 3 of 3
    

    View Slide

17. View Slide

18. visited, link, Images
    link, Fonts
    link, Ways To Pay
    link, Offers
    link, Ideas
    link, Subscriptions
    

    View Slide

19. Web browsers need a few more cues to
    assist the human
    

    View Slide

20. ARIA is a layer on top of markup
    content
    structure (HTML)
    additional structure (ARIA)
    

    View Slide

21. WAI-ARIA gives developers a way to
    describe roles, states, and properties for
    custom widgets
    

    View Slide

22. Images
    ARIA Roles
    

    View Slide

23. tab, Images
    tab, Fonts
    tab, Ways To Pay
    tab, Offers
    tab, Ideas
    tab, Subscriptions
    

    View Slide

24. ARIA Roles vs Implied Roles
    Images Images, button
    Images tab, Images
    

    View Slide

25. Incorrect  password,  please  try  again  
    Successfully  saved
    Other roles
    Full list at http://www.w3.org/TR/wai-aria/roles#abstract_roles_header
    

    View Slide

26.    aria-­‐selected="true">Images
    ARIA States
    http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected
    

    View Slide

27. tab, Images, selected
    tab, Fonts
    tab, Ways To Pay
    tab, Offers
    tab, Ideas
    tab, Subscriptions
    

    View Slide

28. Expanding/collapsing menu
       aria-­‐expanded="false">
       aria-­‐expanded="true">
    Menu, collapsed, button Menu, expanded, button
    

    View Slide

29. ARIA Landmarks
     
         
    
    

    View Slide

30. When we shouldn’t use WAI-ARIA
    

    View Slide

31. 
    HTML5 vs Landmarks
     
         
    
    http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics
    

    View Slide

32. ARIA vs HTML
     
     
     
    
     
     
     
    
    http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
    

    View Slide

33. ARIA should be your last resort
    

    View Slide

34. However, there’s a lot ARIA can do,
    that HTML can’t…
    

    View Slide

35. Live Regions
    

    View Slide

36. New tweets available. Press period to review them.
     
       New  Tweets  available.  Press  period  to  review  them.  
    
    

    View Slide

37. Without ARIA, people can miss out
    

    View Slide

38. http://caniuse.com/#search=WAI-ARIA
    

    View Slide

39. http://html5accessibility.com by The Paciello Group
    

    View Slide

40. ARIA can’t fix an unusable site
    

    View Slide

41. Thank you!
    @laurakalbag
    @indie
    

    View Slide