A Beginner’s Guide to WCAG Compliance

Everything You Need to Know About WCAG 2.0 Level AA Compliance

Keeping business data intact and ensuring your business avoids unnecessary legal risk requires WCAG compliance. But what is WCAG 2.0 and what does compliance entail?

In essence, Content Accessibility Guidelines (WCAG) is a set of web content accessibility guidelines developed to support digital accessibility for all users, no matter their circumstances in life. WCAG 2.0 primarily focuses on ensuring content and user interface components are accessible to people with disabilities, but it does so much more.

In this article, we will cover everything you need to know about WCAG compliance so that you can ensure that your web pages adhere to its intricacies, and consequently, ensure compliance with it.

Learn more about this important concept in the world of business by reading more about it below.

What Is Digital Accessibility?

Digital accessibility is the practice of developing digital applications, user interface components and content that can be accessed and used by people with a disability. This applies to desktop apps, web pages, games, mobile apps, electronic documentation, and much more.

In this guide, we will focus on mobile and web accessibility, however, the outline of the concept will apply to almost any digital industry. In the digital accessibility community, you will come across the word a11y. This is a contraction for “accessibility”.

Because there are 11 letters in the word between a and y, it’s used to describe accessibility. Developing accessible apps and web pages consists of coding, design, UX, and lots of testing. People with disabilities often use assistive technology to make their digital life convenient.

Thus, much of the accessibility work has to do with ensuring the interface can be navigated in accordance with a variety of user agents including assistive technologies guideline 4.1. Even though it’s important to tailor to people with disabilities, why does digital accessibility really matter?

Why Do Web Content Accessibility Guidelines Matter?

People with disabilities deserve equal access and rights online and in the digital space just as they do in the physical world. Furthermore, discrimination against people with disabilities is illegal in many countries. So it makes you wonder why all mobile apps and websites have not been accessible from the start?

Well, the answer is quite complicated. It contains the values of moral philosophy, historical concepts, human psychology, sociology, government regulations, ignorance, and technological development. In essence, it’s too much to handle for the constraints of this article.

However, we can certainly highlight the importance of digital accessibility to create a foundation of understanding to build upon and make better, more educated decisions when undertaking web page design.

First, there are over a billion people in the world who have some sort of disability and rely on assistive technology to consume digital content.

Second, there are hundreds of federal lawsuits filed against owners of inaccessible websites each year and this number continues to increase.

Third, accessibility features benefit everyone. Web content accessibility guidelines enforce better SEO, better web page coding practices, and a higher level of independence for people with disabilities.

How Do People With Disabilities Use Mobile Apps And Websites?

There are 5 primary disability categories; they are, but not limited to:

1. Hearing (hard of hearing, deaf, etc)
2. Motor (paralysis, limb dysfunction, etc)
3. Visual (colour blindness, blindness, etc)
4. Cognitive (autism, dyslexia, ADHD, etc)
5. Speech (speech impediments, mute, etc)

In most cases, people with disabilities who use the internet have some sort of assistive technology that allows them to navigate their devices and applications. For instance, visually disabled individuals can use a screen reader that announces out-loud navigation options on mobile or computer devices.

They may or may not choose to use a braille keyboard as well. If it’s a case of low vision, they might use devices to increase the sizes of applications and text on the screen to make web pages appear clearly.

For individuals with motor disabilities, they might not be able to use a keyboard or mouse, or both. If they can use one of the two, they can use the other to navigate and make inputs on their device. They can also use dictation software to use their devices.

People with cognitive conditions might be able to use their monitor, mouse, and keyboard, and they might have trouble interacting with design components and user interfaces.

With that being said, different disabilities come with their own challenges with device usage. There’s also an infinite amount of conditions within these primary disability categories that make it challenging to meet success criteria. The variations in assistive technology combined with variations in disability conditions create even more challenges in meeting WCAG 2.0 Level AA and Level AAA compliance.

Web Content Accessibility Guidelines (WCAG)

