JavaScript and Accessibility
24
JavaScript and Accessibility You can do this. It's fine.
-
Upload
joseph-dolson -
Category
Internet
-
view
276 -
download
0
Transcript of JavaScript and Accessibility
JavaScript and AccessibilityYou can do this. It's fine.
JavaScript gets a lot of negative press for accessibility:
JavaScript gets a lot of negative press for accessibility:
Why?
JavaScript is high risk
- Great JavaScript is completely accessible.- Bad JavaScript tends to be completely
inaccessible.- JavaScript removes a lot of middle ground...
Accessibility dependencies:
- Solid HTML basics- Predictable and controllable interaction- Clear communication of results
Solid HTML Basics
- Use <label> element on inputs- Includes standard controls to trigger action- Uses good semantic structures- Clearly reports results to the user
Predictable and controllable interaction
- Use buttons and inputs to collect data or trigger events
- Don't trigger events automatically
Clear communication of results
- Move focus to results if an event is for navigation- Make response regions "live" if an event is
informational- Make sure responses provide meaningful context
JavaScript does all of this.
JavaScript does all of this.
...so where's the problem?
Angular Example: (from W3Schools)<!DOCTYPE html><html lang="en-US"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body>
<div ng-app=""> <p>Name : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1></div>
</body></html>
Problems with that example?
1) Unlabeled input
2) Feedback happens on keypress
3) No ARIA live attribute on output
4) Non-semantic HTML structures
Problems with that example?
1) Unlabeled input
2) Feedback happens on keypress
3) No ARIA live attribute on result
4) Non-semantic HTML structures
Result: inaccessible form.Problem with JavaScript?
Problems with that example?
1) Unlabeled input
2) Feedback happens on keypress
3) No ARIA live attribute on result
4) Non-semantic HTML structures
Result: inaccessible form.Problem with JavaScript?
NO.
JavaScript is accessible...
...if it's used intelligently.
Write Intelligent JavaScript
- Use ARIA (but not too much)- Use HTML Controls- Don't make events automatic- Follow keyboard focus- Look at examples critically
Case Study: Improve Accessibility with AJAX
The WordPress comment form
Why add AJAX?
- The default error page directs to a new screen
- The error page doesn't provide direct access to fixing issues
- A successful comment requires a page refresh
The WordPress comment form
Example 1:
https://github.com/joedolson/inaccessible-ajax-comments
Example 2:
https://github.com/joedolson/accessible-ajax-comments
JavaScript: Improve Accessibility
- Toggle state using aria-pressed or aria-checked attributes
- Manage form validation - Simplify user interfaces by hiding and showing UI
elements- Prevent unnecessary page refreshes and changes of
focus
What do I need to be careful about?
- Mouse dependencies: onMouseOut, onMouseOver, onDblClick
- Keyboard dependencies: onKeyDown, onKeyUp- Automatic changes: onSelect, onChange- Controlling focus- Hidden content- Libraries...
Ensuring Accessibility with JS Libraries
- Know the library deeply- Know what HTML it's rendering- Know whether hidden content is really hidden- Know what controls you're using with it- Know how it handles from the keyboard- Test it.
How do I make MY code accessible?
- What controls are you using?- Is the current state of a multi-state control
available?- Where is focus moving after an event?- Does this event cause the DOM to change?
