Demystifying WCAG: A Must for Every UX Writer
Demystifying WCAG: A Must for Every UX Writer
Your product is not for the disabled. Yes, you should still care.
But our product is not for ‘disabled’ people.
It’s common to look at the extreme and say that someone with dementia or blindness is not our target user, and that’s the biggest oversight. Designing for accessibility and inclusion doesn’t mean designing only for permanent disability. It means designing for everyone in all situations.
Consider a new parent juggling chores one-handed while cradling their baby or someone temporarily using Siri due to blurred vision from chopping onions. Picture yourself trying to watch a movie in an unfamiliar language without subtitles.
Do you know how the World Health Organisation (WHO) defines disability?
Hint: It’s not a personal ‘health’ attribute.
Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives.
~ WHO
It's not the body but the environment and context that defines disability. The scenarios I mentioned are situations many of us face, unrelated to abilities or health. Yet, they can render us 'disabled' and excluded.
Accessibility ensures an open experience for all, irrespective of the extent or duration of their disability. WCAG ensures the delivery of that inclusive experience.
With accessibility, you transform user emotions from exclusion to empowerment.
Today, let's explore the world of web accessibility through the lens of WCAG. We’ll cover:
What’s the buzz around WCAG?
Why you should care about it?
Guiding principles and compliance levels
Common violations and prevention
An exercise in empathy and accessibility
What is WCAG, and who does it benefit?
WCAG stands for Web Content Accessibility Guidelines, a set of technical standards that make web content more accessible to people with disabilities. They are developed by the World Wide Web Consortium (W3C), an international organisation responsible for web standards.
So you see that WCAG acts like a giant umbrella, providing a friendlier online environment for people with:
Visual Impairments like colour blindness, blurred vision, cataracts, macular degeneration, and diabetic retinopathy. Or me while chopping onions.
Motor Impairments like muscular dystrophy, cerebral palsy, arthritis, damaged limb, multiple sclerosis, and Parkinson’s disease. Or me navigating a desktop with no trackpad or mouse.
Hearing Impairments like deafness, sounds reaching the ear getting muffled, distorted, and a whistling or crackling noise along with the sound one is actually hearing. Or me trying to communicate at a loud concert.
Cognitive Impairments like autism, dyslexia, attention deficit disorder, and memory deficit. Or me failing at solving CAPTCHA. 🌚
So, WCAG benefits millions of people around the world who have disabilities (of any kind) and make web content more accessible to them.
Reason enough to care? Let me give you more.
Imagine you're a UX writer crafting the perfect message. You want it to reach hearts and minds, right? Making your content accessible is like turning up the volume of your message. (And the empathy quotient of your product)
Here are some ‘business-centric’ benefits of being WCAG compliant:
Improved user experience: Accessibility makes your users feel seen, heard, and understood—a game-changer in UX!
Increased reach: When your content is accessible, you're not just speaking to a crowd. More readers, more impact.
Reduced legal risk: Many countries have laws that require digital products to be accessible. So, accessibility isn't just a nice-to-have; it's a legal must-have. Staying on the right side of the law can save you from potential headaches.
Improved brand reputation: Accessible websites mean happy users. And happy users mean fewer support tickets and more love for your brand.
Improved quality and usability: Following WCAG guidelines isn't just about compliance; it's about elevating the quality of your content. Clean, accessible design is the secret sauce for success.
Staying ahead of the curve: The digital landscape is evolving, and accessibility is a
trendnorm here to stay. Set the tone. Don’t be the one catching up.
Okay, tell me more.
The fantastic four principles of WCAG: POUR
P - Perceivable: Where vision and hearing are involved, like an image, podcast, or video.
O - Operable: is about physical controls and interactions, like using a keyboard, mouse, or voice commands.
U - Understandable: concerns intellectual abilities, like technical or jargon-filled language, sarcasm, metaphors, or higher literacy level.
R - Robust: means all kinds of technologies (old and new) can access your website’s code without errors or inconsistencies.
Three levels of WCAG: A, AA and AAA
Level A is the minimum level of accessibility, and Level AAA is the highest level.
Each level contains a set of criteria that must be met to meet that level of accessibility.
Level A: The minimum for accessibility. It covers the basics—making content perceivable, operable, and understandable.
Level AA: The sweet spot for most organizations. It includes Level A criteria plus extras, like captions for videos and accessible keyboard navigation.
Level AAA: The superhero level. It goes above and beyond, making content even more accessible. It's like the gold standard but might be overkill for some.
Common WCAG violations
Here are 7 common WCAG red flags (and how you can take them down):
Missing alt text for images: Describe your images accurately. Imagine explaining them to a friend who can't see. (Read my stack on writing alt text for web and social media.)
Missing captions and transcripts: Videos need subtitles, and audio needs transcripts. Don't leave anyone out of the conversation.
Keyboard inaccessibility: Can users navigate without a mouse? Test it out with just a keyboard.
Sensory reliance: 1. Instructions provided through sensory characteristics (e.g., colour, shape, sound, size) must also be provided in the text. For example, an 'error' in form shouldn't just be the field turning red; it should explicitly show an error with a sound, icon and descriptive text.
Missing form labels: Clearly label your form fields. It's like providing a roadmap for your users.
Non-descriptive links: Links should speak for themselves. Avoid vague "click here" situations.
Complex Language: Keep it simple. Clear and concise language is a win for everyone.
Exercises in empathy and accessibility
Do one or all of these:
Operate your favourite website with just the keyboard.
Watch an unreleased movie’s trailer with audio and captions off.
Use your laptop/desktop in black-and-white mode.
Use voice commands for every digital interaction for a day.
Feel free to share your experience in the comments or on LinkedIn and motivate others to do the same.
Note: This exercise is a glimpse into how someone with a permanent disability might navigate the web. It is NOT a substitute for research, interviews, and real-life observation of how people with disabilities interact and adapt to barriers every day.
Care to share your thoughts on this newsletter? It’ll only take 2 minutes.