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

Accessibility is My Favorite Part of the Platform

Rob Dodson
May 19, 2016
690

Accessibility is My Favorite Part of 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.

Rob Dodson

May 19, 2016
Tweet

Transcript

  1. About 15% of the world's population lives with some form

    of disability - World Health Organization source • who.int/disabilities/world_report/2011/report
  2. Motor Users may prefer not to use a mouse, have

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

    RSI, or physical paralysis and limited range of motion
  4. WCAG 2.0 Web Content Accessibility Guidelines 2.0 provide a system

    for assessing the accessibility of any app w3.org/TR/WCAG20
  5. DOM Order Matters Tab order is inferred by the order

    of the DOM. Changing the visual position of elements can lead to an illogical tab order.
  6. I Should Be Focused Last! <button style=“float: right;”> I Should

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  7. I Should Be Focused Last! <button style=“float: right;”> I Should

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  8. I Should Be Focused Last! <button style=“float: right;”> I Should

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  9. Implicitly Focusable Native elements like input, button, and select get

    focusability for free! Click Me! Password Aisle Seat
  10. tabindex=“0” In the natural tab order and can be programmatically

    focused by calling focus() Settings <div id=“dropdown”> Settings </div>
  11. tabindex=“0” In the natural tab order and can be programmatically

    focused by calling focus() Settings <div id=“dropdown” tabindex=“0”> Settings </div>
  12. tabindex=“0” In the natural tab order and can be programmatically

    focused by calling focus() <div id=“dropdown” tabindex=“0”> Settings </div> Settings
  13. tabindex=“-1” Not in the natural tab order but can be

    programmatically focused by calling focus(). Useful for “roving tabindex” <div tabindex=“-1”>Item 1</div> <div tabindex=“0”>Item 2</div> <div tabindex=“-1”>Item 3</div> Item 1 Item 2 Item 3
  14. tabindex=“-1” <div tabindex=“-1”>Item 1</div> <div tabindex=“-1”>Item 2</div> <div tabindex=“0”>Item 3</div>

    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”
  15. tabindex=“5” In the natural tab order and jumps ahead of

    everything else. Generally an anti-pattern.
  16. // Will hold previously focused element var focusedElementBeforeModal; // Find

    the modal and its overlay var modal = document.querySelector('.modal'); var modalOverlay = document.querySelector('.modal-overlay'); var modalToggle = document.querySelector('.modal-toggle'); modalToggle.addEventListener('click', openModal); Code for trapping modal focus
  17. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog>
  18. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Trap focus
  19. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Move focus into the modal
  20. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Dismiss or confirm and close modal
  21. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Restore focus
  22. Programmatic semantics <main> <div class="card"> <form> <div class="trip-selector"> <div class="row">

    <div class="inline-control col-2"> </div> <div class="inline-control submit-form col-1"> <button type="submit" id="submitBtn">Search</button> </div> </div> </div> </form> </div> </main> <label for=“seatType">Preferred seat type</label> <select name="seatType" id="seatType"> <option value="0">No preference</option> <option value="1">Aisle seat</option> <option value="2">Window seat</option> </select> pop-up button value: “No preference” name: “Preferred seat type” state: collapsed
  23. Programmatic semantics <main> <div class="card"> <form> <div class="trip-selector"> <div class="row">

    <div class="inline-control col-2"> </div> <div class="inline-control submit-form col-1"> <button type="submit" id="submitBtn">Search</button> </div> </div> </div> </form> </div> </main> <label for=“seatType">Preferred seat type</label> <select name="seatType" id="seatType"> <option value="0">No preference</option> <option value="1">Aisle seat</option> <option value="2">Window seat</option> </select> Role: “pop-up button” Name: “Preferred seat type” State: collapsed Value: “No preference”
  24. Implicit Semantics Similar to focus, native elements get rich semantics

    for free Click Me! Password Aisle Seat “pop-up button” “button” “secure edit text”
  25. 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
  26. aria-label A string to be used as the accessible label.

    Overrides any other native labelling mechanism. “button” <button id=“hamburger”> </button>
  27. aria-label A string to be used as the accessible label.

    Overrides any other native labelling mechanism. <button id=“hamburger” aria-label=“Main Menu”> </button> “Main Menu, button”
  28. 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” <div id=“lbl”>Men’s Outerwear</div> <shop-button id=“btn” role=“button”> Shop Now </shop-button>
  29. 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” <div id=“lbl”>Men’s Outerwear</div> <shop-button id=“btn” role=“button” aria-labelledby=“lbl btn”> Shop Now </shop-button>
  30. 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.
  31. Ensure focus Leverage native elements like button for easy focus

    wins. Use tabindex to add keyboard support to custom elements.
  32. 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.
  33. Accessibility talks Thu, 5pm - Hercules Google.org: Accelerating innovation for

    people w/ disabilities Fri, 11am - Ursa Minor Inclusive Design and Testing: Making your app accessible Sandbox Visit Access & Empathy sandbox for demos
  34. Thank You! + RobDodson @rob_dodson Images created by Julien Deveaux,

    Co-Effect Creative, Michael Wohlwend, Maico Amorim, Yu Luck, Andrey Vasiliev, Till Teenck, Gregor Črešnar, Wes Breazell from the Noun project Credits