What’s WCAG? For UXers.

Published in

Inclusify by Design

4 min readOct 2, 2020

Person writing on whiteboard — Photo by Startup Stock Photos from Pexels

The Web Content Accessibility Guidelines (WCAG) are a set of international standards developed to establish accessibility rules for websites. These guidelines specifically cater to users with visual, motor, and hearing impairments.

There are different grades of accessibility in WCAG: a minimum (AA) and enhanced (AAA) level of accessibility. WCAG is not a legal requirement for most websites — currently, the minimum level of accessibility is only required by government-related websites. However, these standards were created with all websites in mind, as everyone deserves the ability to access content online.

Principles and Disability Models

Glenda Sims, Team A11Y Lead at Deque, points out that there are 4 Principles that WCAG follows:

Perceivable. Can content be perceived?
Operable. Can content be used?
Understandable. Can content be understood?
Robust. Can content reach many people?

WCAG was created to apply the Social Model of disability. But what does that mean?

There are two prevalent models of disability: the Medical Model, which puts the problem of accessibility on the user, and the Social Model, which puts the problem of accessibility on the environment.

Here is a visualization of the Medical Model:

Visual of medical model of disability — Visualization of medical model of disability. Source: Ruby Zheng and Interaction Design Foundation.

A similar example of this model can be applied to accessing education. If a person from a low economic background does not have enough money to pay for college, they might not be able to get a better job to remove themselves from their low economic status.

The other model is the Social Model of disability:

visual of social model of disability — Visualization of social model of disability. Source: Ruby Zheng and Interaction Design Foundation.

This model changes the perspective to the environment having barriers that prevent access, not the ability of the user. WCAG, then, is based on the idea that the problem of access lies within the environment — not the user.

In the prior example of access to education, this perspective tells us that the education system needs to break the financial barriers so that people can earn degrees in higher education and consequently earn higher paying jobs.

The web elements that WCAG aims to impacts are:

“Natural information such as text, images, and sounds”
“Code or markup that defines structure, presentation, etc.”

At first glance, it seems as if WCAG was made for programmers — not designers. However, on closer evaluation, there are standards that our work will directly affect.

Accessible Practice

Programmers directly implement our designs for both UX and UI. In my own experience, programmers on past design projects have directly copied my work from Figma’s code feature. Developers often don’t have time to double check that our work is accessible. To ensure that we are doing our part in creating websites that are accessible to everyone, we need to incorporate accessible practice.

Avinash Kaur does an amazing job at breaking down accessible UX practice in her “Accessibility guidelines for UX Designers.” Check out her article for specific practice.

Another breakdown of inclusive practice for UX is Daniel Shwarz’s “WCAG 2.1 Checklist-Guide to Accessibility.” He includes graphical examples of accessible practice and describes actionable steps for accessibility. In addition to outlining ways to be accessible to users with physical disabilities, he also writes about designing for reading difficulties.

Designing for Cognitive Impairments

WCAG has standards for physical disabilities. However, we must also be cognizant of our designs’ implications for cognitive impairments.

According to WebAIM, “Individuals with cognitive or learning disabilities may use a wide variety of technologies to adapt or simplify content to their needs. Text-to-speech, screen readers, customized fonts or page colors, text simplification, and other techniques might be used. Even though such technologies are available, authors must also consider the design of their content to minimize cognitive difficulty.”

Some accommodations that designers can have in their design include:

Memory deficits.
Problem-solving deficits.
Comprehension deficits. This includes reading, linguistic, verbal, math, and visual comprehension.

WebAIM provides many examples of how the design decisions of websites can exclude people with these types of cognitive impairments.

Incorporating Practice

Designers have a lot to consider in terms of accessibility, and it can often seem overwhelming. However, by starting with the WCAG standards — even in class projects or hackathons — we can build accessible practice into our routine design process. One way you can start is by challenging yourself to implement a few strategies in your next project, then build from there. I myself practiced this through my internship, and I continue to do it in my blogs!

Through UX Design internship, I started looking at color contrast, and I began to incorporate accessible contrast in my interfaces for projects that followed. Next, I began considering ALT text, and I realized that even though people might think ALT text is for coding, it can also be applied to graphics in presentations and blogs. Over time, as I continue to become more comfortable with each consideration, I can start tackling the next in an effort to generate more inclusive content. To learn more about WCAG and accessible design practice that you can begin incorporating into your workflow, check out the “Extra Resources” section.