Web Content Accessibility Guidelines: What They Are and Why SEOs Should Care

If you’re currently working to make your website accessible to all users, you’ve probably already heard about the Americans with Disabilities Act (ADA). This piece of US federal legislation was passed to prevent discrimination against disabled individuals, either by government agencies or private companies.

Even though the ADA was created before most organizations had an online presence, recent legal precedent shows that the act applies to the accessibility of websites and mobile apps just as much as it does to physical locations, such as stores, restaurants, and movie theaters.

The ADA itself doesn’t set out any specific criteria for web and mobile accessibility. Instead, many web developers and legal professionals turn to the Web Content Accessibility Guidelines (WCAG), widely accepted as the benchmark for digital accessibility today.

In this blog, we’ll take a closer look at WCAG, and outline the steps you can take to meet its standards. We’ll also briefly explain why accessible websites typically rank higher in search engines — making accessibility the right choice all around!

What’s the link between SEO and accessibility?

Ensuring that your website is accessible to all users already brings huge benefits to your company — if more people visit your website, you’re likely to see an uptick in business. It’s that simple.

Considering the fact that one in four Americans are living with a disability, and that globally, the disposable income of people with disabilities is $1.2 trillion, making your website and mobile applications accessible to everyone opens up your products and services to a new consumer base, and can also lead to significant enhancements in the SEO of your website.

Consider this example: Search engines aim to promote pages with content that is clear and correctly ordered. This means that you need to follow WCAG guidelines on things like headings. If you don’t include the heading ranks in the right order — for instance, by placing text with a fourth-level (<h4>) heading after a second-level (<h2>) heading — you can cause accessibility issues for people using assistive technologies.

Equally, if you don’t provide appropriate alternative text for images, or if you mix up captions with alternative image text, you’ll create issues for users with disabilities and also damage the image SEO on your website. 

These are just a couple examples of how improving website accessibility can boost SEO, but for more, be sure to watch Cooper Hollmaier's new Whiteboard Friday series on the relationship between accessibility and SEO. 

Indeed, any investment you make in digital accessibility will also be reflected in your search rankings. In its mission statement, Google says that its purpose is “to organize the world's information and make it universally accessible and useful.” “Universally accessible” is the key phrase here. It suggests that as Google continues to evolve its search engine and align it with the principles of accessible design, websites with strong accessibility features will be bumped up higher and higher in its search rankings.

What is WCAG and how can you achieve compliance?

WCAG offers a set of rules for web developers who are looking to create accessible websites. It was created by the World Wide Web Consortium (W3C), a global community of public and member organizations that are committed to making the internet open to everyone.

Websites and mobile applications are constantly changing as new technologies and innovations become available. To keep WCAG guidelines up to date, W3C also works to provide fresh advice to web developers on an ongoing basis.

If you review recent digital accessibility lawsuits, you’ll see that WCAG 2.0 is the most widely cited version. However, you should note that this version is already out of date. WCAG 2.1 is now available and provides further guidance on mobile accessibility — and WCAG 2.2 is hot on its heels.

It’s also crucial to note that while “WCAG compliance” is a widely used term, it’s actually a misnomer. Technically, it’s more accurate to think about successfully meeting WCAG standards. The term “WCAG compliance” implies a regulatory body, and W3C is not an industry regulator, nor is it a part of federal legislation. That said, WCAG compliance is the accepted phrasing at both web development conferences and law seminars, so we’ll use the term in this article.

Does my website need to meet WCAG standards?

If you’re in the US, yes, it does. Every website that is used by a US citizen, or owned by a US company, is required by law to comply with the ADA. And because WCAG is often cited as a standard for digital accessibility during litigation, following its guidance can help your organization avoid costly and damaging lawsuits. The notion that any company is exempt from ADA compliance is a myth, too. 

How can I make my website WCAG compliant?

WCAG sets out four main principles. These offer a solid foundation that web developers can follow to build websites that are accessible to everyone. Let’s take a closer look at each one:

1. Perceivable

To be perceivable, all the information contained on a website and all the features in its user interface — such as links, text boxes, and buttons — must be presented in ways so that all users can perceive them by at least one of their senses. If any content is hidden to any user, then the website cannot be considered perceivable.

2. Operable

