Simple Accessibility Wins for Web Developers

While building websites, accessibility is often not considered early enough or it is often an after-thought. We should design our websites to be used by all people, regardless of their hearing, movement, sight, and cognitive abilities. When a website is unusable or hard to use for some users, then it has failed its purpose. As developers we should do our part in ensuring that we create high quality websites that leave nobody out.

To understand why accessibility is so important, I recommend taking five minutes to watch this video.

Introduction to Web Accessibility and W3C Standards

In this post, we're going to look at some techniques we could use in order to make our user interfaces more accessible. The code samples will use React but they are as applicable to other frontend frameworks as well. In most cases, it will be HTML snippets that can be easily converted to your framework of choice.

Use Semantic HTML

HTML (Hypertext Markup Language) is the language used to build websites and is the ideal starting point for building accessible websites. Using semantic HTML is all about using the correct tag in the correct circumstances.

Let's go over an example to make this a bit practical.
Assuming we're building a navigation bar, and we need to include links to various sections or even other pages. I recently learnt that HTML conveniently provides a nav element specifically for this purpose. The nav element is used to define a section of a page containing navigation links. Therefore, using this specific tag instead of any other, such as a div helps screen readers to skip this content when necessary. You can imagine how tedious it would be if a screen reader has to read each navigation link every time a user navigates to a new page. From this simple example, we can see how a simple fix ends up having a huge impact on the user's experience.

The HTML Elements Reference is a good starting point to learn about all the elements and their usage.

Ensure all Interactive Elements are Navigable via the Keyboard

Your website's users might use different devices to navigate your website, and this could be a mouse, a keyboard or other navigation devices. A common mistake when writing interactive content is only including click event handlers and leaving out keyboard handlers. This makes the content inaccessible to people using alternative devices.

For example, the following React component is non-interactive when accessed with the keyboard:

const BadInteractiveElement = ({ handleSomeAction }) => {
  return <div onClick={handleSomeAction}>Click me!</div>;
};

To fix it, we need to include a keyboard handler too! The first step is to add a keyPress handler function.

const GoodInteractiveElement = ({ handleSomeAction }) => {
  <div onClick={handleSomeAction} onKeyPress={handleKeyPress}>
    Click me!
  </div>;
};

Interactive elements are usually activated via the Enter or Spacebar keys. Pressing one of these keys while focused on the element should have the same effect as clicking on it. This is how we would check if the correct key has been pressed in the handleKeyPress function.

const handleKeyPress = (event) => {
  if (event.key === ' ' || event.key === 'Enter') {
    handleSomeAction();
  }
}

Note that in this example, if we had followed rule #1 and used a button instead of a div for the interactive element, we wouldn't need to include keyboard handlers. The button element is already keyboard-friendly by default and we wouldn't need any additional event handlers for it. This second rule applies only in cases where we are unable to use rule #1.

To learn more about this rule, I recommend taking a look at this excellent article on keyboard accessibility.

Use Alternative Text for Images Effectively

This is a rule you've probably heard about before, but it still seems to be widely misunderstood. Assistive technologies, such as screen readers, read the alternative text in place of the image and it is also displayed in cases where the image does not load.

The alternative text is usually set in the alt attribute in an image tag:

<img src="/assets/american-express.png" alt="American Express" />

Some rules I have learnt over time that I try to follow when writing alternative text for images are:

1. Ensure the alternative text is descriptive, accurate and complete. If two different users access the website, and one sees the image while the other sees the alternative text, they should both have the complete picture (pun intended 😅)
   In short, the alternative text and the image should convey the same information.
2. If the image is purely decorative and does not need any alternative text, use alt="". Every image needs to include an alt attribute. This applies even for images that don't add meaning to the text or images added to make things look nicer.
3. Avoid using terms like image or picture for the alternative text. In most cases, these do not add any meaning.

Additionally, images are not the only non-textual elements in use on the internet. For visual or graphical elements, it's important to consider including a text equivalent.

You can find more detailed scenarios on alternative text in this WebAIM article.

Extra Resources

• The Web Content Accessibility Guidelines is the definitive resource to learn more about web accessibility techniques.
• The WAI-ARIA provides guidelines on making dynamic content, such as single page applications, more accessible.
• If you are using React, the Accessibility Guide in the documentation provides a detailed overview of different techniques to make your React-powered web applications accessible.
• If you are using React and ESLint, adding the eslint-plugin-jsx-a11y tool helps out in finding accessibility violations in your React code as you are writing it. This also enables making such checks when testing your code in Continuous Integration services.

Conclusion

There are many more things to take into consideration when thinking about web accessibility that we can't possibly cover in one post. I hope this provides a good starting point. These simple rules may be the difference between a user having a good experience on your website or having a poor one and feeling left out.

Let's all play our part to ensure the websites we build are usable by everyone regardless of their circumstances or abilities.

Cover image photo by David Travis on Unsplash