Whether you’re an eCommerce business owner, website designer, SEO or marketing manager, you need to know about website Accessibility. It ensures that your website can be used by everyone. 

22% of the UK population have a disability.

While there are legal reasons to make your website Accessible, there are also massive commercial benefits. Accessibility ensures that 100% of your potential customers can use your site.

Here’s what this guide covers:

• What exactly is web accessibility?
• Why make a website accessible?
• How to make a website accessible
• How to test website accessibility

As well as all of this, we’ve also put together a website accessibility checklist!

Let’s get started…

What exactly is web accessibility?

Web accessibility is the practice of ensuring your website can be used by as many people as possible, regardless of any disabilities. This could include motor disabilities like tremors in the hand, visual impairments, cognitive disabilities, fatigue and many more.

If you own a business premises, it would be unethical (and against the law) to prevent a wheelchair user from accessing it and so we would ensure there was a ramp. 

In the same way, it is unfair to prevent someone with a visual impairment, for example, from accessing our website.

Accessibility doesn’t just affect those with physical or cognitive disabilities either. It also includes situational, economic and environmental limitations that could affect people’s ability to access a webpage.

For example, you forgot your headphones so you can’t listen to sound. You can’t afford fast wifi or 5G connections. You’re using your phone browser on a bumpy train. You’re accessing a website in a second language.

These examples would make it more difficult for someone to use a website. 

Making your websites accessible ensures all people can access your content, products and services.

Tools people use to access websites

There are a wide variety of tools people with disabilities use to access websites. Knowing about these helps us to build and adjust our websites so that they are friendly to people using them.

The two most common tools used to access websites are screen readers and keyboard navigation.

Screen readers

Screen readers are commonly used by people with visual impairments. They read the website content to provide audio access. They also allow the user to interact with the site by speaking or through touch, depending on the screen reader.

Keyboard navigation

Keyboard navigation is very common for those with motor impairments. Instead of using a mouse, pressing the ‘tab’ key jumps you to key areas of the page. If you press it now, it’ll skip you to the next link on the page, or you can use the up and down arrow keys to scroll.

Why make a website accessible?

Legal considerations

While the Equality Act does not expressly refer to websites, the consensus has been that the reference to the “provision of a service” applies to commercial web services as much as to traditional services. As business owners, or website owners, we should take reasonable steps to adjust our website so it’s accessible to people with disabilities.

Beyond the legal stuff, there’s also ethical and commercial reasons.

It has commercial value

In 2020, 14.1 million adults (over 16s) were disabled (gov.uk). That’s 22% of the UK population.

With 1 in 5 people living with a disability, a huge proportion of your potential customers could need to access your website in a different way.

It helps your SEO

Google is adapting its algorithms more and more to take into account accessibility. It’s in their business statement to make the internet accessible to all and search engines want to deliver websites that everyone can use. 

This means that if your website is accessible, it’s more likely to be seen in the search results.

With Google building more accessibility factors into their algorithms, it’s likely that accessibility will become even more important to ranking well in the future.

Need help with your SEO? You’ve found the right people! Learn more about our SEO services.

How to make a website accessible

There are a large number of factors to consider when making a website accessible. 

If you don’t have any accessibility requirements, there may be things you haven’t considered before that are essential for some users of your site.

We’ve pulled together some tips for improving website accessibility, but there are also official guidelines that you should follow.

Web accessibility guidelines

In the UK, website accessibility is covered under the Equality Act 2010.

Gov.uk has guidelines to help with making a website accessible: Gov.uk’s guidance on website accessibility.

The US uses ADA compliance. ADA is The Americans with Disabilities Act which requires that web content should be accessible to disabled users.

There is also an internationally recognised standard. Individuals and organisations have worked together to produce Web Content Accessibility Guidelines (WCAG). The latest version is WCAG 2.1 with 2.2 scheduled for publishing July 2022. View the quick-guide on how to meet WCAG 2.1.

