JavaScript and Accessibility: Don’t blame the language

Presented By
Everett Zufelt (@ezufelt)
Director of Technology
About me
Everett Zufelt
Director of Technology

Profile

Everett Zufelt works as Director of Technology at Myplanet. Everett is passionate about team building, and developing the skills and abilities of those with whom he works. Everett holds PMI-ACP, CSM, and Acquia Grand Master certifications.

In the past, Everett was the Drupal Core Accessibility Maintainer, and was an Invited Expert to the W3C HTML Working Group, where he participated in the HTML Accessibility Task Force.

Topics

  1. Imagine if...
  2. Myths About Accessibility
  3. The Truth About Accessibility
  4. Refresher on Affordances
  5. JavaScript’s Role on the Web

Topics (cont’d)

  1. HTML > DOM > Accessibility API
  2. Fixing the <div> Problem
  3. Transitions and Single Page Apps
  4. Complex UI Components
  5. Working Together Toward Inclusivity

Imagine if...

  • You were referred to a popular social media platform, and couldn’t register
  • You spent time browsing and adding items to your cart, and could not Checkout
  • You logged in to an app for your job, and couldn’t find any of the buttons
  • You tried to book a hotel room, and couldn’t select a check-in date
  • You want to contribute to project planning, and cannot reorder tasks in the backlog

Myths About Accessibility

  • Persons with disabilities don’t use my web application
  • Screen-reader users disable JavaScript
  • Accessibility will interfere with the user experience and designers don’t like it
  • Our web application is accessible (but, we’ve never tested it)
  • Nobody in my industry has been taken to court
  • JavaScript is not accessible

6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1]

WCAG 1.0 (1998) - https://www.w3.org/TR/WCAG20/

The Truth About Accessibility

  • Accessibility is a Human Right
  • About 15% of the world’s population lives with some form of disability, of whom 2-4% experience significant difficulties in functioning (http://www.who.int/disabilities/world_report/2011/report/en/)
  • Accessibility doesn’t interfere with good design (good accessibility is good design)
  • Making a web application accessible is easy to start
  • JavaScript is accessible!

Less than 75% of developers know more than the basics about JavaScript accessibility

https://twitter.com/smashingmag/status/894844798456266752

Refresher on Affordances

Interface designers use affordances all the time. They have to. Unlike physical objects - which often have affordances based on their size, shape and weight - web and mobile interfaces must gain all of their affordance through design.

https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/

A Few Important Affordances

  • Explicit - Click here!
  • Pattern - a word or phrase with a downwards arrow beside it usually expands into a drop-down
  • Hidden - an element’s affordance isn’t revealed until the user has taken some action to activate a hint
  • Negative - signal that a UI element does not afford any capabilities at the moment. Most commonly, this is achieved by graying out the element
https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/

JavaScript’s Role on the Web

  • JavaScript allows web application developers to create dynamic user experiences, that do not require loading a new "page" of content when users interact with an application
  • JavaScript, as a programming language, is not to blame for issues with accessibility!

HTML > DOM > Accessibility API

HTML is the World Wide Web’s core markup language. Originally, HTML was primarily designed as a language for semantically describing scientific documents. Its general design, however, has enabled it to be adapted, over the subsequent years, to describe a number of other types of documents and even applications.

https://www.w3.org/TR/html51/introduction.html#introduction

HTML > DOM > Accessibility API

With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model...

https://www.w3.org/TR/DOM-Level-2-Core/introduction.html

HTML > DOM > Accessibility API

Developers can now re-purpose HTML elements into UI components not previously defined in HTML. For example, Javascript can be used with CSS to modify a <div> element based on user interactions to make it look and behave like a popup menu. Unfortunately, the <div> element does not provide the author with a vehicle to add semantic metadata that can be exposed through the DOM and mapped to Accessibility APIs.

https://www.w3.org/TR/core-aam-1.1/

Fixing the <div> Problem

  • We need to add meaning, <div> carries no meaning of its own
  • WAI-ARIA (Accessible Rich Internet Applications) provides meaning

Transitions and Single Page Apps

  • Great work by Expedia on audible negative affordances!
  • Getting flight information... Departure results now sorted by price (lowest).
  • Filtering for stops... Results now filtered.

WAI-ARIA Live Regions

In the past, a web page change could only be spoken in entirety which often annoyed a user, or by speaking very little to nothing, making some or all information inaccessible... ARIA live regions fill this gap and provide suggestions to screen readers regarding whether and how to interrupt users with a change.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Complex UI Components

  • DrupalCon Nashville menu - cannot discover / open sub-menus
  • Mass.gov - Can discover and navigate sub-menus
  • Hotels.com search suggestions - cannot discover suggestions
  • Expedia.ca - Can discover suggestions
  • Aeroplan hotel search - cannot type date, hard to find calendar
  • Hilton date picker - easy to discover calendar with instructions
  • Volunteers?

JavaScript is not to blame!

Working Together Toward Inclusivity

  • Many component libraries and framework communities support accessibility. Get involved, learn, and contribute!
  • Angular - https://docs.angularjs.org/guide/accessibility
  • Bootstrap - https://getbootstrap.com/docs/4.0/getting-started/accessibility/
  • Drupal - https://www.drupal.org/about/features/accessibility
  • React - https://facebook.github.io/react/docs/accessibility.html