Three accessibility skills for devs

Easy to learn skills to get you started with accessibility

29th January 2024

Whether you're already a hot shit developer building the next spotify, or you only just fell out of a coding bootcamp, here are the three technical things that every developer should know to get started with writing more accessible code.

1. Learn to use Firefox Accessibility Inspector

Did you know Firefox has integrated accessibility testing tools? There's no need to install any plugins or add-ons, Firefox comes with an Accessibility Inspector by default. Here's where to find it:

• Go to any webpage on Firefox
• Right click
• Select "Inspect Accessibility Properties"
  (the second option from below )

Firefox context menu

The accessibility inspector contains a lot of useful tools, including automated testing, a colour perception simulator, a visual representation of the tabbing order, and the accessibility tree of the whole page which can be printed to JSON. It's a great tool for a quick colour contrast check, and to inspect element properties in the accessibility tree.

Firefox Accessibility Inspector

Check out → the Firefox Accessibility Inspector documentation to learn more about this useful tool.

2. Learn to navigate by keyboard only

A great website doesn't rely on a mouse for navigation. Ensuring good keyboard navigation can make interacting with your webpage faster and easier for a lot of people. However many developers don't know the keyboard controls for native html elements, so let's change that! Here are the most common keyboard controls:

Note: Not every website is going to implement keyboard navigation in the same way, but this is how native html elements can be interacted with, at least in theory. A good website to try these out on are UK Government websites, for example the → GOV.UK Design Systems webpage

3. Learn to use a screen reader

There is a lot to know about using a screen reader, and a non-disabled developer using a screen reader for development purposes is of course not comparable to usability testing with the experts who use screen readers to get around the web every day.

That being said, I think there is value in understanding that there are many different ways to perceive the same webpage, and if you're a visual user you might easily miss a whole different dimension.

So, to get a first glimpse into a different way to see the world, I'd like you to open a website (ideally something you built yourself), and spend a few minutes exploring it using a screen reader.

How to turn a screen reader on and off on a computer:

Before we get to the controls, let's start with what to do once the screen reader is running: Use tab and shift tab to move between interactive elements. That will already give you a better idea about how a page is structured for screen readers. To read text or other non-interactive elements, you can try clicking on them using the mouse, or check out the links I included below for more info on the keyboard controls for each screen reader. Without further ado, here are the keyboard shortcuts to turn Narrator and VoiceOver on and off:

Summary

Thanks for reading!
Feedback is always welcome: Whether you want to share your thoughts about what you liked, what could be improved, or just want to chat about accessibility, feel free to get in touch!