Beyond the Marketing Minute: WCAG 2.1 Compliance Tips for Designers
On June 5, 2018 the World Wide Web Consortium (W3C) published WCAG 2.1, the newest version of guidelines for how web designers and UX professionals should make websites and all digital technology accessible to people with disabilities. Back in January, we wrote about the impending arrival of 2.1 and how complying with digital accessibility guidelines positively affects your business.
Do I need to comply with WCAG 2.1?
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
- retail stores
- parks and recreation
- daycare centers
- private schools
- medical offices
- museums and libraries
- higher education
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.
Moving from WCAG 2.0 to WCAG 2.1
Much like Xbox did when it made its 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. So, what’s new with WCAG 2.1?
The following Success Criteria released by W3C showcases what’s new in WCAG 2.1 and what level of WCAG compliance (A – AAA) the guideline applies to.
- 3.4 Orientation(AA)
- 3.5 Identify Input Purpose(AA)
- 3.6 Identify Purpose(AAA)
- 4.10 Reflow(AA)
- 4.11 Non-Text Contrast(AA)
- 4.12 Text Spacing(AA)
- 4.13 Content on Hover or Focus(AA)
- 1.4 Character Key Shortcuts(A)
- 2.6 Timeouts(AAA)
- 3.3 Animation from Interactions(AAA)
- 5.1 Pointer Gestures(A)
- 5.2 Pointer Cancellation(A)
- 5.3 Label in Name(A)
- 5.4 Motion Actuation(A)
- 5.5 Target Size(AAA)
- 5.6 Concurrent Input Mechanisms(AAA)
- 1.3 Status Messages(AA)
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.
WCAG 2.1 is finally here with new 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.
If you need help getting your site compatible with WCAG 2.1 standards, reach out to the team at Oneupweb.