Web Accessibility: Four Principles for Achieving WCAG Compliance

WCAG principles provide a foundation for creating accessible and usable web content

Four icons representing WCAG principles: perceivable, operable, understandable, and robust.
Four icons representing WCAG principles: perceivable, operable, understandable, and robust.

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.

What is WCAG compliance?

WCAG recommendations are defined and maintained by the World Wide Web Consortium (W3C), an international community that works with the public and member organizations to develop online standards.

Since web and mobile technologies are evolving rapidly, the WCAG guidelines are regularly updated to include new recommendations. For example, the version of WCAG that we currently see cited most often in lawsuits is WCAG 2.0 — but the latest version is 2.1, which provides additional direction related to accessibility on mobile devices, and there’s already a draft for version 2.2.

Side note: Strictly speaking, “WCAG compliance” isn’t the correct term — it’s more accurate to speak of “conforming to WCAG success criteria” than “complying with WCAG.” However, since “WCAG compliance” is the most common terminology — and may even have been the search phrase you used to find this article — it’s the term we’ll use here.

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:

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.

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.

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.

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.

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.

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.

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

Get started with help from AudioEye

If your business is ready to provide an inclusive experience and become WCAG compliant, experts from AudioEye are here to guide you along every step of the way. AudioEye offers something unique in the world of digital accessibility: powerful, automated tools to detect and remediate experience issues in real time, backed up with human expertise to provide trusted advice and keep your accessibility initiative on course.

AudioEye assists tens of thousands of businesses in achieving ongoing compliance with the WCAG standards, and our service can help you identify the key accessibility challenges on your website within minutes.

To protect your business against the risks of ADA lawsuits, timely action is critical — and you can try out our accessibility tools right now for free. Get started with a free AudioEye trial today.

AudioEye is a SaaS company offering a solution that makes digital content accessible to individuals with disabilities.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store