Casandra Visser
Hina Ilyas
Ajay Sohal
This is a complete guide to the WCAG (Web Content Accessibility Guidelines) in 2024
So if you’re looking to understand:
Then you’ve come to the right place!
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. 1
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.
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.
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
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?
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 has required website owners to conform to WCAG 2.1, 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.1, 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.
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 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.
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.
Scan your website for accessibility related issues for free
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.
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)
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.
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.
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.
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.
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.
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 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.
Scan your website for accessibility related issues for free
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.
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.
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!
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.
ADA
AODA
EAA
RGAA
DDA
WCAG (Websites)
Documents
Media
Mobile Apps
Accessibility Checkers
Shopify
Wordpress
Wix
Duda
Joomla
Bigcommerce
Real Estate
Universities
E- Commerce
BITV
EQA
Webflow
Elementor
Drupal
Weebly
Squarespace
Website Accessibility Checker
Statement Generator
Color Contrast Checker
PDF Accessibility Checker
WCAG Master Guide
Website Accessibility Tools
Reviews
Accessibility Legislation
All Topics
Web Agencies
Accessibility Experts
All Role Models
How to Apply
Who We Are
In the Press
Authors & Contributors
Contact Us
Hi, How to step by step pass Section 508 standard