Accessibility in the Platform

My favorite part of my job is when I get to work on accessibility. I see this as removing uncertainty and anxiety from people’s day, and helping them access the information they need. But working with accessibility can be frustrating, especially when you feel like you’re fighting the platform instead of working with it. This session aims to clear up some of the confusion that makes getting started with accessibility tricky, while showing off new tools to make the process easier, and highlighting ways that we can work with and extend the platform so our apps are accessible to everyone.

Transcript

1. Accessibility @ Modern Web
   + RobDodson
   @rob_dodson
   

   View Slide

2. View Slide

3. Perf is crucial for good UX
   

   View Slide

4. View Slide

5. View Slide

6. Disability is not just a health problem. It is a
   complex phenomenon, reflecting the interaction
   between features of a person’s body and
   features of the society in which he or she lives.
   - World Health Organization
   source • who.int/topics/disabilities/en/
   

   View Slide

7. View Slide

8. View Slide

9. Accessibility is good UX
   

   View Slide

10. Diversity of users
    Focus
    Semantics
    

    View Slide

11. Diversity of users
    

    View Slide

12. About 15% of the world's
    population lives with
    some form of disability
    - World Health Organization
    source • who.int/disabilities/world_report/2011/report
    

    View Slide

13. 1 Billion People
    

    View Slide

14. visual
    auditory cognitive
    motor
    

    View Slide

15. Visual
    A broad range from no vision (total blindness) to
    limited or low vision
    

    View Slide

16. View Slide

17. View Slide

18. Motor
    Users may prefer not to use a mouse, have RSI, or
    physical paralysis and limited range of motion
    

    View Slide

19. Motor
    Users may prefer not to use a mouse, have RSI, or
    physical paralysis and limited range of motion
    

    View Slide

20. Auditory
    May be completely deaf or hard of hearing
    

    View Slide

21. View Slide

22. Cognitive
    A broad range encompassing ADHD, dyslexia, and
    autism just to name a few
    

    View Slide

23. View Slide

24. visual
    auditory cognitive
    motor
    

    View Slide

25. WCAG 2.0
    Web Content Accessibility
    Guidelines 2.0 provide a system
    for assessing the accessibility
    of any app
    w3.org/TR/WCAG20
    

    View Slide

26. WebAIM WCAG 2.0 Checklist
    webaim.org/standards/wcag/checklist
    

    View Slide

27. Nail the checklist
    

    View Slide

28. Focus
    

    View Slide

29. Focus determines where
    keyboard events go in the page.
    

    View Slide

30. Implicitly Focusable
    Native elements like input,
    button, and select get
    focusability for free!
    Click Me!
    Password
    Aisle Seat
    

    View Slide

31. Not all elements are focusable
    

    View Slide

32. 
    
    
    PWAwesome
    
    Overview
    Features
    Start
    Contact
    
    

    View Slide

33. 
    
    
    PWAwesome
    
    Overview
    Features
    Start
    Contact
    
    

    View Slide

34. Don’t fight the platform!
    

    View Slide

35. tabindex
    Configure the focus behavior of an element
    

    View Slide

36. tabindex=“0”
    In the natural tab order and can
    be programmatically focused by
    calling focus()
    Settings
    
    Settings
    
    

    View Slide

37. tabindex=“0”
    In the natural tab order and can
    be programmatically focused by
    calling focus()
    Settings
    tabindex=“0”>
    Settings
    
    

    View Slide

38. tabindex=“0”
    In the natural tab order and can
    be programmatically focused by
    calling focus()
    tabindex=“0”>
    Settings
    
    Settings
    

    View Slide

39. tabindex=“-1”
    Not in the natural tab order but
    can be programmatically
    focused by calling focus().
    Useful for “roving tabindex”
    Item 1
    Item 2
    Item 3
    Item 1
    Item 2
    Item 3
    

    View Slide

40. tabindex=“-1”
    Item 1
    Item 2
    Item 3
    Item 1
    Item 2
    Item 3
    focus();
    Not in the natural tab order but
    can be programmatically
    focused by calling focus().
    Useful for “roving tabindex”
    

    View Slide

41. tabindex=“5”
    In the natural tab order and
    jumps ahead of everything else.
    Generally an anti-pattern.
    

    View Slide

42. ARIA Design Patterns
    w3.org/TR/wai-aria-practices-1.1
    

    View Slide

43. Use the keyboard patterns from
    the ARIA Authoring guide to
    ensure an accessible experience
    

    View Slide

