Accessibility affects every single person

By Bonny Colville-Hyde

You’ll be aware of how important accessibility is to some of your audience groups, but how aware are you of its importance to all your site’s users? Accessibility is not an issue that affects a minority, it affects every single person at different points in their day. It needs to be considered with user experience in mind, not just meeting accessibility checklists.

There are a range of problems many people face when using sites that can be easily avoided or fixed, and will significantly improve the general user experience all users have.

Here are three actions relating to common accessibility issues you can test your site with today:

1: Video and audio:

So many platforms provide simple ways to upload video content, and it is unquestionably an excellent way to engage users. In some cases, however, it can disengage them due to problems with accessibility.

We can’t be sure of where and when users will want to access content. If they’re using a mobile device without WiFi, video could cause them problems both with download speeds and the potential data cost.

Many users will not have access to audio regardless of the device they are using: perhaps their work computer doesn’t have speakers? Maybe they forgot their earphones and they’re on the bus? Or they might be watching a film with their kids and have the sound switched off. Of course, this is a problem for deaf or hard of hearing users as well who may have no ability to hear the content.

To account for instances like these, you must ensure content is not trapped within either the audio of a video, or the moving image. Core content should appear elsewhere on the page or site in an easily accessible text format so that users can find the information when they can’t access all the rich media.

Action: Review your video content. Does it make sense if the audio is switched off? Does it make sense if you can’t see the images? Is there information within the video that doesn’t appear elsewhere? Consider adding transcripts of the audio to the page — it could also help with SEO and the findability of the content.

2: Formatting:

What happens to your content when you strip out formatting? Many people use services like Instapaper and Readability to collect content to read later, or read without the visual distractions there are on many sites. Here’s how an article on the BBC site looks in a desktop browser:

And here’s how that same article looks on Instapaper:

And here it is on Readability (note how Readability has formatted the intro paragraph):

Content that has been marked up semantically (using the correct forms of html tags like <h1><h2><ul><li> etc) will be formatted accordingly, and will mean the content is displayed accurately, retaining the meaning within the content structure. This is how the intro paragraph of the article above was marked up on the BBC site:

When content is formatted semantically online, people using assistive technology like screen readers are able to skip through it more easily, and services like Instapaper are better able to display the content in a more readable way.

Action: Check some of your pages to assess how well their content translates into a more minimal layout. You can use the Instapaper Text bookmarklet without an account or try the Readability bookmarklet.

3: Colour and contrast:

Colour blindness affects approximately 2.7 million British people, however, not everyone will know they are affected. Depending on the severity, it may never have been picked up so not everyone will be aware that they perceive colours differently.

1: Original
2: Red-Blind/Protanopia
3: Red-Weak/Protanomaly
4: Green-Blind/Deuteranopia
5: Blue-Blind/Tritanopia
6: Monochromacy/Achromatopsia

The examples to the left show the same image simulating different types of colour blindness.

Colour blindness can have a significant effect on a user’s ability to see differences between areas on a site that are coloured as the range of colours they can perceive may be limited, meaning aspects of the design become almost invisible. This can be especially problematic when colours are used to identify different parts of a website (e.g navigation).

Colour can also cause problems for anyone using a screen outside, or where there is glare. Contrast can easily be lost, especially on mobile devices in sunny conditions, making reading very difficult.

Action: Review the core colours used across your site and gather their HEX colour values, then run these through one of these colour checkers to ensure they are usable for anyone:

Pay particular attention to the contrast between text colours and hyperlink colours against their background colour. You can also upload images to test against different types of colour blindness.

Why not take a screenshot of your homepage and see what it looks like to colour blind users?

This blog was originally published on the Trim website.