Accessibility Answers: How Do I Handle JavaScript and Accessibility
When I give presentations on accessibility, I often get one or two questions I’ve fielded before. I’ve collected a handful for an ongoing series of posts with my answers. I hope it helps you understand accessibility better.
How do I handle javascript and accessibility?
Like everything else. It’s that easy. You can follow the same accessibility principles, making your web pages or applications perceivable, operable, understandable and robust. JavaScript changes nothing in that regard. Accessibility and JavaScript get a bad reputation because of some misconceptions. First, most people who use screen readers typically have JavaScript enabled, not the other way around. Also, all modern accessibility guidelines allow you to require JavaScript, so long as the scripted content works within the guidelines. WCAG 1.0 required interfaces to work properly without scripting enabled, but this isn’t the case anymore.
Further reading: Accessible JavaScript.
That said, you should keep these things in mind:
- Use semantic HTML as your base. Employ native controls that work well with all devices, like
<a>,<button>or<input>. - Follow progressive enhancement, and use JavaScript to aid in the functionality of your interfaces. Whenever possible, try to make your interfaces work at a basic level minus JavaScript. Think of it like that old, beat-up car that just never quits, no matter the conditions. We all appreciate cars like that.
- Use device dependent event handlers: onFocus, onBlur, onSubmit, onClick. These will work with a variety of devices and input methods.
- Implement ARIA where applicable to communicate context, like change of state, to assistive technology.
Further reading: Modern Web Accessibility with JavaScript & WAI-ARIA.
Further reading: Practical ARIA Examples.
Further watching: A Web for Everybody.
Follow the series Accessibility Answers. Ask me a question via my contact page or Twiter.
Image by rawpixel.