Creating accessible web content

Everyone should be able to access the content you create for your website and mobile app.

Since 1995, the World Wide Web Consortium has published international guidelines that ensure that content shared on the internet is widely accessible, not just by users who may have disabilities but also by various browsers and search engines.

The latest version of these standards, version 2.2 of the Web Content Accessibility Guidelines, was published in October 2023.

While WCAG isn't a legal requirement, it is a comprehensive collection of globally accepted best practices based on four main principles: whether web content is perceivable, operable, understandable and robust.

On this page, we'll explain how you can ensure your website and mobile apps don't put any barriers in place that could prevent users from enjoying them.

Making content perceivable

The first principle is that web content should present information in a way that users can understand using one of their senses. In other words, users have to be able to understand the content.

Multimedia content

Where a site or app uses audio or visual content, a reasonable attempt should be made to provide the same content by other means. This could include subtitles, captions, a transcript to accompany audible content or a description of the video being shown.

For radio station websites or mobile apps, the easiest way to address this is to ensure there are always two ways for people to have the same information. For example, transcribing quotes from an interview clip you have uploaded so people can read as well as watching or listening.

Where images are being used, you should specify "alt text" for each one, describing the image's content in a way people who utilise assistive technology like screen readers can understand. This also improves your site's position in search results.

The best alt text briefly summarises an image, explaining what it depicts and how it relates to the page content that surrounds it.

For example, if the image below was used as a button linking to your Facebook page, useful alt text would read "Visit our Facebook page" rather than "Facebook icon".

If you are conveying more complicated information through an image - for example, a graph - you should summarise the key bits of information rather than copying/pasting the contents as they are into plain text.

Using this example, good alt text would read, "A graph showing the relative value of radio advertising compared to other methods. It shows radio delivers the most ad impressions per £1 spent, with its nearest competitor, out-of-home advertising, reaching just 51% as many people."

A bad example would be "Ad impressions delivered by medium per £1 ad spend" - that's what the text in the image says, but it lacks the context of the visual data.

Use of colours and contrast

Around 350 million people have some form of colour blindness, making the colours we use in websites and apps so important to ensure they can use them fully.

When choosing a colour scheme for your website or app, it's recommended that you use a colour contrast ratio of 4.5:1. In other words, the two colours you use side-by-side - like the colour of text and its background - should contrast against each other.

There are plenty of online tools for comparing potential colour combinations and ensuring they contrast sufficiently. WebAIM has one, along with other useful accessibility resources.

With Aiir websites and apps, we've ensured that none of the player controls or other interactive components that change status only communicate that status change by colour alone.

Some users may struggle to differentiate between a green symbol to show everything is okay and the same symbol in orange indicating an error, so we make sure any interactive components clearly indicate when they are active or not.

Ensuring sites and apps are operable

Websites and apps are considered operable if every user can navigate them easily. For example, people who can't use a mouse or trackpad should be able to navigate it using a keyboard or voice controls.

Keyboard navigation and adaptive technology

By default, all Aiir websites and apps can be operated using just a keyboard or phone's built-in accessibility features. Provided you haven't implemented any third-party scripts which affect this behaviour, this has been taken care of.

Autoplaying content

Autoplaying audio/video content isn't considered the best practice for web design. Users should have to request the content by pressing a play button or taking some other action to indicate they want to play it.

Where content does play automatically, users should be able to pause, stop, or hide it. This doesn't just apply to audio and videos but also any on-screen animations like blinking or scrolling text.

No quick redirections

If you need to redirect traffic to another page, you should avoid having it load an interstitial screen containing text they don't have enough time to read before being taken elsewhere. Users should have enough time to read the content they loaded.

Page structure

Every page on your website or app should be properly laid out, with a title, headings, and focus order established correctly. Aiir websites take care of the last one for you, but you should ensure that pages have titles and a structure that accurately reflects their content.

No misleading links

Where links are present on a page, users should easily be able to determine what it will do when they click or tap on it. Rickrolling is very 2008, but some media websites use similarly misleading practices by using buttons or links that say one thing do another when clicked.

For example, having 'Close' buttons on adverts to replace one ad with another or inviting users to a paywalled page without mentioning that they need to register first. These practices should be avoided.

Making content understandable

This principle is an easy one. People need to be able to understand the information on your site or app as well as how to navigate it.

This can be as simple as explaining any unusual phrases like idioms, jargon or abbreviations.

Aiir websites provide the site's language in a way browsers can understand and offer to translate if required. They also use a consistent theme and navigation structure across the site to make sure people can understand how to navigate it.

If your mobile app has multiple stations on it, you should consider having each station use a similar order of menu items on the navigation. For example, if the 'Change Station' button is in a certain position on the menu of one station, it should be in a similar place if they want to switch back.

Ensuring the content is robust

Aiir websites and mobile apps take care of this accessibility principle for you. This recommends web content be robust enough to be interpreted by a wide range of devices and browsers, making use of common internet standards.

This may only be an issue if you implement any custom code on your site or app which doesn't follow conventions like complete start and end tags properly nested.

If you don't do this, you will likely encounter a broken-looking page or 502 error, meaning you will likely notice the issue quickly and be able to rectify it.

Testing a website's accessibility

There are several tools out there which can identify potential accessibility issues with a website.

WAVE from WebAIM is one we recommend as it evaluates websites against the WCAG recommendations and lets you know what needs to be improved to meet the guidelines.