Also known as WCAG, these are technical guidelines that have been developed by the World Wide Web Consortium to generate accessible web content. WCAG is the basis of global regulations for accessibility, including Japan, Canada, the US, EU, UK, and Australia.

In 2008, the guidelines were revised and renamed WCAG 2.0. WCAG 2.0 covers the guidelines, principles, sufficient and advisory techniques, and success criteria of the accessibility venture. The Success Criteria are categorized by levels of conformance (Level A, Level AA and Level AAA).

Compliance with Level AA success criteria and WCAG 2.0 Level A purposes itself as the default understanding of “accessible” when it comes to websites, mobile apps, and other web content. The principle shorthand for WCAG 2.0 is Perceivable, Operable, Understandable, Robust (POUR).

There are many ways that a company can meet the success criteria for WCAG 2.0. The W3C has methods for ensuring you can meet the criteria, but they serve as general advice. They are not a one-size-fits-all solution for each variation of accessibility concern.

Ultimately, WCAG 2.0 is about the user experience. If your interface meets the requirements of WCAG 2.0 but is inaccessible, your UI deems to be inaccessible as well. If you don’t have certain accessibility regulations that apply to your business but want to minimize legal risk, WCAG 2.0 Level A and Level AA conformance is your best bet.

You may also consider an AI-based accessibility solution that is very affordable and easy to set up to help your website meet WCAG 2.0 Level AA compliance without having to touch a line of code.

What Are WCAG Compliance Best Practices?

The complete WCAG 2.0 guideline is complex and lengthy, but there are four essential principles that web designers and business owners can follow. The shorthand of POUR is most important.

There is a checklist for WCAG 2.1 compliance but in reality, it’s quite complicated and not a realistic place to start for most websites. The first step to understand and achieve WCAG 2.0 Level A and Level AA compliance is focusing on the core principles.

Perceivable

This principle refers to how users can perceive web content through touch, sight, and sound. This includes concerns such as video captions, audio description for images of text and non-text content, text alternatives or adjustments for colour and contrast ratio, spacing, font as well as any other factors that might make web content more legible.

Operable

The operable principle refers to how people can use the website or mobile app and is especially relevant to individuals with injured limbs, motor disabilities, and weak muscles. This principle primarily focuses on how web pages appear and operate and are navigable via current and future user agents including sight-assisted tools, keyboard focus, and other mouse alternatives.

Understandable

A website interface must be understandable to any user who visits them. They should avoid using complicated jargon and technical terms and have clear headings and labels. They should also have a consistent flow of content that does not confuse users and should not have complicated guidelines to follow.

Robust

A robust site uses clean CSS and HTML code that meets WCAG 2.o compliance standards. Content must be robust and the site should also be compatible with user agents including assistive technologies and tools that users with disabilities use to consume content online.

Why Should We Care About WCAG Compliance?

Because WCAG 2.0 Level AA is the most important guideline for accessibility on the web and sets the standard for web legislation on accessibility across the world, one might ask the opposite “why shouldn’t one care about WCAG compliance?

Well, due to WCAG 2.0 being developed by the W3C, it didn’t start as a concept for solving the problems of web accessibility. The consortium was founded in 1994 in the Laboratory for Computer Science at MIT. The founding members being leading scientists have begun to expand the organization to hundreds of members from non-profits, government entities, businesses, and universities.

They first focused on the standardization of web protocols so that web tools could be compatible. Each standard was reviewed many times before it was tested, which would leave to eventual approval.

One of the early issues they addressed was web accessibility. And ever since, they continue to update and renew the WCAG compliance standards.

Because these standards are regularly updated, it proves that they are important and that individuals who own web content should abide by them to avoid legal risk.

Who Is WCAG Intended For?

The standards of WCAG 2.0 are primarily developed for web designers and developers, web content writers, web accessibility evaluation tool developers, and anyone else who needs to follow an accessibility standard.

Related WCAG 2.0 resources are developed to meet the needs of policymakers, researchers, scientists, managers, and many other individuals in the webspace.

