No-fuss websites in Kent and the south east, with applegreen
Skip navigation

Accessibility: Good for Everyone

In the UK, 1 in 5 people have a disability. Their problems may be visual (blindness, colourblindness), auditory, motor or cognitive (dyslexia, ADHD, autism). They may have speech problems or seizures relating to flashing lights. See the government's website for a range of disabilities that can affect website users.

Additionally, all users will have different needs at different times and in different circumstances. Someone's ability to use a service could be affected by their:

  • location — they could be in a noisy café, sunny park or area with slow wifi
  • health — they may be tired, recovering from a stroke or have a broken arm
  • equipment — they could be on a mobile phone or using an older browser

Accessibility, or "A11Y" as it is fondly referred to because of its 11-letter length, is the process of making your website usable to people with different disabilities or impairments. While accessible design is essential for disabled people, it doesn't help only them: it makes your website easier for everyone to use.

Blind users

Here's a feature, invisible to most people, that is implemented on this website: it is an option skip the navigation. Imagine that you are visually impaired and use a screen reader that reads every page aloud to you. "Skip Navigation" enables the user to skip the longest repeated element of every page: its navigation.

Another feature that supports blind users is the "alt" tag for images. This tag contains a short piece of descriptive text that appears as "alternate" if for any reason the image doesn't load. It also tells screen readers what the image is so blind users don't miss out.

In WordPress, Skip Navigation is an integral feature but alt tags have to be added manually as each image is uploaded. This should be done systematically, see our WordPress Instructions page.

Colourblindness

This is a problem in situations where colour contrast is used for esssential website design elements, such as navigation. As a design feature it may look nice, but it disadvantages visitors who can't distinguish the colours.

One answer is to check the colours you have used with a contrast checker, and aim for an AA standard. For example: the navigation tabs for Applegreen Websites are deep red on a light green background. This passes the test at AA for small text and AAA for large text.

Another option is to use a pattern or shape around the text tab, see rlconsultancy.net.

Coloured text is also often used to denote links within body text. To help colourblind visitors, consider using an additional marker — the convention is underline — to indicate that a piece of text is a link. On our website, links are in green (with black body text) but they are also underlined.

Read more about colourblindness and colour contrast.

Other measures

  • Body text, which is usually small, should be in a non-serif font (arial, helvetica, verdana) because serifs make text harder to read on a screen.
  • Avoid uppercase text, as it disables people who rely on the shapes of words to recognise them. Some fonts have only uppercase so check before you choose.
  • There is a trend in fonts towards lighter and thinner, which makes them hard to read. Choose fonts for readability, and increase the line spacing were necessary.
  • Too much contrast, on the other hand, can disadvantage people with autism. Keep the design balanced.
  • Break up the text and page structure so the visitor knows where to begin reading. Too many focus points can be confusing.
  • Using bold to hightlight words in a text can help draw attention to them. But it can also make the words dance around on the screen for someone who is dylexic.
  • Use standard semantic website markup in the website: ie only one h1 header followed by h2 then h3 and so forth.
  • Use a mix of presentation styles where appropriate: text, images, video, graphics...
  • Your website should of course be easy to navigate on small screens such as mobile phones.
  • Make sure links and buttons use descriptive anchor text rather than a generic "click here".
  • Some commentators recommend you avoid forcing links to open in a new tab because it disables the back button, which is essential to screen readers. This is unpopular with designers because this also encourages visitors to navigate away from their website. there are technical ways to warn a screen-reader user that a link opens/has opened in a new tab.

If your website is aimed mainly at disabled users you may need to undertake some testing before it goes live. Here's more information to help you think about accessibility.

Last updated: May 2018