Within the WCAG there are three levels of conformance:

• Level A is the minimum level.
• Level AA includes all Level A and AA requirements. This is generally considered a reasonable balance of accessibility and general experience; many organizations strive to meet Level AA. Often Level AA is the one that is typically referred to when you’re tasked with “making a website accessible”.
• Level AAA is the most stringent level and includes all Level A, AA, and AAA requirements.

Below, we have broken down the key elements that you should consider to help make your website accessible.

Visual accessibility

Visual accessibility describes making a website accessible for those with visual impairments. This doesn’t just include being blind or partially sighted, but also other impairments such as colour blindness.

Screen reader compatibility

It’s vital that screen readers can read your content. 

All text information should be formatted as text, rather than contained within images. It’s particularly common to make this mistake in slider or header images where the text is within the image, rather than overlaid.

A quick test is whether or not you can highlight text in a header with your mouse. If so, then a screen reader is likely to be able to read it.

While we’re talking about headers, it’s vital that you structure your content with appropriate headers. 

Use an H1 to describe the overall page, H2s to divide into sections and H3s to divide those sections even further. This helps a screen reader to understand the structure of a page. 

As a bonus, it’s also really helpful for SEO.

Screen readers might also struggle with certain elements on the page. For example, do your date pickers on booking forms work with screen readers? If not, people with visual impairments may not be able to book through your website, which means it’s not accessible.

It’s worth noting that any CAPTCHAs on forms may also need an audio alternative.

Alt tags

Use alt tags! 

The only way a screen reader can understand an image is if you tell it what it is. Alt tags can be read out loud by screen readers so people with visual impairments can still understand what an image is about.

Alt tags need to be descriptive. 

As alt tags are an SEO ranking factor, it can be tempting to stuff them with keywords. 

However, this makes it impossible for people using screen readers to understand an image – and it’s certainly not best practice for SEO! We recommend avoiding the use of keywords in alt tags.

When writing alt tags, think about whether it helps a user to understand the image and its context.

For example, if an alt tag reads ‘cartoon blue bird’ you’re not going to understand that I’m showing an image of the twitter logo. An alt tag of ‘Twitter’s logo, a cartoon blue bird’ is going to be far more effective and useful.

Remember that an alt tag can only contain up to 100 characters. Try to be both concise and descriptive.

Not sure if your images have alt tags? Use a web tool or browser extension to pull out the alt tags from a page. You can then see which ones are missing. If you know how to read HTML, you can inspect the image’s code. Alternatively, you can go into your CMS’s media files and see if they have alt tags specified.

Videos

If you include videos or other sound on your page, ensure it doesn’t autoplay when a user enters the page. 

Not only is this really annoying for everyone, the sound can block out the sound of screen-readers, making it near impossible to find the buttons to make the video stop.

Colours

Improving colour contrast helps those with visual impairments. 

There are around three million colour blind people in the UK. To ensure your site is accessible, avoid using colours as the only distinction for something. 

For example, if you’re creating a map that shows data for different areas, don’t just differentiate areas by colour. Try using patterns or pairing the image with a data table.

Similarly for links, don’t just put linked text in a colour, but also ensure it’s underlined or that there’s another way to distinguish that it’s a button.

Also consider the colour contrast text when it is positioned on a coloured background, for example on buttons or headers.

This handy tool lets you check colour contrast compliance.

Links

It’s good practice to include relevant internal links, helping the user find related information they might be interested in.

However, you need to remember that not everyone can see the context around a link. Some users might just be able to read or hear the link text itself.

This means text like ‘click here’ or ‘this page’ isn’t very helpful! The user has no idea where they might end up when clicking on the link.

Always use descriptive anchor text. Ask yourself, if I read this link text alone, would I understand exactly what page I’m going to go to?

For example, if you want to view our blog post on content ideation. The anchor text ‘blog post on content ideation’ makes it much clearer where a user is going to end up than ‘blog post’ or ‘content ideation’ alone.

