Beyond the Marketing Minute: WCAG 2.1 Compliance Tips for Designers

Posted on October 13, 2022 in Blog, Video

On June 5, 2018, the World Wide Web Consortium (W3C) published WCAG 2.1, the newest version of Web Content Accessibility Guidelines for how web designers and UX professionals should make websites and all digital technology accessible to people with disabilities. Now, we dive into how to comply with the guidelines on your website.

Is WCAG 2.1 a legal requirement for my business?

The Americans with Disabilities Act (ADA) requires that “places of public accommodation” – essentially organizations open to the public – must be accessible to disabled persons. This also means that the online presence of these businesses needs to comply. Business and institutions affected by this law include:

Financial institutions
Restaurants
Retail stores
Parks and recreation
Hotels
Daycare centers
Theaters
Private schools
Medical offices
Museums and libraries
Pharmaceuticals
Higher education

Does WCAG apply to mobile apps?

Yes. There are not currently separate guidelines for mobile apps, but WCAG guidelines apply to all online properties, including apps. You can easily apply an accessibility checklist for WCAG 2.1 while designing your mobile app. Creating a more accessible user experience means you leave your business open to more customers.

How do I check website accessibility?

We touch on how to run your own accessibility audit in another Monday Marketing Minute. In this week’s Monday Marketing Minute, UX researcher and designer Rebecca West touched on her top 5 WCAG-compliance tips for designers to keep in mind when designing for compliance. If you missed it, check out the video and her tips below.

In this week’s Monday Marketing Minute, UX researcher and designer Rebecca West touched on her top 5 WCAG-compliance tips for designers to keep in mind when designing for compliance. If you missed it, check out the video and her tips below.

What are the three levels of WCAG compliance?

There are three levels of WCAG compliance: A, AA and AAA. The three levels of conformance are defined: A (lowest), AA, and AAA (highest). The easiest way to think about the three levels is this:

Level A – You must satisfy these requirements. Otherwise, one or more groups of people will find it impossible to access your web content.
Level AA – You should satisfy these requirements. If you don’t, some groups may find accessing your web content difficult.
Level AAA – You may satisfy these requirements in order to make it easier for some groups to access the web content.

Get your FREE WCAG Audit and Report

Start Your Audit

Moving from WCAG 2.0 to WCAG 2.1

Similar to the way many video game consoles make new systems backward compatible, WCAG 2.1 builds upon and is backward compatible with WCAG 2.0. This approach means that anyone conforming to 2.1 is also covering 2.0 guidelines. What’s new with WCAG 2.1?

The following Success Criteria released by W3C showcases the new website accessibility standards in WCAG 2.1 and what level of WCAG compliance (A – AAA) the guideline applies to.

Tips for designers to comply with WCAG 2.1

There are a lot of guidelines that designers will want to consider when designing for WCAG 2.1 compliance and each level of compliance (ranging from A to AAA) is different.

The full list of guidelines for compliance can be found on the W3C website.

Here are some of the highlights:

Content should appear and operate in predictable ways.
- Navigation mechanisms that are repeated on multiple pages should appear in the same place each time.
- User interface components that are repeated on web pages should have the same labels each time.
According to the W3C, the contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios become more forgiving with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1.
Text should be resizable up to 200% without losing information, using a standard browser.
Don’t use color alone to make critical information understandable.
- Try to use an indicator other than color such as text labels or patterns. When showing errors on the screen, don’t rely on colored text alone, add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text in a paragraph so the links stand out.
Write useful alternative text for your images and other non-text content.
- Try to describe what’s happening in the image, and how it matters to the story, rather than just saying something like “picture” – context is everything. This is also beneficial to your website’s SEO.

We’re Experts in Digital Accessibility

Our experience makes accessibility projects quick, thorough and effective. WCAG 2.1 offers important recommendations for designers and UX professionals so they can update and create websites and digital content in a host of industries to make them more accessible than ever to millions of users with a range of sensory disabilities. We believe this should be a priority for all businesses to create a more inclusive digital environment and we’re dedicated to leading the charge.

If you need help getting your site compatible with WCAG 2.1 standards (and as WCAG 2.2 standards get ready for release), reach out to the team at Oneupweb for help making your website accessible.