Understanding WCAG: A guide to accessibility in digital design

If you’re new to digital accessibility, you’re not alone if you’re overwhelmed by the acronyms, or by the expectations and regulations. There’s a lot to learn, and standards are constantly changing.

Consider this article as an introduction to WCAG and web accessibility. Read through to the end and you’ll know what you need to know to get you on your way, and by all means share it with colleagues who are also ramping up their knowledge.

What WCAG is and why is it important for digital design and web development

The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content more accessible to people with disabilities. Developed by the World Wide Web Consortium (W3C) through the Web Accessibility Initiative (WAI), WCAG serves as a global standard — and as a gold standard — for digital accessibility.

WCAG conformance isn’t something you can avoid or assume will magically happen. Rather, it’s a critical component of digital design because it holds companies accountable to a basic principle: that websites, applications, and other digital content are usable by everyone, regardless of their abilities. You have to be deliberate about conforming.

When developers and designers adhere to WCAG, they’re following the rules, but they’re also demonstrating their company’s commitment to creating inclusive and equitable web experiences.

“Inclusive,” by the way, doesn’t mean that it only benefits users with disabilities. It means that it enhances the overall user experience for everyone, regardless of their abilities.

How WCAG guidelines improve web accessibility for all users

WCAG guidelines improve web accessibility by addressing a wide range of disabilities, including visual, auditory, physical, speech, cognitive, and neurological. For example, alternative text for images helps users who rely on screen readers, and keyboard navigation benefits users who can’t use a mouse.

But the benefits of web accessibility are for everyone, not just those with long-term disabilities. If you have a temporary injury, then you benefit from digital accessibility, as anyone who has broken an arm or finger can tell you the moment they try using a keyboard. Older users aren’t necessarily disabled, either, nor are those in certain environmental conditions, like bright sunlight or noisy rooms.  

It’s not about just meeting the needs of people with disabilities or impairments — it’s about meeting the needs of all users.

That’s a really critical part of accessibility to understand.

What the WCAG numbers mean

WCAG 1.0. WCAG 2.2. WCAG 3. What does it all mean?

It’s pretty much as you would expect: Each number reflects an update and expansion.

WCAG 1.0 was published in 1999. That’s so long ago you don’t need to think about it. WCAG 2.0 was released in 2008 and introduced the levels: A, AA, and AAA. (More on that below!) WCAG 2.1 was published in 2018 and added new success criteria, but otherwise it’s much like WCAG 2.0. Then there’s WCAG 2.2, which was released in 2023 and added still more success criteria.

As for WCAG 3.0, that’s still in development and it’s going to be a big deal because it will cover more technologies, including virtual and augmented reality. The first working draft was published in December 2024, but it will take years before it’s done.

One A, two A’s, or three A’s

Starting with WCAG 2.0, WCAG is organized into three levels of conformance: A (minimum), AA (recommended), and AAA (enhanced). Each level builds upon the previous one and lays out increasingly stringent criteria for accessibility.

Level A: This is the minimum level of conformance. It includes the most basic web accessibility features and addresses the most critical barriers for users with disabilities.

Level AA: This is the mid-range level and is often the target for most organizations. It addresses a wider range of accessibility issues and provides a more comprehensive level of accessibility.

Level AAA: This is the highest level of conformance and includes the most advanced accessibility features. It is often difficult to achieve for all content, but it represents the ideal level of accessibility.  

Right now, most companies are shooting for WCAG 2.1 Level AA, but some go for WCAG 2.2 Level A.

Make sense?

The legal implications of not adhering to WCAG standards

Non-compliance with WCAG standards can have significant legal implications that aren’t good for any business.

Requirements for compliance can vary by country and jurisdiction, but just about everywhere, web accessibility is mandated by law that in some way refers to or incorporates WCAG.

For example, the Americans with Disabilities Act (ADA) requires that all public accommodations (including websites) be accessible to people with disabilities.

Section 508 applies to federal agencies and their contractors and mandates that electronic and information technology be accessible. Both laws often reference WCAG standards, making compliance with WCAG a key requirement for legal compliance.

Both ADA and Section 508 refer to WCAG 2.1 Level AA as the standard for compliance, but WCAG Level A is the minimum level.

