Designing beyond barriers: A creative’s guide to the Web Content Accessibility Guidelines (WCAG)

Did you know that worldwide, 2.2 billion people (over a quarter of the world's population) are vision impaired? Or that experts estimate 1 in 10 people will have disabling hearing loss by 2050?

Would it surprise you to learn:

The statistics above, and countless others like them, underlie a simple point: Physical or cognitive disabilities and impairments aren’t rare. In fact, they're downright common.

We don't always treat them as common, though, and that's the trouble with norms: They add up to create an "average" user who doesn't actually exist. The fact is, we're a large and diverse population with extremely diverse needs. And whether it’s directly or through someone we know, disabilities and cognitive differences intersect with our lives more often than they don't.

That’s why it’s in our best interest, as graphic designers and/or content creators, to make our work accessible. Accessibility is the practice of creating graphics, content, and interfaces that are functional for all users, regardless of their abilities or limitations. Whether you're writing a blog post or guide, designing graphics for social media, or producing a Tik Tok video, accessible design principles can help you resonate with every corner of your target audience.

And who wants to make content that doesn’t resonate with as many people as possible?

In this post, we’ll dive into tips and best practices to make your work not just accessible, but wonderfully so. These insights are guided by the four fundamental principles of the Web Content Accessibility Guidelines (WCAG): perceivable, operable, understandable, and robust. While the WCAG principles are essential for web design, they also apply to graphic design, videos, blog posts, and any other digital content you can dream up.

Accessibility guideline #1: Perceivable

What it means: Perceivable means users can perceive your design (or know what they’re meant to take away from it) regardless of their sensory abilities.

Who it’s for: Highly perceivable designs are more inclusive for people with full or partial vision and/or hearing impairments.

How it works: Perceivability tips and tricks roughly fall into two categories: 1 – Alternative ways to access the same information, like image captions and audio transcriptions; and 2 – Visual and stylistic choices that accommodate people with low vision and/or color blindness, like legible fonts and color schemes with high contrast. Let's explore these now.

Tips and tricks for a perfectly perceivable design

Highly perceivable content widens your reach by helping you convey your full intended message to everyone. Here’s how to make your content perceivable and enjoyable for every type of user:

✅ Transcribe or caption videos and audio for hearing-impaired folks – Make sure the text syncs with the audio, and include details like speaker names, sound effects, and music. Audio transcription software or AI can save you tons of time here; just make sure to review each transcript and correct any errors.

✅ Add descriptive captions or alt text to each image – If you’re sharing your design on social media, add a text caption describing the design or image for vision-impaired users relying on screen readers. It’s most common to add the caption in brackets above or below the image, like this:

[Image caption: An orange cat and a black-and-white cat snuggle together on a soft blanket, the black-and-white cat nuzzling the orange cat’s face.]

For blog posts or website content, use alt text (alternative text) to describe your images. Like captions, alt text is a primary way visually impaired users understand images and their context.

How detailed should each description be? One sentence or less typically gets the job done, but feel free to include extra details to make the description more vivid (in the example caption above, I added a few extra details to highlight the snuggly relationship between the kitties). This practice is always welcome–as long you don’t burden the reader with information that isn't contextually relevant. In general, prioritize efficiency.

✅ Be careful with infographics and image-based text – If your text is embedded in the image itself, it doesn’t exist for screen readers. Remember, screen readers can’t interpret an image’s contents–they can only label it with the alt text you provide.* If any of your image text is crucial, rewrite the text in HTML using alt text or by adding a caption or paragraph below the image.

*Image recognition is rapidly improving, so this may not be an issue for much longer. In the meantime, adopt the “Better safe than sorry” approach.

Similarly, your infographic full of painstakingly researched information is inaccessible to screen readers until you reiterate the content in HTML. To make your design accessible, provide a text-based summary of key points alongside the infographic. Even better, repurpose your infographic into a blog post featuring the same key information.

✅ Use appropriate fonts and sizes to meet a variety of reading needs – The previous tip highlights a key point: fonts serve a functional purpose. They can’t do their job if they’re too small, too thin, needlessly decorative, or competing with 20 other fonts.

Generally, size 14+ font makes for nice and readable body text.

As for fonts: Sans-serif fonts are often easier on the eyes and friendlier for dyslexic users than serif fonts, as their simpler design reduces visual complexity. This makes them a better choice for body text and larger blocks of text. Reserve your fancy serif fonts for larger, less-wordy options like the title.

✅ Choose font colors that contrast with the background – And by contrast, I mean dark gray on a white background (good contrast!😀), not red on a green background (bad contrast☹️). Dark backgrounds with white or nearly-white text also look great.

✅ White space is your friend – White space is the empty space between and around your design elements, and it helps create a sense of balance, harmony, and focus in the design. Use it generously to make your designs more approachable and less overwhelming.

In written content, the breaks between paragraphs and headers are another form of white space. Leverage them by breaking up long paragraphs and other large blocks of text–a practice that's especially helpful for people with cognitive impairments or ADHD.

Accessibility guideline #2: Operable

What it means: Operability ensures that the features and navigation of your design are accessible and usable by everyone, regardless of their physical abilities or the devices they use. This includes making sure users who rely on keyboard navigation, voice commands, or assistive technologies can interact fully with your design.

Who it’s for: You’re designing for the full spectrum of people here, which includes people with physical or cognitive impairments and/or neurodivergent processing styles (autism and ADHD).

How it works: Of the three remaining WCAG guidelines, operable and robust impact websites and product interfaces more than they impact graphic design and content. For our purposes, we want our design to be good at conveying the information it means to convey.

Operability tips and tricks

Here’s how we can ensure our design is not only visually appealing, but also fully operable and accessible:

✅ Use headers, lists, bullets, and text styling to structure your content – If your design includes a lot of content, use various font sizes, weights, and styles to create a visual hierarchy and demarcate different types of text. This approach not only makes the text more skimmable but also aids understanding and navigation, especially for people using screen readers. Headers, for example, are used by these assistive technologies to navigate content efficiently.

✅ Once you’ve established an information hierarchy, keep it consistent – Disabled and nondisabled users alike are amazing at picking up on patterns in your design and anticipating what comes next. Don’t subvert their expectations by introducing a new font midway through the design or changing the style of a header or label.

The same principle applies to visual patterns and indicators that have been established in the wider industry. For example, users associate underlined words with hyperlinks, so underlined text that isn’t clickable can be confusing and/or frustrating.

✅ Add labels or instructions to form fields – The next time you fill out a form on a website or arrive at an ecommerce store’s checkout page, pay attention to how the form looks and behaves. Form fields are another area where deviating from the expected norm can cause confusion.

To improve usability for people with visual impairments or cognitive challenges, make every box on your form clear and well-outlined. Label each field with the type of information you want the user to enter; consider using placeholder text to guide the user’s input.

✅ Don’t rely on color alone to convey information – If you’re using color as a label or distinguishing element for your text, charts, or other design elements, remember to pair it with another visual cue like a shape, icon, pattern, or text. Otherwise, your colorblind users will have no idea what they’re supposed to take away from the design.

✅ Avoid flashing, flickering, and moving content – Strobe effects, flashing lights, and rapid changes in brightness or color can trigger seizures and other adverse physical reactions in some viewers. If you make videos or interactive content, stay extra aware of this one.

✅ Just say no to autoplay – If you’ve ever clicked on an article at work hoping to take a quick reading break between other tasks, only to have a blaring video advertisement announce your off-task adventures to the whole office, then you’ve already encountered the hell that is autoplay.

Beyond creating workplace embarrassment, autoplay videos can cause significant discomfort and anxiety for people with autism, ADHD, and/or sensory processing issues.

Accessibility guideline #3: Understandable

What it means: Your content or design is understandable to your target audience and avoids needless complexity. A website with a straightforward navigation menu and clear, concise text is far more understandable than one cluttered with technical jargon and a confusing layout.

Who it’s for: Plain language and clear visual cues make your design more inclusive for non-native English speakers and people with learning disorders or cognitive impairments.

How it works: As graphic designers and/or content creators, our focus is on presenting the right information at the right time, using language and visuals that resonate with our audience.

How to make your design more understandable: Tips and tricks

Clear and accessible communication is key to reaching and engaging with your diverse audience. Here’s how you can ensure your content is not only visually appealing but also straightforward and easy to comprehend for all users:

✅ Break up your text — Integrate pictures, videos, icons, charts, or illustrations to make your text more approachable and less daunting. This approach serves a dual purpose: First, it makes the text more readable and less overwhelming, particularly for users with cognitive impairments or ADHD. Second, it provides more visual learners with an alternative way of processing or reinforcing the material.

✅ Feature a variety of content formats – Remember, accessible design isn’t about designing for one particular type of user; it’s about making choices that include everyone. And the more options you can provide – videos, infographics, checklists, slideshows, and interactive content – the more needs you can meet.

For example, videos can be particularly engaging for auditory learners, especially when accompanied by captions for those with hearing impairments. Infographics can appeal to visual learners and are even more effective when paired with descriptive text for screen readers. So go ahead, mix it up and enrich your audience's experience!

✅ Use clear, specific language resonates with your target audience – Steer clear of industry jargon and complex technical terms, unless you are certain your audience is familiar with them. Embrace a style that favors specific, concrete language–your content should be easily digestible, not a linguistic obstacle course.

During the edit, scour your content for opportunities to cut words, reduce needless complexity, and replace vague language with specific, concrete details.

For example, instead of saying:

“Utilize our streamlined solution to optimize your workflow,”

You could say:

“Use our social media scheduling tool to organize and post content across Facebook, Instagram, Tik Tok, and X/Twitter.”

Admittedly, in the edit above we did have to add some words to make our vague language more concrete (“streamlined solution” became “social media schedule tool,” while “optimize your workflow” became “organize and post content across Facebook, Instagram, Tik Tok, and X/Twitter.”). However, we also transformed “utilize” into the less obtrusive “use,” and we made it clear what our product actually does. In this case, we can forgive ourselves for adding words because we’ve done so to add clarity.

✅ Define unfamiliar words and concepts up front – If you’re not sure if everyone in your audience knows a particular word or concept, take a moment to provide a brief definition when you first use the term.

If you’re worried about adding bulk to your content, link to glossaries and resources instead (“Before you begin your content marketing campaign, determine which KPIs you’ll use to measure your success.”). This lets readers explore further as needed, without cluttering or bogging down the content.

Accessibility guideline #4: Robust

What it means: A robust design is one that can be interpreted by a wide variety of assistive technologies. This means ensuring that your design elements and content are compatible with different platforms and devices, from screen readers to voice recognition software.

Who it’s for: This guideline primarily benefits people using assistive technologies like screen readers, magnifiers, voice recognition software, and other specialized tools and devices.

How it works: Web developers are the primary people responsible for interoperability (robustness); as a graphic designer or content creator, you’re somewhat off the hook. However, you can take extra measures like ensuring your design is optimally viewable on a mobile device and regularly testing your content with different browsers and tools.

Tips for a robust and versatile design

✅ Always manually check how your designs translate across different devices and platforms—Let’s say you’re designing a Facebook post on your laptop. You create your design, add text, and save the design (post and text) as a single image. When you upload your image to Facebook, is the text still readable on mobile?

Even mobile-responsive templates and platforms can’t guarantee that your images will convey their intended meaning when they’re shrunk to a smaller size. That’s why it’s a good practice to manually test your design on different screen sizes.

✅ Test the design or content with assistive tools – You can also test your design or content with various assistive tools to check their compatibility and usability. This can include running screen reader tests and using tools like Accessibility Checker to highlight possible accessibility issues.

Accessible design makes content better, period.

Feeling overwhelmed by all the factors that influence accessibility? Don't be! Most of these principles are far more intuitive than they first seem. If you review the tips again, you’ll notice that in most cases, the experience you would want to have aligns perfectly with the experience your disabled users want to have.

That’s the beautiful thing about accessibility: The needs of disabled users, while sometimes more pronounced, aren’t fundamentally different from the needs and preferences of the average user. For example, low-vision users have a more pressing need for eye-friendly fonts and sufficient background contrast, but the average user wants and appreciates those features, too.

And besides, you don't have to get it perfect right out of the gate. If something isn't quite right or there's an aspect you overlooked, trust that your users will tell you what they need. Stay open to feedback, keep learning, and remember: the designs that make the biggest impact are the ones that welcome everyone.