Difference Between WCAG 2.0 and 2.1

WCAG 2.0 was published in 2008 on December 11th, WCAG 2.1 was published in 2018 on June 5th. WCAG 2.2 is planned for publication in 2021.

All of the success criteria from 2.0 are applicable in 2.1. In fact, the success criteria are exactly the same (word-for-word) in 2.1 as they are in 2.0. All of the requirements and success criteria from 2.0 and 2.1 will be the foundation of the upcoming WCAG 2.2 guidelines.

The wording from WCAG 2.0 and 2.1 will be the same in WCAG 2.2, however, there will be additional success criteria in 2.1, which are not part of 2.0. These are proposed in the What’s New section of WCAG 2.1.

Any content that conforms to WCAG 2.1 conforms to WCAG 2.0 as well. And content that conforms to 2.2 conforms to 2.1 and 2.0for backwards compatibility. A website that meets the standards of 2.1 and 2.2 should directly meet the policies referenced in 2.0.

If you want to meet both WCAG 2.1 and 2.0, you can use the 2.1 resources and you won’t even have to busy yourself with looking at 2.0. Both WCAG 2.0 and 2.1 exist simultaneously. One does not supersede or deprecate the other.

The W3C encourages individuals to always use the most recent version when updating or developing content. However, some organizations might only need to conform to previous renditions of WCAG compliance.

What Is Part of WCAG Documentation?

Both WCAG 2.1 and 2.0 are referenceable and stable technical standards. They have 12/13 standards under the 4 principles of POUR. For each of these, there is a table of success criteria to meet, which are staged at three levels of Level A, Level AA, Level AAA.

The WCAG supporting technical materials are “At A Glance”, “Accessibility Principles”, “How to Meet WCAG”, “Techniques for WCAG” and “Understanding WCAG”.

How to Meet WCAG

This is a quick reference that is customizable to the WCAG requirements and techniques. In essence, this is the WCAG compliance checklist. Most people use this as the primary resource for ensuring compliance.

Techniques for WCAG

This provides users with details on how to create accessible websites and mobiles, such as CSS and HTML examples. The techniques are informative, they are not mandatory. The basis for determining compliance with WCAG is the success criteria, not the techniques.

Understanding WCAG

This is an additional resource for implementing and learning WCAG for users who want to better understand the success criteria. As well as for those who want to go through the guidelines more thoroughly.

Examples of WCAG Compliance Levels

To better illustrate what goes into WCAG compliance, let’s take a look at the notable requirements from each level.

The conformance requirements are there to prohibit elements/design that can make the website inaccessible. Websites that do not meet the first level of compliance are impossible for people with disabilities to use.

Level A

For websites and mobile apps on the first level of compliance, they should avoid keyboard traps. They should have video captions, keyboard focus navigation, non-text alternatives for content.

The meaning of the content should also not be primarily conveyed with size, shape, and colour.

Level AA

On this level of conformance, which is the basis for most accessibility regulations in the world, the website is somewhat understandable and usable by the majority of persons with disabilities. The functionality and meaning conveyed are available.

Your site might not fit the bill currently, but some simple changes can correct that. Having a WCAG checklist might be a good idea to ensure you meet all of the requirements in an organized way.

For instance, colour contrast should at least be 4.5:1 separating foreground from background. Navigation must be consistent and alt-text should be used for images to convey meaning. Status updates can be displayed with a screen reader, headings are logically correct and form fields have proper labels.

Accessible Metrics and the Accessibility Checklist use the second level of compliance to help webmasters improve existing web projects.

Level AAA

At Level AAA compliance, your website is available and accessible to the maximum capacity of people, making their experience comfortable and easy. While this level is not recommended as a regulated policy for websites because it can be impossible to satisfy the criteria with some content, it’s still a good target to aim for.