Other regions have similar laws, such as the Accessibility for Ontarians with Disabilities Act (AODA) in Canada and the European Accessibility Act (EAA) in the European Union. Often those laws refer to WCAG. (For more on various accessibility laws, read our overview.)

Users with disabilities can file lawsuits against businesses for non-conformance, and the truth is often single individuals file suits against multiple companies, and only a handful of law firms handle accessibility non-compliance cases. (If you want to get into the nitty-gritty of accessibility lawsuits, check out the 2024 Website Accessibility Lawsuit Recap from Accessibility.com.)

Many legal cases involving web accessibility have referenced WCAG as the standard for compliance. For example, in the landmark case of National Federation of the Blind v. Target Corporation, the court ruled that Target's website needed to be accessible, and WCAG was used as a benchmark for determining compliance. There are other famous cases, too, like when Beyoncé’s site was hit with a class action lawsuit for not being accessible to people with vision impairments.

Then there are fines and penalties. Just about any company can be hit with fines and penalties, but businesses that receive federal funding (contractors) are most at risk.

What are the non-legal implications of not observing WCAG?

Imagine a social post pointing out barriers for people with impairments on your site goes viral. That’s “reputational damage.” Or imagine losing a major customer because the head of procurement tested out the platform has macular degeneration or a broken index finger. (Categorize that under “user frustration” coupled with spending power.)  Those are non-legal ramifications of having a site that isn’t accessible.

But when we talk about “non-legal” ramifications in the context of WCAG, you have to think about it terms of inclusivity, a fundamental notion for marketing of any kind that compels designers and developers to think beyond the “typical” user. (“Inclusivity” tends to line up with social responsibility, which many consumers take into consideration when doing business with a brand.)

Put simply, if you want to reach every possible audience and customer and welcome them with open arms — the real point of inclusivity — you need to imagine every possible condition that could mean they encounter a barrier the moment they land on your site, whether that’s deafness, colorblindness, or a broken finger.

Not only that, but you need to imagine how loved ones of people with disabilities might react if they land on your site and see that it’s not welcoming to their sister with multiple sclerosis or their best friend with glaucoma.

Creating a site that’s not inclusive or accessible is not entirely unlike parking in a handicapped parking space when you’re completely able-bodied: It’s thoughtless and you risk penalties and getting called out.

But unlike the risks of parking in the handicapped parking space when your body works just fine, the risks of digital accessibility noncompliance include serious damage to your bottom line in the form of diminished engagement and poor conversion rates, not to mention failing grades for customer loyalty.

One final note on the risks of non-compliance from a business perspective: In terms of SEO, there are some serious long-tail ramifications if your site isn’t compliant. If your site isn’t accessible, it’s harder to navigate, so users will bolt quickly and bounce rates will be higher.

Search engines penalize sites that don’t offer a good user experience. Not only that, but they rank for mobile-friendliness, semantic HTML and headline structure, and load times (which are connected to optimized images), and of course for reach.

The four principles of WCAG

WCAG is rooted in four key principles: Perceivable, Operable, Understandable, and Robust (POUR).

Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This includes providing text alternatives for non-text content, ensuring that content is adaptable and making it easier for users to see and hear content.

Examples include alt text, video transcriptions, sufficient color contrast, and responsive design.

Operable: User interface components and navigation must be operable. This means that users can interact with the content using various input methods, such as keyboard navigation, and that flashing content doesn’t trigger seizures or physical reactions.

Examples beyond keyboard nav and no flashing content include forms with clear labels for fields and borders or highlights that provide focus on elements users are interacting with. Time-based media is another one: You want to make sure that readers have enough time to read and use content.

Understandable: Information and the operation of a website user interface must be understandable. This includes making text readable and understandable, ensuring that content appears and operates in predictable ways, and providing users with enough information to help them complete tasks.

Examples of “understandable” include legible fonts, high color contrast, consistent and predictable layout and navigation, tooltips and help text, onboarding materials, and translations.

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies, both now and in the future, so that content remains accessible as technologies and user tools evolve.

Examples of “robust” include many of features listed above, like tags, accessible forms, and flexible layouts, but it also includes things like compatibility with screen readers.