A website is considered to be operable when all users can interact with it and successfully navigate it. If a website has any interactive features, all users need to be able to operate those components.

3. Understandable

All users must be able to understand the information and interface of a website. Web pages should appear and operate in predictable ways, and users should be protected against making input errors on pages that cause legal commitments or financial transactions to occur.

4. Robust

The content on a website must be open to interpretation by a broad variety of user agents. For instance, standard web browsers and assistive technologies such as screen readers must be able to access a website, and the content on a website must continue to be accessible as assistive technologies evolve.

How can I start my compliance journey?

On paper, the four principles of accessibility set out in WCAG sound simple enough. But how can you apply them? To help answer this question, WCAG offers more detailed guidelines for each of the four topics and breaks down each recommendation into a set of success criteria. WCAG also outlines several “sufficient techniques” that provide examples of how developers can achieve them in practice. Think of it as a checklist for compliance.

Each success criterion is also classified according to three levels: A, AA, and AAA. A indicates the most basic level of accessibility, and AAA denotes the most comprehensive. Currently, courts are interpreting the middle level, AA, as the benchmark.

While this article aims to provide you with a better understanding of WCAG criteria, it doesn’t list all the guidelines in full. If you want to find out more about each criterion, check out the “How to Meet WCAG” quick reference guide on the W3C website. This offers a definitive guide for each aspect of WCAG with suggestions on how developers can satisfy them.

1. A: Your website is accessible to some users

The level A success criteria details the steps you can take to avoid some of the most serious violations of accessibility principles. For instance, guideline 1.4 focuses on distinguishability, which simply means making it easy for users to perceive content.

Section 1.4.1 Use of Color is a level A success criterion. It explains that websites shouldn’t only use color as the primary way to convey information that indicates action, prompts a response, or is a distinguishing visual element.

If a website included a passage of red-colored text and the hyperlinks in that text were highlighted in green, it would be impossible for a user with red/green color blindness to distinguish links from the text. One way to improve accessibility would be to add another visual cue to the links, such as underlining them or using a different font.

2. AA: Your website is accessible to almost all users

To meet level AA, you first need to satisfy all the level A success criteria. Level AA guidelines naturally build on top of the level A criteria, providing additional requirements.

In Guideline 1.4, for instance, the 1.4.3 Contrast (Minimum) level AA success criterion augments the guidance of 1.4.1 Use of Color. It outlines that text on any page must have a color contrast ratio of 4.5:1 or higher. There are some exceptions if text is large, or if the images of text are entirely decorative or part of a brand or logo.

You can learn more about how to achieve the correct color contrast in our full article on the topic. For the purposes of this blog, it’s sufficient 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 yellow-on-white has a very low contrast ratio. Users with visual impairments often struggle to see small differences in color contrast, which makes it all the more important for websites to ensure that the color contrast ratio of text is high enough to make it readable for all.

The AA level success criteria also include 1.4.4 Resize Text, which recommends that users should be able to enlarge text by up to 200 percent of the standard size without the need for assistive technologies.

3. AAA: Your website is accessible to the most users possible

As with the two previous levels, level AAA compliance requires meeting all the level A and level AA success criteria first. To achieve level AAA, websites must meet even more detailed standards. For instance, 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.

Criterion 1.4.8 Visual Presentation adds to 1.4.4 Resize Text by requiring that text can be resized up to 200 percent, while ensuring that the user can still read each full line of text without having to scroll their browser window horizontally. This criterion also makes additional suggestions, such as allowing users to select foreground and background colors themselves, and specifying settings for line spacing and justification that make text easier to read for people with visual or cognitive disabilities, such as dyslexia.

Start improving the accessibility of your website

By following the principles of accessible design, you’ll also make it easier for search engines to parse and rank your site.

Of course, digital accessibility is a huge topic, so you may be feeling in need of direction! Happily, there are numerous resources to help, not least of which is the W3C’s complete Web Content Accessibility Guidelines (WCAG), which should become your touchstone for all things accessibility. You can also potentially use their quick reference guide as a checklist for major accessibility topics.

There are also many automated tools available to help you find and fix accessibility issues, including those created by my company, AudioEye, and you can try them out free of charge. We also provide managed services led by a team of accredited experts, so feel free to contact us for advice and recommendations as you take the next step.