What is WCAG and why is it important?

Web Content Accessibility Guidelines, or WCAG, is considered to be the benchmark for website accessibility. Created by the World Wide Web Consortium (W3C), following WCAG guidelines is the best and the easiest way of making your website usable for all of your customers. 

Many governments and healthcare organizations have to be in line with these standards by law. However, for a virtual, private, or high street business, being WCAG compliant is not a necessity. Following this standard allows you to be certain that your website and online booking page are accessible to the widest possible audience.

What is web accessibility?

So, before we dive into the nitty-gritty of exactly what WCAG compliance entails, you should first, fully understand what web accessibility is. 

Accessibility is the capacity for everybody to have access to something, regardless of any conditions they might have. 

Website accessibility follows along this trajectory and, in short, means that people living with disabilities can more comfortably use and enjoy the web. Of course, not every disability means that you’d struggle to use the internet, however, in the UK alone:

• There are almost 2 million people classed as either partially or fully blind, 
• A further 11 million people have a degree of hearing loss,
• Another 1.5 million have a learning disability. 

WCAG compliance aims to support web users living with various levels of these conditions. It also helps other afflictions such as cognitive or mobility limitations, speech impairments, and photosensitivity. WCAG is beneficial to those with temporary or conditional ailments too, such as age-related sight loss or other conditions or accidents like breaking your arm.

As a business owner, you’ll already know how important it is to understand what your customers want. But strangely, knowing what they need is often overlooked. Being in tune with how they might be accessing information about your business and your online content is vital to making your website more versatile. This is precisely what WCAG guidelines ensure and adopting them is the starting point for sitewide accessibility.

When sites are properly designed, developed, and maintained, more often than not, all users have equal access to information and capabilities. But how many hoops you need to jump through to become WCAG compliant is a much bigger topic.

What is the WCAG 2.0 standard?

First published on the 11th of December 2008, WCAG 2 is the second most recent accessibility standard released by W3C. They provide recommendations on how to increase the usability of your website content and make it accessible to people with disabilities. In addition to this, following WCAG guidelines often makes web content more enjoyable and interactive in general.

Primarily a series of 12-13 guidelines, WCAG compliance is arranged in 4 categories and each of the success criteria in that category is measured at one of three levels. Each version of WCAG released is a referenceable technical standard. The guidelines are designed primarily for web developers, authoring tool developers, site evaluators, or anyone else who wants or needs a standard for web accessibility.

Also approved as an ISO (International Organization for Standardization) standard, implementing WCAG is another excellent way to ensure that your website is up to par. Furthermore, WCAG is part of a series of accessibility recommendations; this includes the Authoring Tool Accessibility Guidelines (ATAG) and the User Agent Accessibility Guidelines (UAAG). 

Who created WCAG?

WCAG was formed by the World Wide Web Consortium or W3C. The global organization was founded in 1994 for the purpose of creating international standards for the World Wide Web, or WWW as it is more commonly known.

How many WCAG success criteria are there?

In total, there are 61 requirements for WCAG 2.0 and a further 17 additional requirements for WCAG 2.1. The newer WCAG guidelines are a subset of the older ones, so the initial 61 success criteria of 2.0 remain the same.

The criteria are designed as a broad instruction, or a WCAG checklist, for authors, evaluators, and website owners. As such, they cover mobile usability, PC and laptop, television, tablet, and any other electronic device where you can access the internet.

The list of WCAG success criteria is then divided into 3 groups:

• Sufficient techniques
• Advisory techniques
• Failures

The sufficient criteria are things that will reliably help make a website more accessible. These include screen reader compatibility, allowing users to enlarge font sizes, and using clear colors and contrasts when designing pages. 

The advisories, as the name suggests, are more like recommendations. These are suggested ways that you could improve your website but they might not be deemed as sufficient for a variety of reasons. This includes lack of testability or being based on technology that isn’t yet stable enough – for example, VR or Virtual Reality, as of writing.

Failures are barriers that come between a disadvantaged user and your website. As such, they stop you from becoming WCAG compliant unless an alternative is provided. Along with the successes, these are documented to give evaluators examples of what not to do. 

What are the four major categories of accessibility?

As well as the success criteria, there are also four major accessibility principles to bear in mind if you want to adopt WCAG compliance. These follow the acronym ‘POUR’, which stands for: Perceivable, Operable, Understandable, and Robust.

1. Perceivable

Put quite simply, this means that the content must be detectable to a user’s senses. This means that they must be able to recognize the information that is being presented to them.

This includes allowing users to hear content (and making sure that it is distinguishable from background noise), using alternatives to traditional text such as braille, enlarged print, symbols, screen readers, or creating basic layouts for content without straying from the original message.

2. Operable

This is all about making sure users can comfortably navigate your website and that the interface is user-friendly. There mustn’t be any part of the site that is inaccessible or any steps that someone might be incapable of completing.

This includes avoiding fast-moving or flashing content when designing your web presence, as this has been known to cause seizures or similar reactions. Making it easy to surf the site without a keyboard, yet also making sure the site is keyboard accessible for those who can’t use a mouse. You’ll also need to make sure you don’t restrict how long it takes someone to read a piece of content and present alternatives to anything that is time-based.

3. Understandable

Users must be able to process the information in front of them and also be able to understand how to use and navigate the website.

This covers making text clear and readable and using input assistance and predictability to ensure that users avoid mistakes and pages appear in a friendly and anticipated way.

4. Robust

This covers the importance of thinking about the likely ways that technology could evolve and building this into the way you adapt your website. As a general rule, if technology and the users change and develop, the content should remain accessible. It also needs to be comprehended by a wide range of users with different disabilities and remain easy to understand.