Audio accessibility

Audio accessibility describes making a website accessible to people with auditory impairments. This includes being hard of hearing, but also situational impairments such as having broken speakers on your device.

Video content

If you’re using a video on your website, ensure it’s subtitled so those with auditory impairments can access the content just as effectively.

You should consider accessibility when creating video content, including during script writing, filming and directing.

Subtitles are great as they allow a person to watch the video while understanding the audio, but including transcripts on the page can be helpful too as an alternative way to access the audio information. Some video hosting platforms such as YouTube can help create subtitles.

Motor accessibility

Motor accessibility describes making your website accessible to those with motor impairments. It can also be helpful for situational impairments such as using a website while on a moving vehicle.

Keyboard navigation

Many people use a keyboard to navigate web pages rather than a mouse. 

Pressing the ‘tab’ button on the keyboard navigates you to the next link on the page. Pressing the up or down arrows allows you to scroll, and enter is the equivalent of clicking with your mouse.

A common problem with tab navigation is when it’s not clear or easy to see where you are on the page.

Boxes that show the user’s position (focus indicators) need to be in a clear, contrasting colour.

When using keyboard navigation, this Wikipedia page uses a blue box with a thick outline to make it clear where users are on the page.

Web browsers automatically generate focus indicators, with their appearance varying according to different browsers. However, you can customise this using CSS.

Another common problem is not being able to skip the navigation.

If you went on a page and had to click your mouse 7+ times just to get to the content, it wouldn’t be a particularly smooth experience!

A person using a keyword needs to be able to skip having to tab through the entire menu before getting to the page content.

Pressing the tab key on this website brings up a button in the top left corner. If the user selects this, it skips them down to the content. If they choose to press tab again, it instead takes them to the main navigation.

It provides a much smoother and more optimised experience for those using keyboard navigation.

This applies to any side menus too!

Cognitive accessibility

Cognitive accessibility describes making a website accessible for those with cognitive impairments. This could include learning disabilities through to struggling with concentration, and many other things.

Readability

Many people find reading text difficult. We can help by making it as clear as possible.

Break up paragraphs into smaller chunks and use double spacing. 

Try to avoid cursive or other fonts that are hard to read. Fonts in the sans serif family are a great choice, but there are other choices that are just as effective.

Using clear and simple language is important too. It makes it easier for everyone to understand the meaning of information. People with learning disabilities or those using the site in a second language will find it much easier to access the same information as everyone else. 

Easy Read can be a good format to use. 

Easy Read documents use short, simple sentences with pictures. They’re designed to make information more accessible to those with learning disabilities.

The Plain English Campaign website also contains some great guides on how to write with readability in mind.

Using multiple formats

Delivering information in multiple formats ensures people can choose the format that helps them understand and engage with content most easily. 

For example, watching a video or using text-to-speech rather than reading text.

Consistency is helpful

Ensure pages are consistently structured so it’s easy to predict where the user can find the information they want, like the product description or ‘buy’ button. This is also helpful for those with visual impairments.

Use familiar formatting. For example, text links underlined and in blue, changing to purple once the user has visited the page.

Form submissions

Forms should have descriptive information fields. Eg. ‘First Name’ or ‘Full Name’ rather than just ‘Name’.

We want it to be as easy as possible for a user to accurately fill out a form without misunderstanding what’s required.

Form submission errors should make it clear which field needs to change and in what way.

A bad example would be just highlighting the field in red when it’s incorrect. Not everyone can see that! It’s much better to also provide textual support. 

Even then, the more specific you can be the better. ‘Phone number needs 11 digits’ is better than ‘Phone number error’.

Minimise distractions

Minimise distractions, such as unnecessary advertisements or unrelated information. It helps those that get distracted easily, or struggle with sensory overload, to concentrate on the key message.

It’s also helpful for those with visual impairments that might struggle to differentiate at a glance between the primary focus of the page and extra information.

