Common Accessibility Pitfalls in Web Development

Accessibility is an often‑overlooked, but essential cornerstone of front‑end web development. In web development, 'accessibility' refers to the practice of making websites and web applications more usable (and accessible), particularly for people with disabilities. This includes people with visual, auditory, motor, and cognitive impairments, as well as users who may not have access to a mouse or keyboard.

Ensuring that websites are accessible is important because it allows a wider audience to access and use the information and services we publish on the web. Making our applications and websites accessible can also have numerous benefits for our clients. Google uses accessibility as a key ranking factor for example so good levels of accessibility can improve search engine rankings. It can also increase the reach of marketing efforts, and increase customer satisfaction.

It's worth also bearing in mind that a minimum level of accessibility is often also a legal requirement, and failure to comply with accessibility guidelines can result in legal action.

It's important to note that making a website accessible isn't only about making it useable for people with permanent disabilities. It's important to consider the needs of users who may be experiencing more temporary limitations or age‑related changes to their abilities. example, someone who has a broken arm may have difficulty using a mouse, and someone who is older may have difficulty reading small text or distinguishing certain colours.

Making your applications accessible makes them more useable for everybody, it's really important, and should not be overlooked.

Here's a little list of some of the most common accessibility pitfalls I've come across in web development (and particularly when picking up a project midway through).

1. Not considering Keyboard Access

More people access the web using just a keyboard than you might think. It's not just down to physical impairment either; even I find that often moving around the web is much quicker using the keyboard than reaching for and moving the mouse (or touchpad). It is important to ensure that your website can be navigated using only a keyboard and that it is possible to access everything with it without using a mouse.

In the simplest terms, this involves making sure that all interactive elements on the page can be focused using the tab key, and that all functionality can be accessed using only the keyboard. Naturally, it gets a lot more complicated than just making sure interactive elements have a tabindex attribute and you should be considering keyboard users from the outset, as well as spending time during development moving around your application just using the keyboard.

2. Ignoring Screen Reader Support

If you don't personally need to use assistive technology to access the web, you may not fully appreciate just how important it is to ensure that your application is accessible and readable. There are some good basic first steps that you can take like making sure that all images have descriptive alt text, that your HTML is semantic, that your headings are ordered correctly, and that link text is clear and descriptive.

3. Poor Colour Contrast

Insufficient contrast between text and background colours can make it difficult or impossible for users with visual impairments to read text on a website. It's important to ensure that there is sufficient contrast between text and background colours, especially for large blocks of text and for text that is intended to be read by users with low vision.

4. Using the Wrong HTML Elements

Using the wrong HTML elements (e.g., using a div when a button is more appropriate) can make it difficult for assistive technologies to understand the content and structure of a webpage. Using semantic HTML (using the proper HTML elements for the content they contain) helps screen readers and other assistive technologies understand the structure and meaning of a webpage, and makes it easier for those people using the assistive technologies.

5. Neglecting Mobile Accessibility

It's important to ensure that websites are accessible on mobile devices, which may have different accessibility features and constraints than desktop computers. This includes considering the size of touch targets, the use of mobile‑specific gestures, and the availability of accessibility features such as zoom, dark mode, and high contrast mode.

6. Inaccessible Forms

Forms can be difficult to develop, but they can also be extremely difficult to use for some visitors with disabilities. It's important to ensure that forms are properly labelled, use the appropriate input types (e.g., using a number input for numeric data), and provide clear instructions. Structure and valid markup are really important when it comes to forms.

7. Failing to Provide Captions and Transcripts

Videos and other time‑based media should include captions and transcripts for users who are deaf or hard of hearing. Captions should be synchronized with the audio and should provide a transcript of all spoken content and important sound effects. Transcripts should provide a written version of the audio content.

8. Poorly Implemented Dynamic Content

Dynamic content that is not properly labelled and structured can be difficult for assistive technologies to interpret. It's important to ensure that dynamic content is properly labelled and structured to be accessible to users with disabilities.

9. Not Testing for Accessibility

This one should be obvious. With all the best intentions and hard work in developing a performant, accessible, website or application, proper accessibility testing is essential. This includes manual testing with assistive technologies, automated testing using tools such as aXe, and testing with real users who have disabilities.

10. Ignoring Accessibility Standards

Much like the point above, this should be really obvious, but you' might be surprised just how often I come across work where accessibility standards have simply been ignored altogether.

There are various standards and guidelines for web accessibility, although the Web Content Accessibility Guidelines (WCAG) is the big one. It's important for developers to be familiar with these standards and to follow them to ensure that their websites are accessible to users with disabilities. Ignoring these standards can result in websites that are difficult or impossible for some users to access.

Ignoring accessibility standards also opens your client up to potential legal liability should their website not perform.

The Wrap‑Up

One final thought I want to offer in summary of all of the above: accessibility categorically is not the sole responsibility of the developers putting the website together. Everybody involved in a project should be equally involved in ensuring that the end product is accessible; from designers making sure they use the right colour palette and suitable element sizes, to the end client understanding the visual impacts some accessibility requirements have, to the content creators who are responsible for making sure that the actual content is descriptive and makes sense.