Q&A: How to improve your website's accessibility

What do we mean when we talk about website accessibility?

To put it simply, it’s about making our web-based information and services usable by as broad an audience as possible – with the understanding that different people access the web in different ways.

In the UK, roughly 20% of people have some kind of long-term access need. This means they might not be a visual user, and access the web instead through audio using screen-reader software, voice control, or a keyboard-like device.

But accessibility isn’t just about people with disabilities – an inclusive, accessible design also aids people with temporary or situational impairments. This could be anything from feeding a child and so only having one arm free, to being in a noisy environment where you can’t hear a video.

It would be impossible to cater to every individual’s needs, so what we have to do is work to make our content and our services as accessible as possible by following established best practices and guidelines. Accessibility is a continuous journey, and there are always improvements which can be made.

What are the business and user benefits of improving website accessibility?

The greatest and most obvious benefit is increasing user engagement and reducing bouncing – which is when people leave the website without fully engaging. Reducing frustrations for our website’s visitors means that they’re more likely to finish processes such as buying products and less likely to go elsewhere instead! Increasing accessibility improves the user experience for everyone by removing unnecessary hurdles and streamlining processes.

There’s also benefits to your SEO (search engine optimisation). A lot of accessibility practices encourage the use of semantic HTML (the code that is used to make a webpage) as it is descriptive, making your webpages more clearly structured and better sign posted. This not only helps screen-readers and visual navigation, it also highlights the relevance of your content for search engine spiders (software that indexes websites for search terms) and makes it easier for users to find you.

Finally, users should never be excluded because of their abilities. If inclusivity is one of your brand values, then accessibility should be a high priority.

What are the qualities that make a website accessible?

The World Wide Web Consortium (W3C) has published a set of industry standard guidelines under their Web Accessibility Initiative (WAI), known as the Web Content Accessibility Guidelines (or WCAG). They are currently on Version 2.1, which was made a recommendation in 2018.

These guidelines form the basis for legislation around the world, and there are three levels of compliance – A is the baseline, AA the most commonly followed, and AAA the most stringent. They centre around four principles:

• Perceivable. Users must be able to perceive your content using one or more senses – so for example, include text alternatives for rich or time-based media such as images, video, animation or sound.
• Operable. Users must be able to control the user interface elements of your website. This includes making it keyboard accessible, avoiding content that could lead to seizures in photosensitive users, and ensuring that any time restrictions (such as in ticket booking) provide enough time for users to complete their tasks using assistive technologies.
• Understandable. Users must be able to understand your content. Is it readable? Can you use simpler language? Does the interface work in predictable ways? Do you follow common practices for navigation and forms? Can users go back and correct mistakes?
• Robust. This is about using established web standards to maximise the compatibility of your website and its content with a wide variety of software and devices – including ones that don’t exist yet! If web pages and content are written to specific standards, future devices and software will also be written to those standards and so it will help avoid issues with operability.

It’s important to give plenty of consideration to how your website will work with assistive devices and software, and don’t make any assumptions about how users may access or use your website. As a baseline for content strategy you should ensure that text is accessible and digestible, and that you have image and rich media alternatives.

How can we check the accessibility of our website?

There are various auditing tools and checkers out there, though they do tend to cover the more technical and measurable aspects of accessibility. WAVE is a tool which checks for issues and will produce a list of errors, warnings and notes for you to check – and it’s available both as a web-based tool and a browser extension. Most browsers will also have their own built-in tools with similar functions, including breaking down the document accessibility tree to show you what texts, hints and information is available to assistive technology. There are also simulator tools available which give you an idea of what it’s like to use your website with a range of visual impairments such as restricted vision and colour-blindness.

You can begin to test for accessibility yourself by trying out a screen-reader, attempting to navigate your website using just a keyboard, using different devices and software than you normally would, or bumping up the text size to reduce the field of vision. This is a great way to challenge your assumptions and understand the difficulties that some users may face.

It's also a good idea to do some user-testing, getting experienced users of assistive technology to look at your website. They will likely have a variety of different needs, and find issues or try to do things in ways that you hadn’t considered yourself.

What are the best first steps to making my website accessible?

It’s always going to be much easier to take an accessible approach to building your website from the start, rather than trying to fix it at a later date. It’ll be cheaper, more consistent, and will encourage good design practice all round. However, there are some key areas to focus on if you’re making improvements to a current site:

Content

Is your text digestible and easy to read, with good colour contrast? Do your site, processes, interactions and forms have a clear and understandable flow?

Make sure that your site and pages are flexible for resizing text and zooming in. Don’t rely solely on colour to show the state of something – such as green/red for on/off.

Are there any complicated components such as dropdown boxes that might be difficult to navigate with a screen-reader?

If you have dynamic content, such as live text or updating search results, make sure non-sighted users will be alerted to the changes in content.

Media

A very common addition is alternative or ‘alt’ text, which is when you provide a description or text alternative to an image to provide non-visual users with rich content. This is important for any images which contain text, as they cannot otherwise be read by a screen-reader. However, if the image is purely decorative or adjacent to a caption that shares or describes the purpose of the image, then there’s no point in repeating it. Essentially, ask yourself “What would I find useful if I couldn’t see this image?”.

Avoid auto-playing video and audio, as this can drown out the speech from screen-readers and make it very difficult to find out where it’s coming from and turn it off.

Navigation

Make sure any link text is descriptive, not just “click here”. A common function of screen readers is calling up a list of all the links on a page, and if the text doesn’t say what it links to then it isn’t useful.

Do your pages and content have clear headings to help show their structure and hierarchy? This is really helpful for people using screen-readers as they produce an outline of pages based on the headings.

Forms

Make sure forms are properly labelled, explaining what each field is and what is required in it. Give reassurance and clear feedback on expected input, such as password requirements, and try to avoid making fields mandatory.

For multi-part forms, it is good to have clearly labelled pages alongside a progress bar to make it more digestible. Allow people to go backwards to correct mistakes to ensure that form submissions are successful.

Your initial focus should be on your key user journeys – such as the basket and checkout process for retailers. Give users plenty of choice and options, so that they can use your website in a way that works best for them. Test early, test often, and allow people to get in touch with you easily if they find any accessibility issues.

What website builders are easy to adjust for accessibility?

For a user coming to your website, it needn’t make a huge difference what content management system you’re using, as long as you can tailor and edit the markup. For example, if you’re using WordPress, ensure that your theme has a clear structure and hierarchy, and that you can update it to avoid accessibility issues.

Where can I find out more?

• The WCAG guidelines themselves are a little dry, but there are plenty of explanations and articles which break them down for you.
• WAVE has an evaluation tool that is free to use to check your website.
• AbilityNet offer training and support around digital accessibility.
• TetraLogical provide articles, information and advice.
• Gov.uk also have well-written and digestible guidelines for accessibility, particularly for public-sector bodies.

If you want to contribute to the Chamber blog, contact us on hannah@brightonchamber.co.uk