Think of POUR as the four pillars of web accessibility, and as the guides for the design and development of digital content.

(Quick soft sell: Siteimprove’s Accessibility tools do a lot of this for you, automatically, and you can try the Accessibility Checker to get a sense of how the tools work. Here’s an example of what the platform looks like — it’s a screenshot of accessibility issues on our own site that we’ve resolved.)

General strategies for ensuring compliance and avoiding legal pitfalls

There are plenty of things you can do, across your marketing team, that will set you up for compliance, put you in the safe zone legally, and protect your business.

Conduct regular audits: Regularly assess your website for accessibility issues using automated tools and audits. That’s a great way to zero in on and resolve potential barriers, particularly those that can be fixed quickly or even automatically.

Train staff: Provide training for designers, developers, and content creators on WCAG guidelines, starting with Level A. That’s a way to empower your team to build accessible and inclusive content and interfaces from the outset.

Use accessible design tools: Utilize tools and software that support WCAG compliance. (Yep, we’ve got those.)

Engage with users: Gather feedback from users with disabilities to identify and address accessibility issues. Direct input from users in the real world will help you prioritize needed improvements.

Start with Level A: Ensure that your website meets at least WCAG 2.1 Level A, the minimum level of conformance, to cover the most basic web accessibility features.

Don’t forget manual testing: Automatic audits and scanners are great, but you can’t rely on them alone for things like keyboard accessibility, screen reader compatibility, and forms.

Tips for web designers and developers

If you’re a web developer or designer, a structured approach can make all the difference in making digital accessibility less daunting and far easier.

Here’s what we recommend:

Understand the guidelines: Familiarize yourself with the WCAG 2.1 guidelines and their success criteria, starting with Level A.

Conduct an accessibility audit: As noted above, use both automated tools and manual testing to identify accessibility issues on your website. Be sure to define the scope of the audit, including which pages and features to test. Remember that a sound audit will also help you prioritize issues, focusing on Level A first.

(Don’t forget to document the results of your audit findings: Knowing where you started and where you landed will give you a sense of satisfaction and get you kudos when it comes to reporting to your supervisors.)

Set clear goals: Define what level of WCAG compliance you want to achieve in terms of Level A, AA, or AA, and/or an Accessibility score you want to shoot for. (Our Accessibility Checker can create a baseline for you, and then you can set your goal to a figure you can feel good about.)

Develop an accessibility plan: Create a plan to address identified issues and implement WCAG guidelines and meet your goals. Consider creating a timeline for fixing all alt text or getting your Accessibility score up to a certain benchmark.

Use a checklist: Follow a detailed checklist of WCAG success criteria, starting with Level A. Make sure each line is checked and documented. Note areas that need improvement.

Use accessible design patterns: Incorporate accessible design patterns and best practices into your projects. For example, use a skip navigation link at the top of your pages to allow keyboard users to bypass repetitive content and go directly to the main content.

Test and iterate: Regularly test your website for accessibility and make iterative improvements. Monthly audits tend to work well, so month by month you can focus on a particular area to fix, like broken ARIA attributes.

Here’s a quick example of how Siteimprove Accessibility highlights potential issues.

 

Notice how it notes what the potential issues are with a question, indicates the conformance level (AA or AAA) to help you determine priorities, and states the element type, e.g., forms.

Way to the right you can see how many points you can gain if you make that particular fix (That’s part of our gamification feature. You can set your goal for your score, up to 100. Our customers love that and can get quite competitive about it.)

Tools and resources available for WCAG compliance

As noted above, accessibility testing tools like ours can help identify accessibility issues and even automate the fixes. W3C, the organization that develops WCAG, provides technical guidance, like these details on WCAG 2.1.

Many organizations offer training and workshops on WCAG compliance, and you can always rely on our on-demand webinars, like Introduction to Accessibility or Accessibility and SEO. Frontier, our online learning resource, also has courses like Accessibility Code Checker and Accessibility Site Target Score.

There are also plenty of online communities and forums you can look to, like WebAim’s email discussion list and Reddit’s r/accessibility.  

Finally, do your homework so you land on the solution that works best for you. Get under the hood of every option and book demos so you can ask questions and get a real sense of how each solution works. (Here’s a handy comparison.)

