Examples of accessible websites
We’ve created a lot of accessible websites for our customers. Here are some recent examples.
When we built the new Bigfork website, one of my requirements was that we made it accessible. But what does this mean, and why does it matter?
Most of us can’t imagine living without the web. It’s estimated that 96% of households in Great Britain are online. From social media to online shopping, the web is an important part of our lives. So, it should be available to everyone regardless of ability, shouldn’t it?
There are an estimated 14.1 million disabled people in the UK. That’s about 1 in 5. Could they be your customers?
Accessibility issues are often thought about in relation to disabilities.
For example, someone with blindness or low vision may rely on software called a screen reader. A screen reader is a type of assistive technology, a term you'll see a lot when dealing with accessibility. The screen reader software helps people navigate websites by reading the content aloud. This removes the need for a mouse and relying on visual cues.
Someone with limited motor control may find a mouse hard to use. So, they might navigate with their keyboard. You can try this – visit your favourite website and use the tab key, arrow keys and return key to navigate. Now try again on gov.uk – you should notice the difference.
Let’s take the above examples without disabilities in mind. Vision often starts to deteriorate after age 40 due to presbyopia. The median age of the UK population is 40.5. So, basic accessibility considerations like making text easy to zoom will help a lot of people (WCAG 1.4.4).
And have you ever had a few too many beers, hit a workout a bit hard? Then you will have experienced loss of fine motor control. Big, clear buttons make it a lot easier to order that recovery takeaway from your phone (WCAG 2.5.5).
The short answer is to work through the WCAG guidelines and resolve any issues. WCAG is very technical and can be hard to understand. WebAIM have created a version that's easier to follow – the WebAIM WCAG2 checklist. This does not replace the WCAG list, it's designed to make it easier to work with.
You can use the list to produce an accessibility audit. Check off each point to see if your website meets that guideline. If it doesn’t, make a note of why. This will give you a list of things that need fixing. Most websites have several templates and elements so be sure to test a variety of pages.
Bigfork often produce accessibility audits for our clients. Below are the most common issues we find, and how you could fix them.
You should never rely on colour alone to convey information. For people with low vision or colour blindness it makes your website hard to use.
Websites usually fail to meet this guideline when they have links in the content. If the link colour is close to the text colour, they can be hard to spot. The very easy fix is to make links underlined. If your links are already underlined, congratulations, you’ve passed WCAG 1.4.1.
Text should also stand out from its background. For body text, it should have a colour contrast of at least 4.5:1. For large text (18pt or bold 14pt) it’s at least 3:1. You can check this with tota11y, or by using a colour picker and a contrast checker. Make sure to check any text that's overlaid on an image. Always test the areas with the lowest contrast i.e., where colours are most similar. Do you have enough contrast? Then you’ve passed WCAG 1.4.3, good job.
Pop quiz – which of these links is more accessible?
The answer is B. But why? Because of WCAG 2.4.4 – link purpose in context. This means a link should make sense without needing any other context.
In example A, the “click here” only makes sense as part of the whole sentence. People using a screen reader will only hear the link as “click here”, which makes no sense on its own.
In example B we make the link text descriptive, so without any context we know it’s “about accessibility”. This has meaning without extra context.
We often see this on news and blog pages – a slew of “read more” links. The easy fix is to remove them and make the article title the link. Congratulations, your site is already more accessible.
If it doesn’t say "click here", nobody will know what to do.
You can use your accessibility audit to write your accessibility statement. It’s ok if your website doesn’t pass everything, the statement will cover that.
The gov.uk website has a sample accessibility statement that you can work from. This page has very clear instructions and is easy to follow. If you are a public sector body, note that some of the wording is required by law.
One important bit is the “non-accessible content” section. If your accessibility audit found issues, you can explain these issues here, and how you plan to fix them. Then as you work through the issues, re-test your website and update your statement.
What if you can’t fix something? Or don’t have the time or budget right now? You can flag issues as a disproportionate burden. This is not an excuse to ignore issues, some things are just not practical. Any new website should aim to not include disproportionate burdens. It is sometimes necessary though, for example if you rely on legacy content such as old documents.
I hope you've learned a bit about why accessibility matters and how to start looking into it. An accessibility audit is the best starting point. Then review your website regularly as developments and new content could reintroduce issues. Your accessibility statement should have a “last amended” date to show it is up to date.
Would you like to know more about accessible web design? If you have questions or would like an accessibility audit, please feel free to email me.