If your application or website caters to people with disabilities or the elderly, the third level of compliance will help you ensure that your website can be used with ease. This also shows that you consider the needs of the audience. Because many websites are not accessible for the most part, your audience will notice your attention to important parts of the web.

At this level, the colour contrast ratio should at least be 7:1, timing should not be critical to any part of the functionality. Sign language interpretation for video, audio or non-text content and context-sensitive help is also part of the criteria.

There are many more requirements for each level of compliance however, these are the most notable.

Why Comply With WCAG?

The W3C page for policies lists out 25 separate regulations reliant on the WCAG. In addition to the EU accessibility direction and Section 508 in the US, the laws in 19 countries are derivative of WCAG. Thus, require you to comply with WCAG to comply with the law.

For instance, in Ireland, the Equal Status Act relies on WCAG. In Israel, the Equal Rights of Persons with Disabilities Act does as well.

In the United Kingdom, the Equality Act is based on WCAG. In Australia, the Disability Discrimination Act is enforced via WCAG. And many other countries do the same.

All of the regulations apply to the private and public sectors. Beaking the laws can lead to serious fines, criminal charges, and administrative charges. For instance, in Ontario, a company can be fined $100000 per day for non-compliance.

In Israel, discriminating against the groups of persons with disabilities is enough to get yourself into a criminal proceeding. With legislation for accessibility changing, not complying with the laws is not a choice. Many public bodies and businesses are working toward compliance, and you should too.

However, complying with WCAG does not constitute you being compliant with the accessibility laws of each country, but it does get you closer than you were before.

If you’re interested in an automated solution for WCAG & ADA compliance, check out accessiBi.

How Does WCAG Affect Global Laws for Accessibility?

Because WCAG is not a standard of enforceable laws, in fact, it’s not a set of laws at all. Many governments have chosen to adopt it as a regulatory standard for accessibility laws in their country.

In essence, compliance with WCAG is the best approach to achieving worldwide legislation compliance. Let’s go over some of the countries and how WCAG affects them.

Canada

The Accessible Canada Act has is maintained by the Federal Government. The act requires most private and public sector sites to be accessible by WCAG 2.0 Level AA standards.

Other provinces have also passed their own laws for accessibility, such as the Nova Scotia Accessibility Act, Accessibility for Ontarians with Disabilities Act, and the Accessibility for Manitobans Act. All of these use WCAG 2.0 Level AA as the regulation for compliance.

United States of America

The updated version of Section 508 in the Rehabilitation Act came into effect in 2018. This section requires every web platform that is run by an organization with federal funding or run by a federal body must be accessible to all. Under the new rules, the platforms must comply with the AA level of WCAG 2.0 compliance.

While many users have sued US businesses that are not accessible, under the ADA, courts have ordered many websites to reach compliance. You will often hear WCAG ADA compliance as a basis for discussing accessibility in the US.

The best way to comply with ADA law is to comply with WCAG.

The European Union

In the European Union, the government has adopted the AA level of WCAG 2.0 mandatory for all official sites. It also expanded this standard to all public sector platforms to comply with WCAG 2.1.

For the European Accessibility Act, the EU also adopted WCAG 2.0 as a standard, which will become an enforced law.

Australia

In Australia, the Disability Discrimination Act was enforced to remove barriers that prevent users from accessing real-world spaces for work. With time, the Human Rights Commission and other government bodies have decided the DDA should include online content.

Official advice encouraged that all services and businesses should meet the WCAG 2.1 standards to avoid DDA violations. The Web Accessibility National Transition Strategy required all government agencies to meet the AA level of WCAG compliance.

Israel

In Israel, the IS 5568 is a law for accessibility that requires most businesses to have their websites accessible to people with disabilities based on WCAG.

Hence, ignoring the Risks of Legal Action by non-compliance to WCAG (the backbone for legislation for accessibility across the globe), one would be doing themselves a disfavour. If you comply with WCAG, you’re in the right 9 times out of 10.

The Americans With Disabilities Act