The lowdown on accessibility testing and evaluation

Web accessibility is tested and evaluated with automated tools, manual testing, and user testing. Automated tools can quickly identify common accessibility issues, while manual testing allows for a more thorough assessment of the user experience. User testing with people who have disabilities provides valuable insights into real-world usability. 

Here are best practices for conducting accessibility audits:

Use a combination of approaches: Don’t rely on automated testing alone. Combine it with manual and user testing for a comprehensive audit. That’s really the only way you can catch every issue that might be a barrier to accessibility.

Document findings: Keep detailed records of the audit findings and the steps taken to address them. For example, note that the homepage navigation menu was not keyboard accessible and document the steps taken to fix it, such as adding appropriate ARIA roles and ensuring all links are reachable via the tab key.

Set a cadence for regular audits: Conduct regular audits to ensure ongoing compliance and identify new accessibility issues, and to improve user experience as technologies and user needs evolve.

But be realistic about what your team can handle. It could be that monthly audits will work best for them so they can chip away at tasks over time, or that doing an audit every six months and devoting a chunk of time to fixes makes the most sense.

Commit to regular testing: Digital accessibility is never done. User expectations change. Technologies change. Guidelines change. Never forget that it’s a long game that’s rooted in attending to details.

Don’t forget mobile

We all know that mobile devices are increasingly the primary, ubiquitous means of accessing the internet, and in some mobile-first regions, they’re really the only way to access the internet. If you leave mobile out of your accessibility testing, then you risk not reaching huge swathes of your audience.

WCAG guidelines apply to mobile web design in the same way they apply to desktop web design, including the principles of Perceivable, Operable, Understandable, and Robust.

There are, however, particular things you need to be aware of with mobile accessibility:

Small screen size: Limited screen real estate can make it challenging to present content clearly. Solutions include using responsive design that adapts to different screen sizes and text that's readable on small screens.

Orientation: To meet WCAG Level A requirements, the website has to be usable in both portrait and landscape.

Touchscreen navigation: Touchscreen devices can be difficult to navigate for users with physical disabilities. Solutions include alternative input methods, like voice commands and keyboard navigation. There should also be alternatives to complex pointer gestures, e.g., pinch to zoom or swiping.

Performance: Mobile devices typically have less processing power and slower internet connections. You’ll want to optimize images and videos, reduce page load times, and make sure that the website is lightweight and efficient.

Case studies: Successful WCAG implementations 

Compliance with WCAG is important from legal, UX, and inclusivity points of view, but it also affects business outcomes.

Here’s what a few of our customers have seen when they used our Accessibility products:

The City and County of Denver: With just two web administrators responsible for 6,000 pages and more than 12,000 PDFs, plus supporting 140 content authors, digital accessibility was a constant struggle. Once they deployed our Accessibility products, each content author could fix issues like inadequate alt tags themselves, which saved the web team enormous amounts of time. (Read Denver’s customer story.)

SIAG (Südtiroler Informatik AG): As an IT company that leads digital efforts across dozens of public agencies in northern Italy, SIAG dealt with ongoing confusion over who was responsible for accessibility. Automated accessibility scans from Siteimprove lightened the load for the SIAG team because they could easy assign accessibility tasks to different team members, from right within the platform. That made it much easier for them to keep pace with both EU and Italian accessibility laws. (Read SIAG’s customer story.)

NAH (Northern Arizona Healthcare): When this leading provider in Arizona took on CMS migration, accessibility was top-of-mind. In partnership with their digital agency, NAH took care of every detail related to accessibility before they fully migrated nearly 2,000 web pages. The result was a 100% Accessibility score — something we’ve never seen before and a testament to NAH’s commitment to inclusivity. (Read NAH’s customer story.)

WCAG sets the guidelines for digital accessibility, and it sets the pace and the precedence for inclusivity worldwide. If you stay on top of WCAG by adhering to their latest standards and keep abreast of what’s coming next, like WCAG 3.0, you’re primed to engage more of your audience, not to mention signal that your business is inclusive and embraces all people.

And guess what? You’ll if you get accessibility right on your site, you’ll likely see an uptick in conversions and possibly even in revenue.