Website Accessibility

Web Content Accessibility Guidelines:
The Definitive Guide (2021)

Danny Trichter | Last updated: October 2021 | 10 minutes
Web Content Accessibility Guidelines: <br>The Definitive Guide (2021)

This is a complete guide to the WCAG (Web Content Accessibility Guidelines) in 2021

So if you’re looking to understand:

  • What the WCAG is
  • How the WCAG is impacted by different legislations around the world
  • How to comply with the WCAG

Then you’ve come to the right place!

Let’s dive in.

Chapter 1

Digital Accessibility Ecosystem

Digital Accessibility Ecosystem

Let’s kick off the definitive guide with some fundamentals.

The WCAG is only a part of a larger plan for making the web accessible to all people.

Who is in charge of this plan? What are the other parts? And what is the WCAG’s role in web accessibility?

In this chapter, we will review the digital accessibility ecosystem in-depth.

 

The W3C

The W3C, or better known as the “World Wide Web Consortium,” is the most important standards organization for the internet.

The W3C has 443 active members, including businesses, nonprofit organizations, universities, governmental organizations, and individuals.

Fun Fact

The W3C was developed in 1994 by none other than English computer scientist Sir Tim Berners-Lee.

So who was Tim Berners-Lee, you ask?

Just a random guy who happened to invent the world wide web. Not bad for a single lifetime.

Inventing the world wide web earned Tim Berners with the knight’s title of “Sir,” adding him rightfully to the long list of influential people in their fields.

What is a Standards Organization?

A standards organization is responsible for creating technical standards.

For example, when you hear of terms such as “HTML 5” or “CSS 3,” these are standards that are developed by the W3C.

Browsers, content creators, programmers, designers  and other related entities adhere to the standard, together creating the world wide web.

What is the Relation to Accessibility?

The W3C works simultaneously on many projects.

We already mentioned that the organization sets standards for HTML, CSS and Javascript, which are all front-end programming languages behind almost every web page.

Other projects the organization is working on include:

* Internationalization – Making the web accessible in many languages and to all regions of the world.

* Privacy – Creating standards and protocols to help keep the web private and secured.

And many other projects

women with robotic hand holding phone

 

WAI – Web Accessibility Initiative

The project we are going to elaborate on in this guide is called the “WAI” – Web Accessibility Initiative. 

From the W3C website:

“The Web must be accessible to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.”

And we agree.

Can you imagine your life without the ability to order something on Amazon, search on Google, or order a ride on Uber?

How frustrating would that be?

 

How does the WAI plan to make the web accessible to people living with disabilities?

After all, making the web accessible is an extremely ambitious project. 

Think about it, the web is enormous! 

And it’s not governed by one entity, on the contrary, it is made up of millions of different websites, applications, videos, documents and the list goes on.

How do you even begin such an undertaking?

Setting internet standards involves a few key players that need to work together.

* Developers – Responsible for developing the programs

* Software distribution data (for example – Browsers)

* Content creators 

When accessibility features are effectively implemented in one component, the other components are more likely to implement them, and vice versa.

Let’s see an example of how this works.

Let’s take browsers.

We normally don’t give much thought to how important browsers are.

How do browsers support web accessibility exactly?

Browsers like Google Chrome have an entirely different flow for users who use screen readers (many of whom are blind or visually impaired).

This is called the “accessibility tree”.

Simply put, the browser knows the user uses a screen reader and will present the same website but differently, adjusted for users with screen readers.

WCAG

And finally we get to the WCAG!

As you can see, your website is part of the accessibility chain. 

If your website is not accessible, then even if the browser supports accessibility, the end user that needs to use your website simply won’t be able to.

The WCAG (or Web Content Accessibility Guidelines) is an 80 page document that drills down on all the technical aspects of making a website accessible.

In the next chapter we will examine the WCAG in detail.

Chapter 2

The WCAG

The WCAG

The WCAG covers a myriad of issues that affect people with disabilities on the internet. This ranges from difficulty viewing websites to hearing audio to maneuvering their mouse and keyboard.

Despite the WCAG’s dauntingly comprehensive and somewhat intimidating nature, there is no need to worry. We are breaking it down so you can understand more broadly what these guidelines are, how they are relevant to you, and why they matter.

Let’s get started.

What is the WCAG

Websites are generally made up of:

* Text

* Images

* Videos

* Audio

* General design 

Together, these make up the website a user sees and engages with.

 

We use the internet using the following senses and body parts:

* Visual (for viewing the screen)

* Auditory (for hearing audio and video)

* Touch (to type)

* Mouth (to speak, for example voice search to Alexa or Siri)

* Cognition (to understand the information) 

 

How is this related to the WCAG?

Sometimes a person needs a change in the design to see the website better.

Other times a person would need specific help navigating the website because of motor problems. Alternatively, a non-verbal person may not be able to use voice search and will require the option to type their search.

You get the point. 

People have different disabilities and websites contain different elements to meet those needs.

The WCAG helps bridge the gap between the website and people who cannot use the website. 

You can think of it as “the golden gate bridge” that helps bridge the gap between websites and disabled users.

Understanding WCAG versions 1.0 and 2.0

The guidelines (reaching a staggering 80+page count) give site owners clear instructions toward making their website accessible to people with disabilities.

The first version of WCAG was “WCAG 1.0,” and it made its debut in 1999. This was a joint effort from developers across the world and signaled a major leap in web accessibility.

Just as the internet continued to change and develop, so too did WCAG. To remain current, a new version, WCAG 2.0, debuted in 2008. Iterations of WCAG 2.0 continue to roll out, with 2.1 in 2018, and the first draft of 2.2 in 2020. 

