JavaScript and Accessibility
•Télécharger en tant que PPTX, PDF•
1 j'aime•528 vues
Presented at WordCamp Minneapolis 2016. Learn what kinds of issues you need to think about when writing JavaScript so that it can be accessible to people with disabilities.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (9)
Similaire à JavaScript and Accessibility
Similaire à JavaScript and Accessibility (20)
Plus de Joseph Dolson
Plus de Joseph Dolson (20)
Dernier
Dernier (20)
JavaScript and Accessibility
- 1. JavaScript and Accessibility You can do this. It's fine.
- 2. JavaScript gets a lot of negative press for accessibility:
- 3. JavaScript gets a lot of negative press for accessibility: Why?
- 4. JavaScript is high risk - Great JavaScript is completely accessible. - Bad JavaScript tends to be completely inaccessible. - JavaScript removes a lot of middle ground...
- 5. Accessibility dependencies: - Solid HTML basics - Predictable and controllable interaction - Clear communication of results
- 6. Solid HTML Basics - Use <label> element on inputs - Includes standard controls to trigger action - Uses good semantic structures - Clearly reports results to the user
- 7. Predictable and controllable interaction - Use buttons and inputs to collect data or trigger events - Don't trigger events automatically
- 8. 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
- 9. JavaScript does all of this.
- 10. JavaScript does all of this. ...so where's the problem?
- 11. 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>
- 12. Problems with that example? 1) Unlabeled input 2) Feedback happens on keypress 3) No ARIA live attribute on output 4) Non-semantic HTML structures
- 13. 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?
- 14. 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.
- 17. Write Intelligent JavaScript - Use ARIA (but not too much) - Use HTML Controls - Don't make events automatic - Follow keyboard focus
- 18. Case Study: Improve Accessibility with AJAX
- 19. 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
- 20. The WordPress comment form Example 1: https://github.com/joedolson/inaccessible-ajax-comments Example 2: https://github.com/joedolson/accessible-ajax-comments
- 21. 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
- 22. 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
- 23. 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
- 24. 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?
Notes de l'éditeur
- Example 1: without ARIA, this change makes an improved experience for most users, but breaks it completely for screen reader users. Example 2: With ARIA, this is a major improvement for users with screen readers as well. See diff: only a handful of attributes make this difference.