Designing for the (WCAG) Future

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 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.

• Focus indication: Accessibility guidelines continue to harden the requirements for a focus indication. Our non-mouse users want to know what they are interacting with. WCAG 2.2 will provide stronger guidance on what makes focus indication understandable. This includes a minimum size of focus indication. While a contrasting colored border around a button would be adequate, you’ll need to reconsider minimal neumorphic designs.
  Intuit’s Design System includes a clearly defined focus indication.

Focus indication on primary buttons includes a blue border

• If it works with a mouse, it must work with a keyboard: Your designs must include interactive details for hover and focus. Drag and drop, tooltips, dropdowns, and menus must include clear specifications on how they interact with a keyboard or alternate methods to access information. For example, a drag and drop flow chart builder may include the same functionality via buttons and inputs.
• No more mystery meat: You can no longer hide buttons and information behind a hover activity. A classic example is a delete button that only appears when the user hovers over a table row or item in a shopping cart. The delete button must be available when the user is interacting with that item/row.
• Target Space: iOS and Android user interface guidelines have already included minimum touch targets. This helps those with “fat fingers” be more precise on which items they are touching. Moving forward, we will see the minimum target size also apply for web design. This helps those with mobility disabilities, such as Parkinson’s Disease. It also helps those using their laptop on a train, bus, or airplane.

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.

• Use simple, readable content: Intuit’s content design guidelines are based on a 5th to 8th grade reading level. Consider your audience, does your shopping site need the same reading level as the Wall Street Journal?
• Help me: Clearly display help information. This can include contact details, help menus, and chat bots. The help information also needs to be consistently located across the site.
• Pre-fill data on complex forms: Don’t make people enter data repeatedly. If a form includes multiple sections, pre-fill the information that has already been added in previous sections. There are exceptions for privacy and security.
• Short Term Memory Loss: People should always know what they’ve completed, how did they get there, and what’s next. Don’t make people re-learn an interface or figure out what’s next.
  For example, an accountant has started a tax return: what has been completed, what was requested from a client, the status of requests, and the current step within a process.

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.

• Placeholders are not labels: Placeholder text, the light grey text that suggests what a user would enter into an input, is NOT a label. It’s a suggestion. This leads to a large portion of your customers not knowing what the inputs represent. Use actual labels and helper text below the inputs for suggestions and additional information.

• Don’t depend on color: You can’t depend on color to differentiate buttons, links, states, or importance. You must include 3:1 contrast between items when color is the only differentiator.
  For example, blue links within a paragraph may be unrecognizable to someone with low vision or color blindness. These would require 3:1 contrast between the link and the paragraph text, while also maintaining 4.5:1 against the background color. Instead, add an underline to inline links and remove the underline on hover/focus. This provides a secondary visual reference.
• Bits and pieces: Non-text items need 3:1 contrast. This includes icons, radio buttons, checkboxes, switches, chevrons, badges, and other interactive and contextual elements.

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.

• Customer research: Include people with motion sickness in your customer research studies. At Intuit, we’ve leaned heavily on colleagues that depend on reduced motion settings for their computers and phones.

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.

• Size matters: Not all animation needs an alternate design. Animation’s impact on people is relative to the size, speed, and intensity of the animation.
• Intuit has two loading spinners. One is a circle that has an animated fill. This does not require a secondary, reduced animation.

The basic loading animation is a circle with a border that shifts from grey to blue

• There’s also a dramatic spinner that bursts into multiple spinning circles. This does include an alternate version of “Loading” text.
  Full animation:

The full animation features four dots that spin and grow

• Reduced motion:

The reduced animation is simply the word “Loading…”

• Danger! Page animations: You must provide an alternate motion style for effects that incorporate the entire page. This includes parallax scrolling and scrolljacking. Remove these effects when the user has enabled Prefers Reduced Motion or re-consider adding them at all.
• Don’t Flash: Fast, blinking animations can trigger an epileptic seizure in some of your customers. Nothing can flash more than 3 times in one second.
• I get it already: Animations cannot loop for more than 5 seconds. These create attention traps for people trying to complete a task. They can also trigger repetitive screen refreshes in screen readers. You must allow the user to pause animation if it lasts longer than 5 seconds.

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.