What is a WCAG compliance checker and where to find one

Making your website WCAG compliant is not only a smart idea legally, it also helps people with disabilities navigate and interact with your website. The requirements for how much your website comply with the WCAG standards might differ depending on where you live in the world, but in some countries you can get expensive fines if you don’t comply. Not complying with the WCAG standards can also in some countries cost You deals with the government because the law requires everyone to have access to your website and be able to navigate it freely.

If we look away from the legal side for a moment, making your website WCAG compliant also helps people with disabilities navigate and interact with your website. Every day our life’s become more digitalized and that means every person no matter if You are tech savvy, disabled, old or young will have to at some point interact with a website. We have the technology to make it possible for everyone to interact with the internet and not only the few, so why not take the extra time and ensure an internet for everyone.

Where can I find a WCAG compliance checker?

By doing a simple Google search You will find many WCAG compliance checkers, but almost every one of them are different. Some of them checks for contrast and some checks for HTML attributes, but which ones are the best? Below You will find a list with the 5 top WCAG compliance checkers we found.

Contrast checker: https://webaim.org/resources/contrastchecker/
Accessibility checker: https://wave.webaim.org
Accessibility checker: https://www.webaccessibility.com
Accessibility checker: https://www.powermapper.com/products/sortsite/checks/accessibility-checks/
Contrast checker: https://contrastchecker.com

What does a WCAG compliance checker do?

A WCAG compliance checker is a tool you can use to check if your website comply with the WCAG web standards. The tool can either check your HTML to see if you are using the correct HTML attributes, check for contrast between the background color and your font color or see if you are using the correct HTML elements for lists and links.

In other words, a WCAG compliance checker is your gateway into figuring out where you can improve your website and make it more accessible to everyone. Certain people have problems with their eyesight and might need a sharp contrast to read the words. It could also be the screen that your user was using which couldn’t show as much difference in contrast and therefore contrast and colors would be more washed out. Just by using your eyes it can be hard to know if you are hitting the right minimum contrast each time without breaking your design, but with a WCAG compliance checker you can check that in only a few seconds.

The same goes for checking HTML attributes in your code. While writing the code you could have forgotten an attribute or maybe used a wrong element at certain places, but by checking this you would quickly be able to fix it.

What does it mean to be WCAG compliant?

Being WCAG compliant simply means that you comply with the current WCAG web standards and that you have put thoughts into the way your website was built. If you have a WCAG compliant website people will be able to navigate it if they were blind, couldn’t hear or couldn’t move most of their body.

Imagine if you were blind and you had to fill a form on your website in order to get a refund on a purchase you made. To find the right page you would need to have the links read to you and once you reach the page you will need to have all the inputs read to you and described so that you can fill in the form correctly. This procedure is common but if your website is not setup with the correct WCAG standards doing this will be problematic. If you want to know how it feels like navigating your website as blind, you can try to install a screen reader software on your computer. A screen reader software will allow you to have the website read out loud so that you can navigate without seeing. Besides trying being blind you will also gain knowledge on how to make your website accessible the best possible way. If you can navigate your website without sight, then others might be able to as well.

Is it important for your website to WCAG compliant?

Yes, it is important for your website to be WCAG compliant. Not complying with the WCAG standards might have legal consequences in some countries and therefore cost your company lots of money. In some countries as well it is required for the governments websites and everyone working with or for the government to be WCAG compliant and if your website is not compliant you risk loosing your deal or future deals.

A large portion of the websites on the internet today it not WCAG compliant simply because people don’t think about it. If you are not disabled in any way and doesn’t have close relatives that are, you are less likely to think about this when building your website. Of cause. There is also people out there thinking about this subject but simply choosing to ignore it because of cost. A website built using the wrong methods can be costly to turn accessible/WCAG compliant, but it should be done.

If we look away from legal consequences and cost and instead take a moment to think about the people really needing this. Every day our life’s become more digitalized and the people who can’t are forced into it as well. We move everything we can online, but for most this means moving it online to those who can see and without even thinking about it we leave the rest outside the circle. The internet is supposed to connect us, give us all a voice and make life easier for everyone.

You most likely tried helping an old lady across the street or helped someone to their car with their grocery bags. The feeling you had after was nice and the people you helped also felt nice. When making your website WCAG compliant once you help everyone over and over again navigating your website.

