Web accessibility

A website is accessible when all people, including disabled people, can use it.

If you're publishing content on the web, you should meet accessibility standards. These standards are outlined in the Web Content Accessibility Guidelines version 2.2 (WCAG 2.2).

There are three levels of compliance:

• A
• AA
• AAA (the highest level).

According to the Disability Discrimination Act 1992 and the UN Convention on the Rights of Persons with Disabilities, we need to meet a minimum level of AA.

Our content should be accessible to everyone, including to people with:

• visual impairments
• motor disabilities
• hearing impairments
• cognitive impairments
• learning difficulties.

Beyond user experience, following good web accessibility practices can improve site SEO, speed and performance across a wider range of devices.

Accessible content also helps us to better engage with users, including people from all over the world. By following best practice, we make our content accessible to people:

• in remote/rural areas
• with older browsers or devices
• with unreliable or slow internet connections.

Making content accessible

Once you know what to do, creating accessible content is easy. When writing your web content, you should consider if the content works:

• without sound, images or colour
• with high contrast mode switched on
• with a screen magnifier
• with a screen reader
• with only a keyboard.

Written content

Making web content easy to read is a simple way to boost site accessibility. You can make a page more readable by writing short sentences in plain English and by using appropriate headings, links and formatting.

Writing clearly means you are understood by all users, including experts, international users and users with a disability.

Best practice

• Make pages easy to scan.
• Use appropriate headings.
• Write appropriate link text.
• Use sentence case and never use ALL CAPS.
• Use sans serif fonts wherever possible.
• Align paragraphs to the left – don't justify text.

Colour and contrast

Some people can't distinguish between colours, so it's important to make sure content is easy to see.

Sticking to defined contrast ratios will ensure good colour visibility and will help everyone, including colour-blind people, see and read your website.

A contrast ratio is the difference in appearance between two colours that are seen together on screen. For example, the contrast ratio between pure black text (#000000) and a pure white background (#ffffff) is 21:1.

For text and background colour, aim for a contrast ratio of 4.5:1 or 3:1 for larger text. You can use online tools to calculate contrast ratios.

Images and icons

Use images when they add meaning to a page – don't use them for decoration.

Images can make your content easier to understand. For example, combining text such as 'Contact us' with a phone icon can help some users to better understand what they need to do.

Remember that some users may have images turned off and others may not easily recognise what an image means. Always ensure that important information is also communicated in writing.

Best practice

• Optimise all images
• Use appropriate alt text
• Give images appropriate file names.

Videos

Videos can be useful if they show something that might be challenging to explain in writing. Like images, videos should only be used if they add meaning to your page.

Best practice

• Use video captions when available.
• Turn autoplay off – it can interfere with screen readers and is intrusive to browsing and reading.
• Make sure your player has keyboard shortcuts to adjust volume, pause/stop and start.
• Provide alternatives such as written transcripts (for live-streams, supply a transcript when the event is over).

Checking accessibility

You should use both automated checks and human checks to make sure your website is accessible.

Automated checks can quickly tell you if an image has alt text, or whether headings have been used correctly.

These browser plug-ins run automated checks on individual pages:

• The Accessibility Engine an open-source tool that runs in your web browser.
• WAVE shows accessibility features and errors on a page.

While automated checks can identify if an image has alt text, they can't tell you if the alt text makes sense or if it's relevant to the image it's on.

To check these details, schedule regular human checks to ensure all your content is accessible and accurate.