It's more necessary than ever to have an accessible website. In addition to the ethical advantage, being compliant helps you to avoid legal issues from industry boards, such as Public Sector websites coming under tighter regulations from September 2019. Having an accessible website also creates a competitive advantage by enabling more people to view your site and complete their desired goal.
Accessibility Best Practices: 2020 Guide
For many websites in 2020, fully accessible websites are far from the norm. To get you started, we’ve highlighted actionable points every business needs to consider. We've also provided some links to handy tools that remove the need for a developer when auditing a site.
If you don't have the time to learn about accessibility, our experts can provide an accessibility audit and jump-start your compliance. Let us know why you're interested in a review on our contact page.
What is an accessible website, and what does it encompass?
A perfectly accessible website would mean that anybody could reasonably use the website.
Examples of ‘anybody’ include:
- Somebody using assistive technology such as a screen reader
- Somebody on mobile with a slow internet connection
- Somebody who can only use one hand because of a temporary injury
All of these users should be able to interact with your website with the same success a mouse and keyboard user would achieve when sat at a desk in a well-lit office.
'Reasonably use' means they should be able to carry out the necessary actions to interact with a service under any predictable circumstances. While accessibility is about enabling more people to use your service in different situations, it doesn't need to extend to being able to use your website in a context that doesn't make sense. For example, it might not be reasonable (depending on context) to create an equally accessible experience on very old browsers or devices that aren’t used very often by your user base.
Accessibility 101: The Basics
Accessibility is a large topic. To help you become compliant we've covered the essentials every website should be implementing.
Navigate this article using the following links, or keep scrolling.
Design considerations for accessibility
Technical considerations for accessibility
Content and data considerations for accessibility
Finally, common accessibility mistakes & next steps
Design considerations for accessibility
Colour contrast
Although your website appears to be easy to read, there is a large subset of people who might really struggle to use it due to vision problems.
Maintaining a strong colour contrast is one way to allow users with visual impairments to access your site. Ensuring your website's text has sufficient colour contrast isn’t just essential for users with vision problems (although these users probably make up a surprising percentage of your user base). Ensuring your website meets colour contrast standards means your website is much easier for everybody to read.
Depending on the kind of website you have, the minimum contrast requirements change. We recommend going for the minimum of WCAG AA compliance if you aren’t sure where to begin. At the time of writing this guide, the minimum requirement is a contrast ratio of 4.5:1.
There is a tool provided to check colour contrast at the end of this section.
Read more on Web Content Accessibility Guidelines (WCAG).
Text and fonts
What’s easily readable in one situation can dramatically shift in a new environment. A website that looks great at your desk with good lighting can be rendered very differently when viewing it on your mobile while walking to a bus stop on a sunny day!
Navigate through your website and identify where the following attributes are used on your website. Then ask yourself if they meet the accessibility criteria and indicators listed along side.
1. Text displayed over images
Is there a clear contrast between the image and the text? Remember that something that is just about readable to you might not be for many others.
Is the text rendered in HTML or baked into the image? Screen readers can only read text provided in HTML.
2. Font sizes
Are your chosen fonts too small and/or thin? While font sizes can vary, we generally recommend not going below 12px.
Does your text resize appropriately (get bigger) when you zoom in on the browser? If not, then it’s a hint that your site isn’t appropriately set up to cater for users with vision difficulties who need to zoom in to view text.
3. Capital case
Excessive use of capital case makes the content harder to scan. If you have more than a few words capitalised then consider how easy it is for users to read, particularly users with dyslexia.4. Icons without text
Icons are so difficult to get right; you can now hire icon specialists. To be compliant ensure there is accompanying text or explanation for what the icon represents.5. Technical or sales copy (text)
Copy full of industry terms when not presented in an academic context can come across as jargon. In some cases, excessive descriptors or slick marketing terms can be seen as jargon and damage the readability of text.6. PDFs or downloads
Can screen readers access the text in the PDF?Is it clear the user must download and open something to access the text? A fully accessible version should be always provided.
7. Text links
Do text links blend in with surrounding copy? Text links are not accessible if there is inadequate differentiation between the text link and regular text surrounding it. It must be clear what is clickable, when users should click on it, and where it will take them.
Animation and carousels
Who enjoys autoplaying videos and carousels which move to the next slide too fast? Nobody!
Alongside being bad performance-wise, having too much movement on your website can be distracting at best, and disorienting and impossible to use at worst.
Navigate through your website while asking yourself the following questions.
- Is there an option to pause or stop any auto-playing animations, carousels or videos on the page?
- Do you have videos or sound which play automatically while the page is loading?
- Does the animation or unnecessary movement on your website slow anything down? It may be obscuring content on the page or make the page take significantly longer to load.
If the answer is yes to any of the above, consider alternatives which give more control to the user.
Tools to get started with accessible design
NoCoffee - a browser add-on which simulates what your website would look like to users with vision problems.
The BBC website viewed in good lighting with no visual impairment.
Comparison of the BBC website with the most common form of colour blindness selected and mild blurriness of vision.
WebAIM - If you know which AA level you need to work to, then you can use this website to check the colour contrast of your text on backgrounds.
WebAim showing the contrast between two hex colour codes.
Technical considerations for accessibility
There are many ways to navigate the web in 2020, from watches to kiosks. Your website must work for as many use cases as possible to achieve maximum audience reach.
Keyboard navigation
Keyboard navigation allows users to scroll up and down pages and select elements to interact with while only using a keyboard.
Many users must, or simply prefer, to use their keyboards to navigate the web. Tabindex allows keyboards to navigate your site in a logical manner. Ensure tabindex is set up and add useful features like ‘skip to content’ links to speed up navigation.
Online forms must be marked up correctly for keyboards, ensuring the right control is associated with the right label.
Touch screens
Do you have any elements that don’t work unless you are using a mouse or the element can be hovered over? If so, it’s time for a rethink as you mobile and tablet users are missing out. In addition, interactive elements that are less than 44px by 44px wide are difficult to interact with via touch so ensure your buttons and features are bigger than 44px.
Multimedia
Multimedia encompasses text, image, video, animations, and interactive media.
Multimedia content can enhance a user's experience, but it can also hinder it. Audit your site using the following considerations.
1. Text embedded within images
Embedding text stops users with screen readers being able to read your text. It is also bad for SEO if no text or alt text is available.2. Unoptimised images
Improperly sized and compressed images can lead to multiple seconds worth of unnecessary load time.3. Video or audio content without transcripts
By not providing a transcript, you are locking out hearing impaired users, along with anyone who doesn’t want to use the sound on their device (eg. no headphones on a bus).4. Auto-play multimedia
Users may be using data rather than their home wifi. Auto playing can therefore elicit a negative response when a user realises it is wasting their data.
Evaluate if auto-play can be triggered on desktop only. Users are more likely to be using wifi on a computer.
Tools to get started with technical accessibility
tinyPNG - If you don’t have too many images to compress, you can use this drag and drop image compression tool to make some quick savings.
The Tiny PNG interface when images have been processed.
Content and data considerations for accessibility
Ethical data collection
Do you need that information?
People's personal data is very valuable. If your website collects user data through forms, consider whether the information you are asking for is essential to fulfilling what the user needs.
You must also consider if the fields are representative of all of your users, regardless of social or situational factors.
Scenarios
- Unnecessary gender fields. Do you need to know what your user’s gender is? Doing so will alienate any non-cisgendered potential users.
- Naming conventions. Many locations throughout the world use first and last names differently. This leads to confusion for the user when confronted with these two fields. It also sometimes means that they will have to edit their name to fit your system. Consider alternatives such as asking instead for ‘Full name’ and ‘Nickname’.
- Formatting errors. International forms that require USA formatted Zip Codes can prevent users from submitting a form.
- Verification data. Payment data is sometimes requested to verify identity. Is this the best method to verify or can you use something less personal?
If there is information you want but don’t need, denote that it is optional. When you do ask for information, explain why it’s being collected.
Will that information always be relevant?
If you collect data about a user, always give them the ability to change it in the future. Not allowing users to change the information entered can range from mild annoyance (someone changes their name after getting married) to very upsetting (someone getting mother's day marketing emails after their mother has passed away).
Common accessibility mistakes to address first
Here are a few of the most common mistakes we regularly see. Get started by reviewing your website for these mistakes.
- Not setting alt text correctly on images. If it’s a background image or doesn’t add much value then you can either skip alt text or make this clear. However, remember alt text has an impact on SEO. Similarly, if the image does add useful information, give it an appropriate alt tag, rather than “header image” or “logo”.
- Using a text colour that isn't accessible. I see this mistake with brands that use blue or orange heavily, so check your website extra carefully if your brand features these colours.
- Auto-playing carousels. The hidden content on carousels lowers its discoverability. The auto-play feature also disorients users who are browsing quickly or are slow readers.
- Text over images with no contrast between. Images can have bright, inconsistent colours which make areas of the overlaid text hard to read. Ensure images are a contrasting colour, or have a filter over them to make the text stand out.
- Asking for information that is not relevant or needed. Unnecessary data exchanges can add friction for users and cause them to abandon the task. Remove any fields that are not essential.
- Constant pop-ups. Enter your site in incognito and count how many pop-ups you encounter. Cookies, email subscribe, chat bot, discount offers and more can be frustrating and disruptive. Use this feature sparingly and with appropriate triggers.
Next steps
Alongside your analysis you can run tools on your site to highlight potential accessibility issues. Lighthouse reports provide a quick baseline review of your website's accessibility.
For a more complete review, our UX and accessibility team can provide you with an audit of your current experiential and legal compliance. You can then choose to implement fixes your self, or to continue working with us and benefit from experts who have worked with hundreds of websites across the public sector, commerce, booking systems, membership websites and more.
Tell us about your accessibility concerns on our contact page.