Just as the internet and the content on it are hardly a static thing, so does the WCAG need to evolve alongside new developments and technologies featured on the internet and websites. We should expect newer versions of WCAG to continuously emerge over time.

The guidelines are centered around 4 principles.

WCAG can be deconstructed and understood in four main principles. These principles are:

1. Perceivable: Using one or more of their senses, users need to be able to perceive and understand your website in some significant way

2. Operable: Users need to have the ability to navigate through your website and UI elements like the ability to click a button either with a mouse, voice command, or other method.

3. Understandable: Your website content should be readable, understandable and digestible to readers.

4. Robust: Your website’s content needs to be developed keeping in mind how it will work across different types of browsers, both presently and in looking ahead to the future. 

 

Levels of Compliance

From the four main principles, the WCAG defines thirteen separate guidelines with a rating of A, AA, and AAA. These range from A (the lowest), AA, and AAA (the highest). It is not possible to be partially compliant to a WCAG level. Your website must check all the boxes for the required level you are aiming to achieve. If your site needs a AA level of compliance, that means you must meet every single guideline for A and AA levels. You might need to tackle your site one level at a time during your journey to compliance.

Keep the following in mind:

* To reach level A, there are 25 criteria your website must reach.

*In addition to the 25 criteria of level A, to reach level AA, your website will need to meet an additional 13 criteria.

*Level AAA is the top of the top, with 23 more criteria your website will need to meet.

Let’s Give Some Examples

At the most basic level of compliance, A, your website will need to meet certain standards like the inclusion of alt tags, and you cannot identify anything by color on the website (for example, press the purple button to continue). While having an A level of compliance is certainly better than none at all, it is important to note that this level really only meets minimum requirements for digital accessibility.  

The standard recommended level of compliance, and the level most often legally required for websites, is AA, which includes the requirements of A but takes it a step further. One example of a requirement for an AA rating is to explain the connection between text and images that appear on your site; Without this explanation, screen readers would be unable to connect a piece of content to a corresponding image. You will also need to ensure the text on your website meets color contrast requirements.

image showing a facebook button and two ways to describe it - the right way which is "facebook button" and the wrong way which is "button"

Lastly, the AAA rating is the gold standard and the highest level of compliance. Typically this level is hard to achieve, and AAA websites are usually reserved for certain government institutions, banks, and specialist websites. Having an AAA rating indicates your website has achieved the highest level of digital compliance. 

Under each of the four main principles, there is an associated conformity level assigned. This functions as success criteria and is available at three levels: A (the lowest), AA, and AAA (the highest). Conformity to WCAG indicates that your site meets the requirements of the standard. For WCAG, these requirements are known as the Success Criteria. That means you need to ensure your website satisfies the Success Criteria, and no content present on it violates the requirements.

Chapter 3

WCAG Worldwide: Legal Obligations Per Country

WCAG Worldwide: Legal Obligations Per Country

In some countries, WCAG serves as a basis from which governments and lawmakers form and sign legislation concerning digital accessibility into action.

Specific legal requirements and obligations will depend on the country you are in, so it is important to verify exactly what is required.

In this chapter we will give a quick breakdown of how WCAG serve as a basis for legislation in the United States, Canada, Europe and other countries.

In some countries, WCAG serves as a basis from which governments and lawmakers form and sign legislation concerning digital accessibility into action. Specific legal requirements and obligations will depend on the country you are in, so it is important to verify exactly what is required. Here is a quick breakdown of how WCAG serve as a basis for legislation in Canada, the United States, and Europe.

WCAG relation to world legislation chart

In the U.S., two specific standards are at play. These include the ADA and Section 508:

Americans with Disabilities Act (ADA) requires that all state and local governments, non-profit service providers, and businesses have accommodations and access for the disabled public. This includes information and communication technology. 

Section 508 is a piece of legislation that requires government websites and media to create, use, and maintain site content and technology that is accessible to people with disabilities, whether or not they work for the federal government. It is important to note that Section 508 applies to any company that does business with a federal agency (this may include healthcare providers, legal organizations, private contractors, and others).

In Canada, the ACA and AODA provide businesses and individuals with the required standards to meet legal requirements:

– The Accessible Canada Act became legislation in 2019. Its goal is to create communities, workplaces, and services that allow all people to participate fully in society without barriers – including in online spaces.

– The AODA requires private and non-private organizations in Ontario with over fifty employees to meet WCAG 2.0 Level A standards. It is important to note that by January 2021, all public websites and web content need to meet WCAG Level AA criteria. Exceptions to this include live captions and pre-recorded audio descriptions. 

For those operating out of the European Union, the two major compliance components will include the EEA and EN301 549:

– The EN 301 549 is an ominous-looking name representing an accessibility standard that is set to encompass all information and communication technologies (ICT). This covers many digital products, ranging from web content to ATMs.

– The European Accessibility Act (EEA) provides Member States with a set of common accessibility requirements at the EU level. These accessibility requirements are applicable for an array of products and services, including everything from e-commerce sites to computer operating systems. 

Chapter 4

Next Steps

Next Steps

We hope you enjoyed this guide 🙂

Now you understand the background and how important the WCAG is.

But you might be wondering: What are the next steps? How do I comply with the guidelines?

We’ve compiled the next steps for you below.

Good luck on your digital accessibility journey!

 

How do I make my website WCAG compliant?

You can start with a simple and painless audit of your website. Simply enter your site address here  with our free WCAG website audit. We will help you discern where you are vulnerable and what needs to be done for your site to become compliant.

You can also check out AudioEye’s innovative solutions for auto-tagging services for new elements uploaded to your website, content website audits, and disabled users operating interfaces for your website.

Take the first step and get started today.

#

Your feedback has been sent. Thank you :)