Web Content Accessibility Guidelines

#WCAGguidlines #wcag

Our methodology

Our unique research methodology for digital accessibility combines user testing, feature analysis, and hands-on experience. We review various remediation software and platforms to provide top recommendations.

Written and researched for humans by humans

Photo of Expert
Ajay Sohal
Expertly reviewed by
Comments: 1

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

If you’ve just started delving into your web accessibility compliance journey, you will no doubt have come across mentions of WCAG.

WCAG is what all global disability acts are based on, which means it’s essential to have an in-depth understanding of these requirements if you want to enhance the inclusivity of your site and avoid penalties and lawsuits.

Let’s dive in.

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

When was the W3C developed?

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

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 (1) in their fields.

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.

How is W3C related 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

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 (2) 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?

The guidelines (reaching a staggering 80+page count) give site owners clear instructions on how to make their websites accessible to people with disabilities.

The first version of WCAG was WCAG 1.0, which made its debut in 1999, followed by WCAG 2.0 in 2008.

Just as the internet and the content on it are hardly static, so does the WCAG need to evolve alongside new developments and technologies.

Recently, the Department of Justice (3) has required website owners to conform to WCAG 2.2, which has 17 additional success criteria, most of which are centered around the mobile user experience.

Even though these requirements are new additions to WCAG, they have been official W3C recommendations for several years already, so the change was imminent.

In fact, W3C is already working on new guidelines that focus on how users interact with online and virtual environments, including guidance related to wearables such as smartwatches.

While additional success criteria need to be considered to comply with WCAG 2.2, the four main principles of WCAG remain the same – let’s get into those now.

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.

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 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

Understanding WCAG in detail

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 all of this related to the WCAG?

Sometimes a person needs a change in the design to see or access 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 required to meet the users’ specific 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.

What are 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 expected to be released in 2023.

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 WCAG 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.

infographic WCAG guidelines

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 success criteria 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.

ADA compliance audit for website

Under each of the four main principles, there are guidelines mentioned. And under each guideline, there are several Success Criteria listed, which are the actionable items and have an associated conformance level. There are three levels of conformance: 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.

A Fast and Efficient Way to Comply with Web Accessibility Guidelines

Our top-recommended web accessibility solution is accessiBe. This advanced AI-powered tool makes it easier to apply the latest WCAG standards to your site by simply adding a line of code to the back-end.

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 legislations 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 (Accessibility for Ontarions with Disabilities Act) requires private and non-private organizations in Ontario with over fifty employees to meet WCAG 2.0 Level A standards. By January 2021, all public websites and web content needed 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 (EAA) 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.

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.

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.

Good luck on your digital accessibility journey!

Accessibility Checker

Scan your website for accessibility related issues for free

How we reviewed this article
  1. Current version
  2. Modified March 30, 2023

    What we changed

    Web Content Accessibility Guidelines were updated

  3. Modified June 10, 2022

    What we changed

    Article was reviewed by an expert

  4. First Draft of the Article September 25, 2021
I have been helping global businesses bring their brands to life online for over 14 years now and I still love it! I am particularly passionate about ensuring online content is accessible to everyone. I’ve spent years learning as much as possible about web accessibility, ensuring I can educate others on its importance no matter what sector they are in.

Danny Trichter is a dedicated researcher specializing in digital accessibility, ensuring that websites and digital platforms are usable by everyone, including those with disabilities. Beyond his professional pursuits, Danny enjoys exploring new destinations, sharing his travel experiences on his blog, and discovering hidden gems in Thailand where he currently resides. In his leisure time, he loves hiking, connecting with nature, and capturing the beauty of the world through his camera lens

1 comments

Subscribe
Notify of
guest
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
Tam
Tam
9 months ago

Hi, How to step by step pass Section 508 standard