This month we had Nicolas Steenhout joining us to talk about "Accessibility: Don't turn off that JavaScript just yet."
The year is 2017, and JavaScript (JS) has never been as ubiquitous. Long gone are the days when in order to be considered accessible, pages had to work flawlessly without scripting. Scripting has also come a long way, and developers are now even leveraging the powers of JavaScript to rewrite content in order to make it more accessible to assistive technologies.
If you develop websites or web-based applications that rely heavily on JavaScript, and you care about making your creations accessible to people with disabilities, be sure to attend this discussion. This presentation will cover some of the issues that can arise from using JavaScript, and how scripting can be used in a way that still ensures accessibility.
A little bit about Nicolas:
- 20 years of involvement in web accessibility
- Expert knowledge of WCAG 2.0, Section 508, WAI ARIA, and he is familiar with a wide range of assistive technologies
- He is bilingual in English and French
- And he has a new podcast called #a11y Rules where he interviews and chats with people in the web accessibility community
Takeaways
Assistive Technologies (AT) include:
- Screen readers
- Keyboard
- Dragon Naturally Speaking
- Sip & puff switch
- Eye tracking
People with disabilities are, by far, the largest minority group on the web. This group includes sighted, keyboard-only users with temporary impairments, including two broken thumbs. Sadly, Nicolas had to deal with that issue last year.
Just because you meet accessibility requirements doesn't always ensure accessibility. Make sure you involve real users with disabilities in your testing process.
Barriers aren't just for people with disabilities. Others can benefit from accessible changes. Nicolas mentioned a church where the pastor printed out the words to his sermon. Not only did it help deaf parishioners, but helped people who were hard of hearing (but not deaf) and himself, because all of his sermons were now in text form and able to be indexed for reference.
97% of web users have JS enabled - https://webaim.org/projects/screenreadersurvey5/#javascript
JS can help increase accessibility:
- Additional information
- Warnings
- Instructions
- Warning for timed responses
- Giving additional time
- Information interpretable as text (e.g. Progress bar - indicate progress in text)
Focusable elements include:
- Links
- Buttons
- Form elements
- Iframe
- Complete list: https://allyjs.io/data-tables/focusable.html
Focus on non-focusable elements:
- To allow keyboard focus for user, use tabindex="0"
- To allow programmatic focus, use tabindex="-1" (so the keyboard ignores it)
Accessible modal window:
- Doesn't appear in normal tab order
- Captures keyboard until window closed
- Sets focus on heading
- Closes with "esc" or close button
- Accessible modal window working example: http://codepen.io/vavroom/pen/NpRLzE
Event handlers:
- Device dependent - Mouse or Keyboard
- Device independent - Mouse and Keyboard and Other means
Event pairing:
- Pair mouse events with nearest keyboard equivalent - mousedown / keydown
- Focus on purpose, not mechanics of action
Dynamic content:
- Can you trigger content with keyboard?
- Is content accessible?
ARIA:
- Accessible, Rich, Internet Applications - A technical spec by the W3C to help increase accessibility of the web, particularly dynamic content and user interfaces
- First rule of ARIA - "Don't use ARIA (unless it is necessary)"
- Bad ARIA is worse than no ARIA
- Use HTML5 semantic markup instead
- There are many ARIA roles, states, regions you can use, if needed
Resources
Slide deck
http://incl.ca/wp-content/uploads/2017/06/accessible-javascript.pdf
YouTube Video
A11Y Talks October 2017 - Nicolas Steenhout - Don't Turn off That Javascript Just Yet
Drupal Accessibility Group
Join the Accessibility group on Drupal.org for hints, tips, discussions, and patch proposals to help make Drupal more inclusive.
Next Month
A11Y Talks - November 29th, 2017 (12pm ET)
Topic: Panel Discussion on All Things A11Y
Next month we will have not one guest…but four guests - Eric Bailey, Helena McCabe, Scott O’Hara, and Scott Vinkle chatting about how they got their start in accessibility and how to get and stay connected to the community. Hope you can join us in November!