Web Accessibility: Four Principles for Achieving WCAG Compliance

Back to blog

Web Accessibility: Four Principles for Achieving WCAG Compliance

Posted March 17, 2021

AudioEye

Posted March 17, 2021

Four cards that represent the four wcag principles
Four cards that represent the four wcag principles

The WCAG standards have four key principles. These try to provide a foundation for creating accessible and usable web content for everyone. This article goes through those principles one by one.

If you’re at all concerned about accessibility, you’ve probably heard of the Americans With Disabilities Act (ADA) — U.S. federal legislation that prohibits discrimination against people with disabilities by government agencies and private-sector companies. 

While the ADA was drafted in the era before most companies were on the web, it’s now commonly agreed upon that the ADA applies not only to making physical premises accessible but also digital properties such as websites and mobile apps.  

Although the wording of the ADA doesn’t set out any explicit criteria for web and mobile accessibility, legal precedent has established the Web Content Accessibility Guidelines (WCAG) as the commonly cited “gold standard” for this area. 

Looking to uncover accessibility issues on your website based on WCAG? Check it for accessibility.

What is WCAG compliance? 

Is WCAG compliance mandatory for my website? 

The short answer is yes. All websites that are owned by U.S. organizations and/or used by U.S. citizens fall under the purview of the ADA, and WCAG 2.0 is the de facto standard the U.S. justice system typically uses to assess ADA compliance. Many companies erroneously believe they are exempt from ADA compliance. 

What are the Requirements for Making My Site WCAG-compliant? 

The WCAG standards set out four key principles, which aim to provide a solid foundation for creating web content that is accessible and usable for everyone. Let’s go through those principles one by one: 

1. Perceivable 

A website is perceivable if all the information it contains and all the components of its user interface (interactive links, text boxes, buttons, and so on) are presented in ways that all users can sense and understand. Put another way, if any of a website’s useful content is completely imperceptible to any user, the site fails the perceivability test. 

2. Operable

A website is operable if all users are able to interact with the interface and navigate the portal. If the website contains any interactive components, all users must be able to operate them. 

3. Understandable

A website must make it possible for all users to comprehend the information and interface components it contains. If a user cannot grasp how a website works or what its information means, it fails the understandability test. 

4. Robust 

A website’s content must be robust and vigorous enough to be capable of interpretation by a wide range of user agents — for example, not only standard web browsers but also assistive technologies such as screen readers. Moreover, as user agents and technologies continue to evolve, the content should remain accessible. 

How Can I Start Making My Site WCAG-compliant?

The four principles of accessibility sound sensible, but how do you apply them in practice? Fortunately, WCAG breaks down each principle into a number of lower-level guidelines for specific topics and further dissects each guideline into a set of success criteria, which can act as a checklist for compliance. For each success criterion, WCAG also lists a number of “sufficient techniques” — examples of how to achieve the guidance in practice. 

The success criteria are also classified under three levels: A, AA, and AAA, with A providing the most basic level of accessibility and AAA the most comprehensive. In most cases, courts currently seem to consider the middle level, AA, as the benchmark for ADA compliance. 

It’s beyond the scope of this article to list the guidelines and criteria in full — the “How to Meet WCAG” quick reference guide on the W3C website is the definitive road map for this. However, in the sections below, we’ll give some examples of what types of measures would allow you to meet the success criteria at each of the three levels. 

1. A: Make your site accessible to some users

The level A success criteria generally focus on basic steps that can be taken to avoid the most egregious violations of the accessibility principles. As an example, let’s look at Guideline 1.4, which focuses on distinguishability — that is, making it easier for users to perceive content. 

Section 1.4.1 Use of Color is a level-A success criterion saying that sites must not use color as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  

For example, if a web page included a passage of green-colored text and the hyperlinks within that passage were highlighted in red, it could be difficult or impossible for a user with red/green color blindness to distinguish the links from the rest of the text. To meet the success criterion, a possible improvement would be to add some other kind of visual cue to the links, such as underlining them or displaying them in a different font. 

2. AA: Make your site accessible to almost all users. 

To conform to WCAG level AA, you need to meet all of the level-A success criteria. The level-AA guidelines therefore build on those of level A, adding requirements or making them more stringent. 

In Guideline 1.4, for example, the 1.4.3 Contrast (Minimum) level-AA success benchmark augments the guidance of 1.4.1 Use of Color. Any text or images of text on the page must have a color contrast ratio of 4.5:1 or higher (unless the text is large or the images of text are purely decorative or part of a logo or brand name).  

We have written a full article about the intricacies of color contrast if you’d like to take a deeper dive, but for today’s purposes, it’s enough to imagine the difference between a website where the main text is presented as black text on a white background versus one where the text is pale yellow on a white background. Black-on-white has a high contrast ratio, while that of yellow-on-white is very low. For users with various types of visual impairments, it’s difficult to perceive small differences in color contrast, so it’s important to ensure that your site’s contrast ratio is high enough to make the text accessible for all. 

For similar reasons, the AA-level success criteria also include 1.4.4 Resize Text, which says users should be able to resize text to up to 200% of the standard size without needing to use assistive technologies to do so.

3. AAA: Make your site accessible to all users. 

Again, achieving level-AAA compliance requires meeting all of the level-A and level-AA success standards before advancing to a higher benchmark. For example, in Guideline 1.4, we find 1.4.6 Contrast (Enhanced), which lifts the required color contrast ratio from 4.5:1 to 7:1.  

Similarly, 1.4.8 Visual Presentation adds to 1.4.4 Resize Text by requiring that text can be resized up to 200% and that the user should still be able to read a full line without having to scroll their browser window horizontally. It also suggests various other refinements, such as allowing the user to select foreground and background colors, and specifying settings for line spacing and justification that make text easier to read for people with visual or cognitive disabilities (such as dyslexia). 

Check your website’s accessibility in seconds

Illustration of AudioEye Website Accessibility Checker with the label "Scan Results" and an A11y icon.

Check your website’s accessibility in seconds

Find out if your site is accessible for people with disabilities and meets the ADA, WCAG, and other requirements.

Free Scan

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading