Accessibility Checklist that Will Make You a More "Responsible" Web Developer

Sep 18, 2021

What is accessibility?

Accessibility in web development means that people with disabilities and impairments can use the website or application. It opens up the website to a more diverse audience.

There are certain responsibilities that come with building things for the web. As a developer, you should be able to make sure the technology you are developing is usable by everyone regardless of their impairments. Generally speaking, when we hear the word "accessibility", we automatically think about "screen readers" but accessibility optimizations go beyond just making your website screen reader-friendly. The goal of this guide is to provide a comprehensive checklist that can be adhered to in order to make an all-around accessible website.

1. Use accessible text alternatives

You must use a text alternative whenever the information about the purpose of the component is conveyed visually. This means, for example, if you are using a hamburger made using three divs inside a parent div or an image/icon inside a button, make sure to label the parent div or button using `aria-label`.

For a component that displays an image, always provide an alternative text using the `alt` attribute.

2. Use aria roles and attributes where appropriate

ARIA roles and attributes let a user with disabilities know what certain elements or groups of elements are for. Common elements that can benefit from having an aria role are forms, lists and list elements that indicate menu items, header, main, footer, etc.

Header, Main, Footer

In most browsers, headers, main, and footers are automatically assigned the default roles of `banner`, `main`, and `contentinfo` respectively, but it's always a good idea to manually do this.

<header role="banner">
  ...
</header>

<main role="main">
  ...
</main>

<footer role="contentinfo">
  ...
</footer>

Navigation

For navigation components, here is how you can use aria roles and attributes:

<nav role="navigation">
  
  <ul role="menubar">
    <li role="menuitem"><a href="#">Home</a></li>
    <li role="menuitem"><a href="#">Contact</a></li>
    <li role="menuitem">
      <a href="#">About</a>
      <ul role="menu" aria-hidden="true">
        <li role="menuitem"><a href="#">Our story</a></li>
        <li role="menuitem"><a href="#">Our vision</a></li>
      </ul>
    </li>
  </ul>
</nav>

Form

A regular form element and its children can use a lot of aria roles and attributes:

<h2 id="form-label">Search our knowledge base</h2>
<form role="search" aria-labelledby="form-label">
  <input type="text" placeholder="Enter search term" aria-label="Enter search term" required />
  <button type="submit" aria-label="Search">
    <img src="icon-search.svg" alt="Search icon" />
  </button>
</form>

Many other elements and groups of elements can and should use aria roles and labels. Here's a detailed ARIA cheatsheet and a list of ARIA states and properties.

3. Be mindful of animations

Many modern devices can disable or reduce animations but it's up to the developer whether or not to respect that request from the device. For elements that have animations or transitions applied to them, add a separate `prefers-reduced-motion: reduce` media query to honor that request.

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
    transition: none;
  }
}

4. Use `tabindex`

The `tabindex` attribute allows elements to be focused using the keyboard. To give an example why this is important, if you have a custom select component not built using the `select` element itself, users may not be able to press tab to focus that component from a preceding input component. Built-in interactive elements like input, select, button, etc. have tabindex by default but if you want to change their order you can always add it manually.

Types of `tabindex`

A `tabindex=0` is used to keep the element in the natural order of the HTML document.
A tabindex of more than 0 is used to change the natural order.
A `tabindex=-1` is used when the element is not reachable by the keyboard but can be focused programmatically.

If you're using a custom UI component, eg. a custom select box, you probably just need `tabindex=0` or `tabindex=-1` depending on whether or not you want to let the user focus the element using the keyboard.

Also, always make sure to indicate focus for elements, either by using the default focus outline or a custom one.

5. Ensure contrast between text and its background

This is a very common accessibility requirement that many developers tend to overlook to accommodate a design, but both designers and developers should ensure that there is enough contrast ratio between text and its background. You can use this color contrast checker as a reference.

6. Test your site using accessibility tools

There are many accessibility tools out there with the most common being Google Lighthouse. Always aim for a 100% accessibility score and also use multiple tools to make sure your website meets various standards. Axe and Wave have very easy-to-use Chrome extensions to run accessibility tests.

7. Check these resources

1. Here is an accessibility dos and don'ts by gov.uk

2. Accessible to all by web.dev

Final thoughts

As web developers, we can quickly cook up a website for a client without any regards to accessibility and usability, but we can also make sure people can actually use the website I am building and the fact that I am taking the extra time to make it accessible is making an impact in someone's life. This alone I think is a big enough reason for me to invest my time in making sure whatever I am building is accessible to all.