Keep your Javascript accessible

Relying heavily on Javascript can damage your app's accessibility, making it harder for users with assistive technology to find their way around.

Hiding things on screen does not necessarily hide them from screen readers.

If you apply an event listener to something that wouldn't normally have an action associated with it, a user who doesn't use the mouse might struggle to trigger it.

Government digital services must be accessible, and it's the entire team's responsibility to make sure this is considered.

Javascript should enhance usability

Don't use Javascript for the sake of it.

It is possible to code a web page that has very little content apart from a Javascript file.

Once the user fully downloads the web page, the Javascript is responsible for loading and displaying the content. Some modern web apps like Facebook work this way.

However, these kinds of apps are less usable for people on slower connections and older devices. There is generally no need for this kind of extreme use of Javascript.

Accessibility is usability

If you app is not accessible, it is likely to be less usable for everyone. Heavy use of Javascript often means your app will take longer to load, since it needs to download a Javascript file to become usable.

It may break if that file doesn't fully download, or result in a poor experience for users on slow connections.

Use the principle of progressive enhancement. Javascript should only enhance what's already there. It shouldn't be needed for the app to work at all.

Accessibility tips

1. Only use Javascript to meet a user need. Don't use it for its own sake.
2. Only attach event listeners to things that the user would expect to do something, like <button> and <a> tags.
3. Test your app with a screen reader. Macs have the Voiceover screen reader built in.
4. Try turning off Javascript and seeing how your app behaves. Does it still make sense?