What are WCAG levels?

Along with your WCAG checklist, you’ll also have to make sure you conform to one of the various different levels needed for certification. There are three levels in total and they determine the degree of compliance recommended for different situations and requirements: A is the lowest, AA is mid-range, and AAA is the highest. 

Similar to the success criteria, one WCAG level succeeds the other. This means that if your website is AA compliant, then it will also conform to the A level. 

What accessibility should a website have?

Similar to the success criteria, one WCAG level succeeds the other. This means that if your website is AA compliant, then it will also conform to the A level. 

In terms of what level of accessibility your website should have, A meets the bare minimum standard required. Therefore, in most cases, it’s recommended that you aim to be at AA conformance level. Although AAA is the highest rating you can get, it’s tricky to make an entire website that conforms to that level throughout.

The level of WCAG compliance you should aim for also depends on your audience. If you are likely to attract more visitors who might benefit from enhanced accessibility levels, you should try to cater to their needs.

How do I make my website WCAG compliant?

Making a website compliant is no mean feat and it can take a long time to achieve the sufficient compatibility required to earn WCAG’s approval. But the good news is that there are plenty of things you can implement to start ticking items off that WCAG checklist.

The simplest thing to do is to use automated free tools to check accessibility. Examples are aXe, Wave, Tenon or SiteImprove – there are many others. These automated checks help find issues and can be a big first step to ensuring accessibility. Just be careful as they wont find everything; In fact they sometimes find less than 30% of non-compliant issues on a pageAt least, you don’t have to worry about your 10to8 online booking website – we already took care of WCAG compliance on 10to8 booking pages!

Alt tags

As the saying goes, a picture can speak a thousand words. Unfortunately, if you’re visually impaired, you might not be able to see that image or the text inside an image, and website owners have to take into account how this could affect a user’s experience. 

This is where the alternative text (a.k.a alt text) comes in. It allows you to add a short description of the picture on your site which can then be picked up by a screen reader. You can use the standard alt attribute for short descriptions and a “Longdesc Tag” for lengthier explanations.

Furthermore, adding alt tags also helps with your website’s SEO, so you’ll be able to kill two birds with one stone!

Increasing the size of things

Although increasing the font size is important, when you’re making areas of your sight enlargeable, you’ll need to consider the clickable areas too. A vision impaired person or someone with motor difficulties may need a larger area to click to make sure they’re not selecting the wrong thing or missing the button.

Form buttons, small links, and back-forth arrows are just a few examples of things that can be quite frustrating to target. So it’s important to make sure that these things, as well as the main text on a page, can be expanded to suit people’s needs.

Make Video and Multimedia Accessible

This can incorporate many different things, so you’ll need to pay close attention to how different aspects of media on your website can be accessed by users. For example, a blind person will not be able to see a video whereas a deaf person won’t be able to hear it. Both of these factors need to be taken into consideration when making that video accessible. 

As well as videos, you’ll also need to consider how disabled people will interact with GIFs, graphics, and buttons. Make sure people can safely interact with flashing images and that there’s an easy way to turn them off. Allowing media files to auto-start is also something to stay clear of, as these can be tricky to turn off!

Dynamic content that can change without reloading the page is another no-no. It can present a problem for people using screen readers, or something similar, as many of these readers only ‘read’ the site as it initially appears. This is where ARIA roles come in.

ARIA stands for Accessible Rich Internet Applications and it is basically a tag that you can add to the content on a page. You can then mark the dynamic content as a ‘live region’ which means that the screen reader would then be able to understand it, even as it changes.

Make sure it is keyboard friendly

Think about this: how would users navigate your website if they couldn’t use a mouse? Would it be smooth sailing or would they quit after a minute?

Blind users will likely use a Braille keyboard and some sort of screen reader when browsing the internet and it’s essential that they can navigate all elements of your site in this way. A few areas to check are:

• URL’s
• Forms
• Drop-down menus
• Anchor text

Plus, make sure that widgets and other embedded applications can be accessed via the keyboard. You can alternatively use HTML, as long as the end result is a keyboard accessible site.

Is the 10to8 online booking page WCAG compliant?

Yes! We worked very hard to achieve our AA level WCAG certification but it was well worth it. Now we can help businesses cater to a wider audience and make appointments happen for customers living with disabilities. 

“It makes me proud that I could champion the WCAG compliance project and work with the whole Product Team to implement the changes in our product that will make it more accessible. It’s very rewarding to hear from our partners that the changes I and my colleagues made to our software makes a difference for so many people with various levels of abilities.” – Riddhi Agrawal, the lead software developer of the WCAG project.

“At 10to8, we try to be inclusive and helpful. Becoming WCAG compliant is just another way we’re trying to reinforce our primary values. We take data security and compliance (such as GDPR, HIPAA, CCPA, ISO 27001, DSP Toolkit) very seriously, but when regulations like WCAG improve our product for so many end-users, that makes it even more important for us. It’s our responsibility too to make the web more accessible.” – Matthew Cleevely, Chief Executive Officer.

Read 10to8’s accessibility statement. 

Overall...

Web accessibility matters. Achieving WCAG compliance on your website might seem like a rather daunting task, but, in this day and age, it’s definitely the right thing to do. There are millions of users that struggle with accessing the internet and, as a business owner, it’s your responsibility to think about your customers. All of them.

So, hopefully, we managed to make it clear why WCAG compliance is important and how it can drive you more business and build a better brand image. And not only will you likely see the benefit from additional clicks and conversions, but your users will also definitely thank you for making them more welcome on your website.