WCAG Conformance: Four Principles for Digital Accessibility

See AudioEye in action

Watch Demo

Back to blog

WCAG Conformance: Four Principles for Digital Accessibility

Posted March 17, 2024

AudioEye

Posted March 17, 2024

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

Ready to see AudioEye in action?

Watch Demo

The WCAG standards have four key principles. Here’s how you can use those principles to create more useful and meaningful content for all users — including people with disabilities.

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 before most companies were on the web, it’s now commonly agreed that it applies to making physical premises accessible as well as digital properties such as websites and mobile apps.  

The Department of Justice (DOJ) recommends testing content against the Web Content Accessibility Guidelines (WCAG), the international consensus standards for digital accessibility. Recent updates to ADA Title II now states that WCAG 2.1 Level AA is the standard for state and local governments. While Title III of the ADA doesn’t have explicit standards for digital accessibility, following the latest version of WCAG can help with compliance.

What is WCAG Compliance? 

Is WCAG Compliance Mandatory for My Digital Content?

The short answer is yes. All websites owned by U.S. organizations and/or used by U.S. citizens fall under the ADA's purview, and WCAG 2.1 is the de facto standard the U.S. justice system typically uses to assess Title II ADA compliance.

This is a new development as of April 2024; Prior to a new rule published by the Justice Department, the effective standard for conformance is WCAG 2.0. For general compliance, the best practice is to follow the latest version of the guidelines, which is currently WCAG 2.2.

It’s important to recognize that the ADA applies to all organizations and all types of digital content organizations use. Government entities have regularly opined that the ADA applies to websites, but it’s also applicable to web-delivered documents (such as PDFs), multimedia, and mobile apps. 

Many companies erroneously believe that their digital content “isn’t used by people with disabilities.” Given that more than 1 in 4 US adults has a disability, that’s rarely the case. If your website doesn’t have any visitors with disabilities, you need to ask yourself why 25% of your potential audience is avoiding your content. 

And since WCAG is frequently cited in web accessibility lawsuits, ignoring accessibility can be a costly mistake. ADA compliance is important for all businesses, and WCAG’s principle-based approach provides the best path forward.

What are the Four Principles of WCAG?

The WCAG standards include four key principles called the POUR principles: Content must be Perceivable, Operable, Understandable, and Robust. 

These concepts provide a solid foundation for creating web content that is accessible and usable for everyone. Here’s a quick introduction to each WCAG principle.

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

Digital content should work in predictable ways. 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, standard web browsers and assistive technologies such as screen readers(software that converts text to audio or braille).

As user agents and technologies continue to evolve, the content should remain accessible. Using appropriate semantic HTML and other types of markup can improve compatibility with different technologies.

What Does Conformance with WCAG Standards Mean?

The four principles of accessibility sound sensible, but how do you apply them in practice? 

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. 

Success criteria are also classified into three levels: A, AA, and AAA. A provides the most basic level of accessibility and AAA is the most comprehensive. Accessibility experts generally consider the middle level, AA, to be the benchmark for ADA compliance.

How Can I Follow WCAG Conformance Standards?

To start using the POUR principles, you’ll first need to set a goal. For most organizations, Level AA compliance is a reasonable (and achievable) target. 

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 under the Perceivability guideline: Guideline 1.4, “Distinguishable.” 

It’s beyond the scope of this article to list the guidelines and criteria in full — W3C’s “How to Meet WCAG” quick reference guide provides a more definitive road map for conformance.

1. A: Make your site accessible to some users

Level A success criteria generally focus on basic steps that can be taken to avoid the most egregious violations of accessibility principles. As an example, we’ll look at Guideline 1.4, which focuses on distinguishability — 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. Therefore, the Level AA guidelines 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 explore this topic further, 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 and 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 Level AA 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. Those changes make text easier to read for people with visual or cognitive disabilities (such as dyslexia).

Examples of WCAG Principles in Practice

Now that you have a basic idea of how success criteria work, let’s examine a few ways POUR principles can be applied to digital content.

Perceivability: Color Contrast

Remember, for content to be perceivable, it must be presented in ways that all users can understand. As we’ve discussed, low-contrast text isn’t perceivable for people with color vision deficiencies and other vision issues — so WCAG establishes reasonable thresholds for contrast.

When designing digital content, you’ll need to choose colors for your text and background. Keep perceivability in mind during this process and test your colors with a Color Contrast Checker to ensure it has a good contrast ratio.

Operability: Keyboard-Only Navigation

Some people use a keyboard alone to operate your website. If you don’t consider these users when planning your content, they may not be able to use your digital content easily. 

Because of this, WCAG includes Success Criterion 2.1.1, “Keyboard,” which requires websites to be fully operable with a keyboard alone. You should also consider other input modalities (such as touchscreens, voice controls, and eye-gaze monitors) when building your content.

Understandability: Clear Headings and Labels

By asking whether your website is understandable, you can find ways to help users find what they need and operate your content.

For example, Success Criterion 3.3.2, “Labels or Instructions,” requires websites to provide written instructions for user interface components (such as form fields). Spending a few seconds writing brief, clear instructions will make your content easier to understand.

Robust: Status Messages

Users need to be informed when the content of a page changes, and those notifications must be robust: They must be able to be presented to all users, regardless of whether they’re using a screen reader, a touchscreen, or some other type of device. 

WCAG addresses this with Success Criterion 4.1.3, “Status Messages,” which requires that status messages have proper markup. This is a type of accessibility issue that can be detected (and potentially fixed) automatically — but by thinking about different types of user agents when writing your markup, you can avoid the problem in the first place.

Using the Four Principles of Accessibility to Create Better Content

We’ve discussed a few applications of the POUR principles, but the WCAG guidelines cover dozens of other scenarios — all of which address common barriers that might impact users with disabilities. 

The good news: All that work pays off. Creating accessible digital content that has clear, straightforward functionality improves user engagement, boosts search engine rankings, and can draw more traffic. Compliance is helpful — but inclusive design can be a powerful tool for growing your business.

That’s where AudioEye comes in. Our platform tests your content for common WCAG conformance issues, fixing common accessibility issues that negatively impact the user experience. We start with our free Web Accessibility Scanner that identifies common accessibility issues. Our team of human experts then further tests your digital content for more complex accessibility issues. The result: accessible and inclusive digital content that works for everyone.

Ready to get started? Scan any URL below to see how it stacks up against WCAG’s accessibility guidelines.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading