Designing for the (WCAG) Future

Ted Drake
Ted Drake
Mar 23 · 7 min read

The Americans with Disabilities Act was signed into law in 1990. This fundamentally changed how we designed spaces and created inclusive experiences. However, the law came before the Internet and designing for digital experiences. As our designs and technology have evolved, so have the guidelines for making them inclusive.

The Web Content Accessibility Guidelines (WCAG) are the international standard for accessible product development and inclusive design. Their goal is to provide equal access to information and services to everyone, regardless of their physical, cognitive, sensory, or socio-economic needs. They are living documents that are updated regularly to support all forms of digital experiences. This article will help you understand where we are today and what to expect in the next few years.

Web Content Accessibility Guidelines

The International standard for accessibility is the WCAG 2.1 guideline. There are three levels: A, AA, and AAA. The first level rules should be achieved by everyone, as they are considered best practices. The second level, AA, is the standard requirement. The third level, AAA, provides the ultimate level of accessibility. Intuit’s accessibility standard is WCAG 2.1 AA, with compliance of some AAA rules.

The WCAG 2.2 Guidelines are currently in the final stages of approval and may be officially released in 2021. There’s also work on WCAG 3.0, which broadens the scope to embrace cognitive disabilities and expands the definition of compliance.

Designing for today and the future

I had two art history courses in college, the pre-Renaissance class included hundreds of slides and required rote memorization. The post-Renaissance course focused on the most important works of art, how they changed artistic presentation, and why I should remember them. I remember the Venus of Willendorf from the first class, yet I still know the relationship between Mannerism and Pop Art from the second course. With this in mind, let’s focus on what you need to know for today’s accessibility and the future.

Venus of Willendorf, a small fertility goddess sculpture with exagerated head, breasts, and hips.
Venus of Willendorf, a small fertility goddess sculpture with exagerated head, breasts, and hips.
Venus of Willendorf as shown at the Naturhistorisches Museum in Vienna, Austria, in January 2020. [cc: Bjørn Christian Tørrissen]

The mouse is dead

You can no longer design for a mouse-only experience. Technology platforms and user input options have destroyed the mouse’s dominance in user interface design. You must consider keyboard, speech recognition, touch, and switch navigation. Fortunately, supporting your keyboard users will also prepare your designs for the other inputs.

An example button with the word: Primary
An example button with the word: Primary
Focus indication on primary buttons includes a blue border

Mind your Ps and Qs

Cognitive accessibility, including short term memory loss, reading disabilities, and attention deficit disorder, receives greater attention in WCAG 3.0. The goal of these guidelines is to make your designs predictable, readable, and understandable.

Color Contrast — uggh

Adequate color contrast is probably the most painful and confusing part of WCAG requirements for designers. Each version of requirements adds new rules for which elements require certain contrast requirements.

In general, you need to provide 4.5:1 contrast between body text and the background color. Large text, icons, and logos need 3:1 contrast. The exception being disabled controls and decorative text. WCAG 3.0 recognizes the confusion and difficulty of color contrast and promises to simplify the rules and introduce new contrast algorithms to match human perception.

A sample text input with a visible label, placeholder, and helper text.
A sample text input with a visible label, placeholder, and helper text.

Don’t make me sick!

Requirements for animation have remained static, but motion design has increased dramatically. Today’s design trends are literally making people sick, incapable of concentrating, and frustrated. Animation can be great, especially for people that need help locating what has changed, needs attention, and understanding the state of a process.

Create motion design for everyone. This includes specifications on alternate animations for people who prefer reduced motion on their devices. You should also include alternate text for motions that convey content.

Also include people who benefit from animation. For example, reach out to your colleagues that have recently recovered from COVID or cancer. Brain fog is a common, temporary side effect and subtle animation can help them focus.

Animated loading example with a semi-filled circle
Animated loading example with a semi-filled circle
The basic loading animation is a circle with a border that shifts from grey to blue
four dots that spin to illustrate an animation
four dots that spin to illustrate an animation
The full animation features four dots that spin and grow
Loading…
Loading…
The reduced animation is simply the word “Loading…”

You’ve got this

Designers are problem solvers. We flourish when given a creative challenge with clear restrictions and resources. Our goal is to create delightful experiences for our customers — all of our customers. Understanding and incorporating the WCAG guidelines will broaden your outreach and ensure everyone can successfully use your product.

Intuit Design

Musings from the creative community at Intuit

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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