Building highly accessible, content rich websites in 2024
Providing a highly accessible website experience in 2024 is ethically important and often a legal necessity. It's important that any organisation can provide a highly inclusive experience to its users. Criteria for this are outlined by Web Content Accessibility Guidelines, (WCAG).
This can be achieved by taking a number of practical measures on your website. These can include alternative text for images, support for users of screen readers, ensuring acceptable colour contrast, textual alternatives, font controls and much more. In this post we'll discuss how to incorporate these elements into your site, to ensure a highly accessible website that conforms to the latest WCAG standards.
The benefits – to you and your users – of providing a WCAG conforming website
Improved user experience
Accessibility can improve the user experience for certain types of users, for example people with impaired vision. You'll remove common barriers for these people and give wider access to your information and services.
In many cases improving things for these users makes the user experience for ALL users more straightforward too.
In many countries a minimum level of accessibility is required by law, particularly within the public sector and for certain charities. For example, in England, Scotland and Wales you must comply with The Equality Act 2010.
Inclusivity and diversity
Accessible websites promote equality and equity, enabling you to share information and services with the widest possible audience.
Search engine algorithms such as Google can now recognise accessibility measures. The more accessible your website, the more favourably your content will score. With accessibility measures in place, you will benefit from a higher SEO ranking.
Business reputation and expansion
Making your website accessible shows that your organisation is committed to inclusion and diversity. Showing you are willing to provide for all audiences can enhance your brand image, and help you to reach a wider audience.
How to make your site more accessible
Provide alternative image tags to describe images. People who use screen readers to navigate the web will hear the description, providing useful context. Alt tags can also be used by search engines to understand your content, which can improve your page ranking.
Good colour contrast
Ensure accessible contrast between the foreground and background colours of your website. This ensures your content is clearly legible for all users, but especially for people with impaired vision.
You might also enable users to change the colours across your website to suit their preferences. Options such as high or low contrast, high or low saturation, or inverted colours can improve the experience for people with impaired vision or a Colour Vision Deficiency (colour blindness).
Functionality that allows users to resize the text across your website can assist people with impaired vision.
Your website can be coded with screen readers in mind. Provide screen reader text where appropriate, to help people using assistive technologies.
Users should be able to to navigate the website using only a keyboard, as not everyone can use a mouse.
Links to other content should be clearly and descriptively worded, so the users understands what they'll be getting. For example ‘Explore our services’ is a much clearer than ‘click here’. Some people using screen readers navigate by links only, so this is particularly important for those users.
Transcripts and captions
Include transcripts and captions (sometimes called subtitles) for video media to assist people with impaired hearing.
Accessible forms with meaningful validation
For any forms on your website, make sure it's possible to complete the form without using a mouse to navigate.
If information is entered incorrectly on the form, provide meaningful feedback. For example ‘Your email address must contain the @ symbol, please try again’ is much more informative than ‘something went wrong’.
Your website should be coded using responsive design concepts. This ensures the site is optimised for all devices and screen sizes, from mobile phones through to wide desktops.
A 'mobile first' approach to website design is the concept of providing the ultimate experience for mobile users. You then add more features and functionality for desktop users through the process of ‘progressive enhancement’. This is used in preference to the concept of ‘graceful degradation’, where features are removed from the desktop version of a site to get it to ‘fit’ on a mobile device.
Progressive enhancement ensures that desktop is an enhanced version of the mobile site, rather than mobile being a restricted version of desktop. This is more suited to the way people use the internet now, with majority of web traffic being mobile-driven – often accessed via social media platforms and by users on the go.
ARIA (Accessible Rich Internet Applications) roles
Where possible, the correct semantic HTML elements should be used with appropriate ARIA tags to help with assisted technologies being used by those with disabilities, such as screen readers. This ensures that these technologies interact with the object in a way that is expected, such as scrolling through a slider, or tabbing through a menu.
It is important that the website is correctly using valid HTML markup, such as using ordered headings, lists, paragraphs etc.
How to test your website's accessibility
There are various ways you can test your website to see how it performs, and find suggested ways to improve. Google's in-built browser tool, Lighthouse, provides a score for Performance, SEO, accessibility and general standards. WAVE is another well-known, detailed accessibility test tool.
Accessibility can improve the user experience for certain types of users, for example people with impaired vision. In many cases improving things for these users makes the user experience for ALL users more straightforward too.