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?
The total spending power of families with at least 1 disabled person is estimated at £274 billion a year.
Research by Scope £274 billion is a big number. Even without that, making your website accessible is good practise. It helps make the user experience better which benefits everyone. And in the era of core web vitals, that includes Google. What are accessibility issues in web design? 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). How do you define accessibility in web design? A set of guidelines called WCAG govern web design accessibility standards. WCAG stands for web content accessibility guidelines, the current version is WCAG 2.1. There are three levels of accessibility in WCAG from Level A to Level AAA. Each level builds on the previous, so to meet Level AA, your website must meet Level A first. WCAG Level A
- Level A is the broadest in scope. Meeting these guidelines should make your website accessible to many people. This level has minimal impact on design and structure.
WCAG Level AA
- Level AA makes your website useable by most people, with or without disabilities. This level is the standard used by many organisations around the world. For most websites, Level AA is a great target. It’s also required for UK public sector websites as of 23 September 2018.
WCAG Level AAA
- Level AAA is the most strict level. Designed to make your website accessible to almost everyone. This level has a high impact on design and isn’t suitable for many sites. This is because some types of content can never meet the guidelines.
How do I make my website accessible? 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. Automated tools such as tota11y or SortSite can spot some issues. Many issues will need manual checks though. The guidelines are quite technical, so you’ll need a strong understanding of websites. What are some common accessibility issues on websites? Bigfork often produce accessibility audits for our clients. Below are the most common issues we find, and how you could fix them. Use of colour 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. Links Pop quiz – which of these links is more accessible?
- For more information about accessibility click here
- Find out more about accessibility
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. How will people know where to click? This is a common query when removing “click here” and “read more” links. The solution is to make the link look like a link, with an underline, or an arrow. Make buttons look like buttons, (but not ghost buttons). People are quite used to poking at things that look like they can be poked. Consider your phone, your computer, ATMs. None of them tell you to click here, the labels are the instructions. Documents Everyone forgets documents. All those PDF and Word files are part of your website too. We almost always find these three things:
- Missing alt text (WCAG 1.1.1 – Non text content)
- Language setting (WCAG 3.1.1 – Language of page)
- Missing page titles (WCAG 2.4.2 – Page titled)
Fixing PDFs is quite simple with Acrobat Pro using the built-in accessibility tools. Microsoft have resources for making accessible Word Documents too. More complex documents with tables, lists and links may need extra work. There is a good guide on AbilityNet for creating accessible documents. If you are a public sector body, only documents published after 23 September 2018 need to comply. Unless the document is still relevant, such as a manual for a currently used system. Note on accessible documents Documents can be hard to make accessible. At the time of writing this website falls short of Level AA because of the forms in our web design brief. This is not ideal, but the document is still useful without needing to use the form. You can cover any issues like this in an accessibility statement. How do I write an accessibility statement? 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. Disproportionate burden 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. Examples of accessible websites We’ve created a lot of accessible websites for our customers. Here are some recent examples. Kent IASK Norfolk Safeguarding Adults Board What next? 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. If you would like to know more about accessibility please contact me. Mark Ellaway, Bigfork PS – You can find more great successful website insights on the Bigfork website. images provided by BigFork
