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

Web Accessibility Live London, Feb 2018

bruce lawson
February 08, 2018

Web Accessibility Live London, Feb 2018

Future of Web Accessibility

bruce lawson

February 08, 2018
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  1. @brucel
    The Future of
    Accessibility
    Web Accessibility Live, 8 February 2018
    1

    View full-size slide

  2. @brucel
    Who?
    • Multiple Sclerosis owner

    • Ex-Deputy CTO, Opera Software

    • BS8878 committee member

    • co-editor HTML5.3 spec at W3C

    • Co-author “Introducing HTML5”, “Web Accessibility: Web
    Standards and Regulatory Compliance”

    View full-size slide

  3. @brucel
    https://voice.mozilla.org/

    View full-size slide

  4. @brucel
    https://code.facebook.com/posts/457605107772545/under-the-hood-building-
    accessibility-tools-for-the-visually-impaired-on-facebook/

    View full-size slide

  5. @brucel
    Automated lip-reading
    “The Google DeepMind project ran research on over
    100, 000 natural sentences, taken from videos from the
    BBC. These videos had a wide range of languages,
    speech rates, accents, variations in lighting and head
    positions.

    …experts interpreted about 12.4% of the content, AI
    successfully interpreted 46.8%”

    - Denis Boudreau “Five Ways in Which Artificial Intelligence Changes the
    Face of Web Accessibility”

    View full-size slide

  6. @brucel
    Photo: Robert Nelson

    View full-size slide

  7. @brucel
    Smart Cities
    Fibercool - https://www.flickr.com/photos/hgoye/2422963135/

    View full-size slide

  8. @brucel
    icon: Becris https://thenounproject.com/term/smart-city/1271139/

    View full-size slide

  9. @brucel
    Smart cities
    • London: SCOOT optimises traffic lights

    • Barcelona: emergency vehicles routing

    • Amsterdam: street lighting based on pedestrian numbers

    • Singapore - smart health care

    • Santa Cruz - directing police resources

    • Shwetank Dixit: What do we mean by accessible smart
    cities? http://blog.barrierbreak.com/2017/05/02/what-do-we-
    mean-by-accessible-smart-cities/

    View full-size slide

  10. @brucel
    Wix
    • enable navigation by keyboard
    • provide Screen Reader compatibility
    • build infrastructure for accessibility development
    and testing.

    View full-size slide

  11. @brucel
    110
    million

    View full-size slide

  12. @brucel
    Stylable is a CSS preprocessor for styling components
    with typed CSS.

    View full-size slide

  13. @brucel
    Photo: F. Antolín Hernandez

    View full-size slide

  14. @brucel
    “HTML 4.0 developments inspired by concerns for
    accessibility include the requirement that alternate text
    accompany an image included via the IMG element.

    View full-size slide

  15. @brucel
    HTML Design Principles
    Design features to be accessible to users with disabilities.
    Access by everyone regardless of ability is essential.
    This does not mean that features should be omitted entirely
    if not all users can make full use of them, but alternate
    mechanisms should be provided.

    HTML Design Principles - https://www.w3.org/TR/html-design-principles/

    View full-size slide

  16. @brucel
    Ajax / “Web 2.0”
    By decoupling the data interchange layer from the
    presentation layer, Ajax allows for Web pages, and by
    extension Web applications, to change content
    dynamically without the need to reload the entire page.

    View full-size slide

  17. @brucel
    WAI ARIA
    WAI-ARIA provides a framework for adding attributes to
    identify features for user interaction, how they relate to each
    other, and their current state.
    WAI-ARIA describes new navigation techniques to mark regions
    and common Web structures as menus, primary content,
    secondary content, banner information, and other types of
    Web structures.

    View full-size slide

  18. @brucel
    ARIA landmark roles
    role="contentinfo", "main", "banner" ...

    View full-size slide

  19. Built-in beats bolt-on

    View full-size slide

  20. @brucel
    Photo: Brittany Shaw

    View full-size slide

  21. @brucel
    ARIA isn’t a magic bullet
    You still need to

    • maintain state and value

    • make sure things are keyboard-focusable

    • listen for keypresses

    • deal with live regions

    View full-size slide

  22. @brucel
    Web Components

    View full-size slide

  23. @brucel
    Web Components WTF?
    Web components are a set of web platform APIs that
    allow you to create new custom, reusable,
    encapsulated HTML tags to use in web pages and
    web apps.

    https://www.webcomponents.org/introduction

    View full-size slide

  24. @brucel
    JavaScript frameworks

    View full-size slide

  25. @brucel
    Custom elements
    Click me!

    View full-size slide

  26. @brucel
    .. or semantically neutral
    Click me!

    View full-size slide

  27. @brucel
    dannynorton - https://www.flickr.com/photos/dannynorton/186795352/

    View full-size slide

  28. @brucel
    accessibility
    object
    model
    F Delventhal https://www.flickr.com/photos/krossbow/10324856173/

    View full-size slide

  29. @brucel
    wicg.github.io/aom/spec/
    • Alexander Surkov, Mozilla
    • Alice Boxhall, Google
    • Dominic Mazzoni, Google
    • James Craig, Apple
    --enable-blink-features=AccessibilityObjectModel

    View full-size slide

  30. @brucel
    Current gaps
    • Leaky abstractions

    • IDrefs

    • No way to capture input events from
    Assistive Technology

    • Every accessible node requires a
    DOM element.

    • No introspection

    View full-size slide

  31. @brucel
    Eric Hunt https://en.wikipedia.org/wiki/Brussels_sprout#/media/
    File:Brussels_sprout_closeup.jpg

    View full-size slide

  32. @brucel
    Sprouting ARIA attributes


    tabindex="0" aria-valuemin="0" aria-valuemax="5" aria-
    valuenow="3"
    aria-valuetext="3">

    View full-size slide

  33. @brucel
    Phase 1 of AOM

    Receive promotional offers
    can be replaced by:

    el.accessibleNode.role = "checkbox";
    el.accessibleNode.checked = true;

    View full-size slide

  34. @brucel
    Cleaner code

    Receive promotional offers

    View full-size slide

  35. @brucel
    AOM vs ARIA
    • While AOM and ARIA both affect the computed
    accessible properties of a node, and have the same
    vocabulary, they are separate interfaces.

    • They don’t reflect each other.

    • If an AOM Accessible Property and the corresponding
    ARIA attribute have different values, the AOM property
    takes precedence.

    View full-size slide

  36. @brucel
    IDs in HTML associate
    First name:

    aria-activedescendant indicates a descendant
    that's focused in a composite control like a list box.
    tabindex="0">
    Item 1
    Item 2
    Item 3

    View full-size slide

  37. @brucel
    Impossible across
    components

    Item 1
    Item 2
    Item 3

    View full-size slide

  38. @brucel
    New! Improved! AOM!
    const input = comboBox.shadowRoot.querySelector(“input");
    const optionList = comboBox.querySelector("custom-optionlist");
    input.accessibleNode.activeDescendant =
    optionList.accessibleNode;

    View full-size slide

  39. AT input events

    View full-size slide

  40. @brucel
    Accessible Actions
    • Accessible Actions gives web developers a mechanism to
    listen for accessible actions directly, by adding event
    listeners on an AccessibleNode.

    • This is analogous to listening for user interaction events
    on a DOM node, except that the interaction event arrives
    via an assistive technology API, so it is directed to the
    accessible node first.

    View full-size slide

  41. @brucel
    Phase 1
    • Modifying Accessible Properties, will
    allow setting accessible properties for a DOM element,
    including accessible relationships.

    View full-size slide

  42. @brucel
    Phase 2
    • Accessible Actions, will allow reacting to user actions
    from assistive technology.

    View full-size slide

  43. @brucel
    Phase 3
    • Virtual Accessibility Nodes, will allow the creation of
    accessibility nodes which are not associated with DOM
    elements.

    View full-size slide

  44. @brucel
    Phase 4
    • Computed Accessibility Tree, will allow reading the
    computed accessible properties for accessibility nodes,
    whether associated with DOM elements or virtual, and
    walking the computed accessibility tree.

    View full-size slide

  45. @brucel
    Why is Phase 4 last?
    “the accessibility tree is not standardized between
    browsers: Each implements accessibility tree
    computation slightly differently. In order for this API to be
    useful, it needs to work consistently across browsers

    We want to take the appropriate time to ensure we can
    agree on the details for how the tree should be computed
    and represented”.

    View full-size slide

  46. @brucel
    Users users users!
    “Compared to the previous three
    phases, accessing the computed
    accessibility tree will have the least
    direct impact on users”

    View full-size slide

  47. @brucel
    Priority of Constituencies
    In case of conflict, consider users over
    authors over implementors over
    specifiers over theoretical purity.

    HTML Design Principles - https://www.w3.org/TR/html-design-principles/

    View full-size slide

  48. Crowd image!!

    View full-size slide

  49. Thanks to
    Alice Boxhall
    (@sundress),
    Denis Boudreau
    (@dboudreau),
    Shwetank Dixit
    (@shwetank).

    View full-size slide

  50. Thank YOU!
    xxx
    @brucel

    View full-size slide