How to test website accessibility

Use tools

There are a wide range of tools available for checking website accessibility.

We’ve even put together a website accessibility checklist below. If you can check all the boxes, your site is well on the way to being fully accessible.

WAVE is a particularly helpful Chrome extension developed by WebAIM.

It analyses pages while you’re on them, pulling out tips relating to structure, HTML, colour contrast and more.

View WAVE in Chrome web store.

SiteImprove have also developed an accessibility checker Chrome extension.

Similar to WAVE, it breaks down accessibility features to help you find areas where you could improve.

View the SiteImprove Accessibility Checker in Chrome web store.

Axe DevTools also has a widely used tool for accessibility testing. It’s incorporated into a lot of wider testing softwares and crawling programmes. It comes as a free browser extension, but they also have paid versions with additional features.

Try it yourself

Try having a go with a screen reader. 

Nearly all computers, tablets and smartphones have a built-in screen reader, but you could also download one. 

It will help you understand more clearly the challenges of using a screen reader and how you can make this easier for users of your website.

Similarly, have a go at using your keyboard to navigate through your website or a page on your website. 

Can you add a product to your basket? Can you go through the checkout process? Can you fill out a contact form?

Some of the common controls are TAB to navigate. SHIFT+TAB to navigate backwards. ENTER to interact with an element like a button. SPACEBAR to check a box.

Website accessibility checklist

View our website accessibility checklist below or download the PDF version.

It doesn’t guarantee your website will be fully accessible, but it does test key components from WCAG 2.1 and covers common mistakes.

Keyboard navigation:

• Order of keyboard navigation is logical and intuitive
• When using ‘tab’ to navigate, you can skip the top menu and any side menus
• The focus indicator is in a distinct colour and is easy to see 
• There are no non-interactive or invisible elements that have been made keyboard focusable

Forms:

• Date pickers on booking forms work with screen readers
• Your forms can be fully navigated with a keyboard
• Field titles are descriptive
• Fields include well labelled ‘id’ HTML tags
• Error messages are clear and it’s easy to understand how to fix an issue
• Error or success messages aren’t just communicated by colour
• Visual CAPTCHAs include an audio alternative

Written content:

• You avoid jargon, idioms and figurative speech
• Acronyms are explained the first time you use them
• Paragraphs are short
• Text links are descriptive (eg. not ‘click here’)
• The font is easy to read
• There is one h1 that clearly describes the content
• Other headings (h2-6) are used to properly structure the content
• Base text font size is at least 12 CSS pixels
• There’s not an excess use of capital letters (eg. full words or sentences in capitals)
• Text is layered over images, rather than integrated into them
• Text isn’t solely dependent on colour for a user to understand its meaning

Non-written content:

• All content that is visual has a text alternative
• All content that includes audio has a text alternative
• Videos and audio files don’t automatically play
• Unrelated distracting content is minimised
• There are no quick flashing animations or images (eg. no flashing more than 3 times/sec)
• Tables and lists are properly formatted using table/list HTML
• Tables have a ‘caption’ element that titles the table
• Images/graphs and other media aren’t solely dependent on colour for a user to understand their meaning
• Coded ‘button’, ‘a’, and ‘label’ elements are unique and descriptive
• Alt tags are appropriate and descriptive
• Decorative images don’t have an alt tag
• Any animation on the page obeys ‘prefers-reduced-motion’

Page performance:

• Your website passes core web vitals tests
• Your website loads quickly
• Viewport meta tag doesn’t have a maximum scale set
• The page is still readable when ‘High Contrast’ or ‘Inverted Colours’ modes are activated in the computer settings
• When text size is increased to 200%, there are no overlapping elements
• Horizontal scrolling isn’t needed
• Website is mobile-friendly (eg. menu styling, can be rotated, all information is visible on mobile etc)
• Breadcrumbs are in place

The post How to make your website accessible appeared first on The SEO Works.