The ADA is the civil rights law in the US that prohibits discrimination against individuals with disabilities. This applies to all aspects of life, including jobs, transportation, school, private and public spaces, and much more.

Title I applies to employment. Title II applies to Public Services. Title III applies to Services and Public Accommodations Operated By Private Entities.

The act does not have certain requirements in regards to the accessibility of the digital world. However, the judicial courts will often interpret the second and third Titles as applicable to web services and content. More and more lawsuits are filed each year by the Americans with Disabilities Act.

According to experts of the act, defendants of several website accessibility cases have filed a motion for summary judgment or dismissal where there is no unusual circumstance. Examples of this are a settlement agreement or prior court orders that obligate the defendant to make their content accessible.

In almost all of those motions, the courts denied them and let the cases go forward into discovery. So if there is nothing specific about web accessibility in the ADA, how are organizations supposed to comply with the requirements for accessibility? Well, currently based on the ACAA and Section 508, the answer to the requirement is the AA level of WCAG 2.0 standards.

How Do You Know If Your Website Accessible?

The simplest way to find out if your website is accessible in terms of WCAG is to test it against the requirements. Some of the basic tests that you can perform are keyboard navigation, automated accessibility testing, transcripts and captions, disability feedback, front-end dev experiments, and much more.

Keyboard Navigation

To begin, attempt to navigate through the website only with your tab key. As you click it, it should be definitely evident where your control currently is. Is there a keyboard focus indicated to show that you are exactly where you are?

If the indicator is visible, can you select any of the elements on the page only with the tab button? This includes items, menu buttons, links, search fields, etc. Are you able to navigate from one element to another by tabbing?

If you answered no to even a single question, your website is not accessible.

Automated Testing for Accessibility

To perform this test, you will need a browser plugin that specializes in accessibility testing. After installing it in your browser (it’s a good idea to use several browsers on different operating system versions), does the tool return issues with accessibility?

If that’s the case, your project is not accessible.

Transcripts and Captions

Do you have video or non-text content on your app or website? Is it transcribed or captioned with an audio description?

Do you have audio content? If so, is there an instant transcription available for your use? If not, the site is not accessible to Level AA standards.

Disability Feedback

Can you hire or have someone with a disability test out your website or mobile app to see how their experience is impacted? Can they use the application or website without issue?

If your organization can pass all of the tests with outstanding results, good for you. Your project is most likely well-developed with accessibility in mind. But does that mean that your project is 100% accessible?

The tests above are not comprehensive in any manner. Depending on what type of organization you run and how many 3rd party or internal teams work with the various components of it, it’s quite possible that some parts of your project are accessible and others are not at all as more content and features are added to the site by different parties.

Alternative to WCAG

In an ideal world, every website is entirely accessible to all users. However, that’s not an easy task to achieve by any means. If you manage or design a website that cannot meet the requirements for WCAG compliance, there’s a glimmer of hope.

The WCAG will consider pages compliant if an alternate rendition of it exists and meets the requirements. To conform with WCAG, an alternate version of the page or application must meet certain conditions.

The alternate version should:

1. Comply at a designated level
2. Provide all of the same functionality and information in the same language
3. Be up-to-date as the non-compliant content

And meet one of the following:

1. The compliant version can be accessed from the non-compliant version with an accessible mechanism
2. The non-compliant version can only be accessed from the compliant version
3. The non-compliant version can only be accessed from the complaint page that provides the mechanism for reaching the compliant version

When creating your alternative solution for pages and apps, it’s important that you only consider it as a temporary solution to cover your bases while you work towards a permanent version. When you have a compliant alternative version, you will have to update it with the same information, making twice the work for you and your team.

WCAG Compliant Web Design

Now that you understand what WCAG compliance is, why it’s important and how it impacts businesses the next step is to ensure that your business supports it and makes every effort to comply.

If you’re interested in a WCAG compliance audit for your website or are planning a new website design and want to make sure your organization is meeting accessibility compliance, contact us to learn more about our professional web design services and how WCAG compliance plays a role in our web design process.