44. Semantics
    

    View Slide

45. Affordances
    Affordances offer or afford a
    person the opportunity to
    perform an action.
    

    View Slide

46. Programmatic semantics
    
    
    
    
    
    
    
    
    Search
    
    
    
    
    
    
    Preferred seat type
    
    No preference
    Aisle seat
    Window seat
    
    pop-up button
    value: “No preference”
    name: “Preferred seat type”
    state: collapsed
    

    View Slide

47. Programmatic semantics
    
    
    
    
    
    
    
    
    Search
    
    
    
    
    
    
    Preferred seat type
    
    No preference
    Aisle seat
    Window seat
    
    Role: “pop-up button”
    Name: “Preferred seat type”
    State: collapsed
    Value: “No preference”
    

    View Slide

48. GUI accessibility
    tree
    assistive
    technology
    user
    application
    

    View Slide

49. Implicit Semantics
    Similar to focus, native elements
    get rich semantics for free
    Click Me!
    Password
    Aisle Seat
    “pop-up button”
    “button”
    “secure edit text”
    

    View Slide

50. Generic elements have generic semantics
    tabindex=“0”>
    Sign Up
    
    SIGN UP
    “group”
    

    View Slide

51. Don’t fight the platform
    Use native elements for free programmatic semantics
    

    View Slide

52. WAI-ARIA
    The Web Accessibility Initiative - Accessible Rich Internet Applications
    (ARIA) specification adds the ability to modify and enhance the semantic
    meaning of elements in the DOM
    

    View Slide

53. ARIA does NOT change behavior
    

    View Slide

54. 
    
    Sign Up
    ✔ Sign Up
    …
    

    View Slide

55. ARIA. All of it…
    

    View Slide

56. ARIA Design Patterns
    

    View Slide

57. View Slide

58. 
    
    Sign Up
    ✔ Sign Up
    …
    

    View Slide

59. role=“checkbox”>
    
    Sign Up
    ✔ Sign Up
    role: checkbox
    state: unchecked
    

    View Slide

60. role=“checkbox”
    aria-checked=“true”>
    
    Sign Up
    ✔ Sign Up
    role: checkbox
    state: checked
    

    View Slide

61. aria-label
    A string to be used as the
    accessible label. Overrides any
    other native labelling mechanism.
    “button”
    
    
    

    View Slide

62. aria-label
    A string to be used as the
    accessible label. Overrides any
    other native labelling mechanism.
    aria-label=“Main Menu”>
    
    “Main Menu, button”
    

    View Slide

63. aria-labelledby
    A reference to an element
    (or elements) which will act as
    an accessible label. Overrides
    any other labelling mechanism
    including aria-label.
    “Shop Now, button”
    Men’s Outerwear
    
    Shop Now
    
    

    View Slide

64. aria-labelledby
    A reference to an element
    (or elements) which will act as
    an accessible label. Overrides
    any other labelling mechanism
    including aria-label.
    “Men’s Outerwear, Shop Now, button”
    Men’s Outerwear
    aria-labelledby=“lbl btn”>
    Shop Now
    
    

    View Slide

65. role=“checkbox”
    aria-checked=“true”>
    
    Sign Up
    ✔ Sign Up
    role: checkbox
    state: checked
    

    View Slide

66. role=“checkbox”
    aria-checked=“true”
    aria-labelledby=“sign”>
    
    Sign Up
    ✔ Sign Up
    role: checkbox
    name: “Sign Up”
    state: checked
    

    View Slide

67. View Slide

68. Review!
    

    View Slide

69. Nail the checklist
    Consider the broad range of
    users. Work with WCAG 2.0 and
    the Web AIM checklist to ensure
    your application is accessible.
    

    View Slide

70. Ensure focus
    Leverage native elements like
    button for easy focus wins. Use
    tabindex to make controls
    operable and to manage focus
    in your app.
    

    View Slide

71. Offer affordances
    Use native elements with built-
    in, rich semantics. Refer to
    ARIA Authoring Practices doc
    when you need to add your own
    custom semantics.
    

    View Slide

72. bit.ly/web-a11y
    

    View Slide

73. @rob_dodson
    Rob Dodson
    Thank You
    Images created by Julien Deveaux, Co-Effect Creative, Michael Wohlwend, Maico Amorim,
    Yu Luck, Andrey Vasiliev, Till Teenck, Gregor Črešnar, Wes Breazell, Blaise Sewell, Dustin’s
    Words from the Noun project
    

    View Slide