The goal of digital accessibility is to make content more useful for people with disabilities, and in most cases, the best way to do that is to code websites with simple HTML. However, that’s not always practical: The modern internet thrives on interactivity, and while HTML has come a long way, it has limitations.
JavaScript is a programming language that supports interactive web content. It’s widely supported by web browsers, and while it has a mixed reputation in some circles (just ask a developer for their opinion of JavaScript), it’s still the best way to add interactive elements.
So, does JavaScript make a site less accessible? No — in fact, in a 2021 survey performed by WebAIM (Web Accessibility in Mind), 99.4% of screen reader users said that they browsed the web with JavaScript enabled. With that said, you’ll need to consider the experiences of users with disabilities when deciding whether to use JavaScript. Here are a few considerations to keep in mind.
JavaScript is often overused, which can lead to accessibility concerns
JavaScript supports some features that aren’t possible with native HTML. For example, JavaScript can warn users that time limits are about to expire, improving the on-page experience. The World Wide Web Consortium provides a resource with examples of accessible time limit scripts.
However, some developers use JavaScript by default, which leads to problems. Screen readers and other assistive technologies work well with native HTML, but complex JavaScript implementations can create barriers. The best practice is to use native HTML wherever possible, but you don’t need to avoid JavaScript entirely — you’ll just need to be aware of how people with disabilities will experience your content.
Fortunately, there’s help. The Web Content Accessibility Guidelines (WCAG) are the consensus standard for digital accessibility. Here are several WCAG success criteria (SC) that are especially applicable to JavaScript usage.
WCAG SC 3.2.2, “On Input”
Here’s the full text of this success criterion:
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Content must be predictable to be accessible. If your JavaScript changes the content in a major way — for instance, by moving the user’s focus automatically — you’ll need to inform users of the change. By providing that context, you’ll help users understand how to use the feature.
WCAG SC 2.2.1, “Timing Adjustable"
This guideline requires websites to give users control over events that have time limits. Users should be able to turn off, adjust, or extend time limits unless it is essential.
Some JavaScript features may change content without giving users any control — in most cases, that’s a problem. However, as discussed above, JavaScript can also be used to present users with time limit notifications, which can improve accessibility.
WCAG SC 2.1.2, “No Keyboard Trap”
Here’s the full text of this guideline:
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.
JavaScript is powerful, and some scripts may prevent users from moving their keyboard focus. The blur and keypress events can override the expected behavior of elements — and if the user doesn’t understand what’s happening, that’s a major concern.
Remember, many people browse the web without a mouse — keyboard accessibility is a fundamental part of web design.
Related: Why Keyboard Traps Are One of the Most Frustrating Accessibility Issues
Tips for Making JavaScript More Accessible
These quick tips can help you decide whether to use JavaScript and avoid some of the common accessibility barriers that affect some implementations.
- Try to make sure your content works with JavaScript disabled.
- Provide an alternative to JavaScript wherever possible.
- Test your content frequently. Access your web page with a keyboard alone; does everything work as expected?
- If JavaScript cannot work without a mouse (for instance, if you’re coding a video game), inform users right away.
You’ll need to be prepared to address every JavaScript implementation individually and find creative solutions for accessibility issues. To discuss your JavaScript implementation with an expert, contact the Bureau of Internet Accessibility and schedule a consultation.