How can you ensure your website is WCAG compliant?

If you are just starting out with the WCAG web standards it can feel a bit intimidating and confusing, but once you get the hang of it it will be like second nature to you. The best way to ensure WCAG compliancy on your website is by first reading through the official documentation. Applying the wrong attributes to the wrong elements can have a bad outcome which will make your website worse than it was before. Once you have learned about the different attributes and ways to comply, you can start to apply it to your website. Remember more is not always better and many HTML5 elements comes with accessibility built in, therefore take one element at a time.

Below we have made a small list of useful ways you can ensure a better WCAG compliancy than you had before:

Read the official WCAG documentation: https://www.w3.org/TR/WCAG21/
Find some WCAG complying websites and see how they have done it. Especially check which HTML5 elements they used and how attributes was applied.
Use a WCAG compliance checker.
Use a WCAG contrast checker to ensure correct contrast between background and texts.

What is the difference between WCAG A, WCAG AA and WCAG AAA

The WCAG web standards are divided into three categories which are used to describe a minimal compliance, acceptable compliance and an ideal compliance:

WCAG A: Is describing the minimal compliance which means you have made very little effort into making your website accessible.
WCAG AA: Is describing the acceptable compliance which means your website in general is acceptable. WCAG AA can also be used to describe an accepted contrast between foreground and background.
WCAG AAA: Is describing the ideal compliance which is the goal for every website. WCAG AAA has a high contrast between background and foreground and makes use of the correct HTML5 elements and attributes.

What are the WCAG 2.1 standards?

WCAG 2.1 is an extension of the WCAG 2.0 guidelines. Over the past years websites have evolved and therefore the standards have as well. The new WCAG 2.1 contains 17 new criteria’s built that you wont find in the earlier 2.0 version. Below here we have created a list of the different compliance levels and what they require.

WCAG AAA compliance:

Animations from interactions: Users should have an option to turn off animations happening on the website. Animations can be disturbing and therefore be better of when disabled.
Identify purpose: Web designers and developers should identify the type and purpose of elements on the website so they can be personalized to people with cognitive disabilities.
Timeouts: If the website makes use of timeouts, it should be indicated how long time it would take before a given timeout begins.
Target size: Web designers and developers should ensure elements are big enough for people with limited dexterity to interact with them even on smaller devices.
Concurrent input mechanisms: Web designers and developers should allow the user to use various input methods such as keyboard, touch, pen or mouse.

WCAG AA compliance:

Screen orientation: The website should be accessible in every screen orientation no matter if the user prefers landscape or portrait.
Input purpose: Web designers and developers should ensure inputs in forms to provide correct information. This means if the screen reader for example reads the input should be your first name, then that’s what should be written.
Responsive: Web designers and developers should ensure that the website is responsive for people with low vision. For example if the person have to zoom, the websites design shouldn’t break and the user shouldn’t have to scroll horizontally.
Non-text contrast: Active elements such as buttons and graphics on the website should be easily recognizable by people with low vision.
Text space and sizing: Users should be able to overwrite text size, letter spacing and line height on a website to improve their reading experience.
Hover and focus: Any content that can be activated by hover or focus should be easy to activate and dismiss without ruining the users experience.
Statuses: Status messages should be given on websites when they are needed. An example is the results of whether an action was successful when filling in a form. Messages should be delivered in a non-intrusive way.

Where to learn about WCAG

First step to take when wanting to make your website WCAG compliant is to learn about the WCAG standards so that you can apply them to your website the correct way.

There are many ways out there you can learn about the WCAG standards such as reading the official documentation. But reading the documentation can be a bit hard to decrypt since it is written as law text. You will therefore find short sentences covering large subjects which can lead to confusion. You can also find articles simplifying the WCAG standards, but they as well can be missing important information or misguiding since they contain an interpretation of the official documentation.

If you like to learn through visual explanation, then try to take a look at this video course form Udemy. Throughout this course you will learn about WCAG, the standards and how to apply them by getting shown visual examples: https://www.udemy.com/course/web-content-accessibility-guidelines-wcag-21-simplified/

Wrapping up

So WCAG web standards is a big deal and it in fact very important for your website. Leaving out the WCAG accessibility can lead to legal consequences, lost deals and people not being able to interact with your website. Accessibility is important and it should be implemented on every website on the internet. Together we can change the internet and make it the best version of itself.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.