The most common website accessibility mistakes and how to avoid them

When it comes to creating a new website, we can sometimes get caught up in flashy functionality and eye-catching designs, forgetting that the purpose of a website is to serve the needs of our audience. People will look at your website as an extension of your marketing funnel, and in some instances, the end point where they convert into customers. 

To risk sounding trite, to meet the needs of your audience, you need to actually meet the needs of your audience, starting with their accessibility needs. If a user can’t easily interact or navigate their website, it will, at best, create a negative experience and brand resentment, and at worst, cause them to bounce from your website altogether. 

But how do you ensure your website is inclusive, accessible, and fit for purpose? This article dives into some of the common mistakes people make when building a website, and how to avoid them to ensure nobody is left behind. 

Failing to account for accessibility from the start

This is one of the biggest problems when it comes to accessibility, and in many instances is the cause for other mistakes on this list. Accessibility should absolutely be considered right at the start of a web build project, rather than treated as a tick box at the end. Taking the time during the planning phase to consider how people will interact with your website—especially those with accessibility needs—allows you to create the site in the most efficient manner. 

Building accessibility in from the start is also typically cheaper and easier than trying to retrofit it into a build down the line. Of course, if you’re only making modest adjustments to a pre-existing site, rather than building from scratch, that’s an unavoidable reality. In either instance, you can’t view accessibility as one and done—you have to keep working on it throughout the life of your site. 

Inadequate colour contrast

You have spent time creating great content for your website, so presumably you want people to be able to read it. Ensuring that the contrast is in compliance with WCAG means that your copy will be legible to those with visual impairments, and with colour vision deficiencies. 

There are tools online to help you assess the colour contrast of background and foreground colours, which has a recommended minimum of 4.5:1. Working with a designer will also help you create great looking assets that remain accessible to people. 

Relying on colour for navigation

Green means go and red means stop, right? But what about those who have colour vision deficiencies? As with the contrast above, your website design needs to take into account the needs of all users. 

This doesn’t mean you have to abandon coloured buttons, but you shouldn’t use colour as the only way of distinguishing an action. Instructing a user to ‘click on the green button if they agree’ without labelling the green button ‘I agree’ is a poor user experience, so make sure you always label buttons to explain what they do. Equally, you shouldn’t assume that colour explicitly implies a meaning—not everybody would interpret ‘green’ as a colour to symbolise progression, or red to mean stop. Never operate under the belief that something is self-explanatory. 

Not testing for different screen sizes

Increasingly, users are browsing the web on mobile devices and tablets. This means the assumptions we’ve typically made about how people will interact with our websites—on large screens with a mouse and keyboard—are increasingly unreliable. Your websites now need to be responsive to screen size, and function well on all device types. If you don’t, you’re limiting your reach. 

Properly planning for responsive design in the concept phase means you can get creative with how your website scales across screen types. Buck the trend of shifting everything to the single column view, and make something that feels truly native to the platform. But whatever you do, test, test, and test again to make sure that it performs consistently across the board. 

Not accounting for assistive technologies 

Some users require additional technology to navigate their computers. Neglecting features like screen reader compatibility, switch device functionality, or keyboard focus indicators can make your website inaccessible to those users. Screen readers read tables from left to right, top to bottom, which can make content confusing if tables are used for layout purposes, so factor that in when designing. You should also consider magnification tools, high contrast modes, and captions or transcripts on videos to help everyone access the site equally. 

You should further ensure that headings are used in the correct hierarchy and semantically - H1s, H2s, H3s, etc. - as assistive technologies apply meaning and emphasis based on these.

You can get a feel for how screen readers interpret their site using your computer’s built-in narrators. On a Mac, pressing command and F5 starts VoiceOver which reads your screen. Similarly, on Windows, press Windows key + Ctrl + Enter to start Narrator.

Another way to support those with visual impairments is ensuring that alt text on images are applied consistently and effectively.  Alt text helps visually impaired people understand what the image shows so they don't miss important information being depicted in images.They also help contextualise the elements they’re navigating through on your site using a screen reader. Furthermore, it can help your website be accessible to those on slow internet connections. People with unreliable access to the internet, or data caps might disable images, and your alt text will ensure that they are able to get the context of the imagery. 

Alt text also improves the SEO of a website by providing image descriptions to search crawlers, helping your images get indexed properly and increase your keyword count. 

There really is no reason not to be adding alt text to every image on your website.

Inaccessible PDFs

It’s great putting the work in to make your website accessible, but what about downloads? If you’re including important information in files such as PDFs, these need to be equally accessible. Your approach to PDFs should follow the same best-practice guidelines as your website, using alt text as appropriate, and clear hierarchical headers. As with web content, the document should have sufficient colour contrast between the text and the background. Avoid embedding text as an image, as it can’t be read by screen readers or searched by users, and long PDFs should include bookmarks to aid with navigation. 

Remember, the goal of any accessibility work is to ensure that your content is accessible to everyone. 

Not auditing your website to ensure continued accessibility 

Accessibility, much like marketing, isn’t a one and done affair. As we mentioned above, once you’ve built your website (adhering to all accessibility best practices, we’re sure) you’ll need to do regular audits to ensure that those practices are being followed by the rest of the team. If you update pages, or create and upload new content, you should be checking that everything remains accessible to your audiences. Is your team adding alt text to relevant images? Are they using headings appropriately? Have you started creating white papers without checking that the PDF is compatible with screen readers? These are all questions you have to be asking, and regular audits will provide you with the answers, and in doing so, ensure you’re providing an inclusive and user-friendly experience to your audience and potential customers.