Overview
Accessibility is often viewed as a technical checklist, something to be added after the design is done. But the reality is that many beautiful, thoughtfully crafted websites still exclude users—not because designers are careless, but because there is simply too much to remember. This tutorial helps you integrate accessibility into your design process by using a classic usability heuristic: recognition rather than recall. Instead of memorizing every guideline, you'll learn to make potential accessibility issues visible during your design workflow.
In this guide, we’ll explore why good designers sometimes create bad (inaccessible) websites, and we’ll provide a step-by-step method to close that gap. By the end, you'll have a repeatable process that reduces cognitive load on you as a designer while increasing inclusivity for your users.
Prerequisites
- Basic understanding of user interface (UI) and user experience (UX) design principles.
- Familiarity with at least one design tool (e.g., Figma, Sketch, Adobe XD).
- Optional but recommended: awareness of WCAG 2.1 guidelines.
- A willingness to challenge your own design assumptions.
Step-by-Step Instructions
1. Recognize That Exclusion Is Often Unintentional
Before we get into techniques, let’s acknowledge a fundamental truth: no designer wakes up intending to exclude people. As the original article notes, “Designers are good people.” But good intentions don’t always lead to inclusive outcomes. The problem is that the human mind can only hold so many guidelines at once. Your goal is not to memorize every WCAG success criterion; it’s to embed accessibility checks into your natural design routine.
2. Adopt a Heuristic Mindset
Jakob Nielsen’s 10 Usability Heuristics for User Interface Design have been around since the mid-1990s. They are concise, memorable, and surprisingly effective when applied to accessibility. The key heuristic for our purpose is #6: Recognition rather than recall. Originally, this heuristics says that users shouldn’t have to remember information from one part of the interface to another—it should be visible or easily retrievable. We’re going to turn that around: as a designer, the information you need to create an accessible design should be visible or easily retrievable while you are designing.
Action: Create a short list of heuristics that combine usability and accessibility. For example, “Is there enough color contrast?” or “Can this be navigated with a keyboard alone?” Keep this list pinned to your workspace (physical or digital) so you see it constantly.
3. Build a Visual Accessibility Dashboard
The original article suggests “making accessibility issues easier to recognise.” One powerful way to do that is by designing your own accessibility dashboard—a set of visual cues that sit alongside your design canvas. Here’s how:
- Color contrast checker overlay: Use a plugin (e.g., Stark in Figma) that flags low-contrast text instantly.
- Focus indicator mockup: Always include a layer that shows what the keyboard focus outline looks like on interactive elements.
- Screen reader preview: Add a text layer that reads out the intended alt text for images or heading hierarchy.
- Responsive breakpoint markers: Show how the layout changes at different zoom levels or viewport sizes.
By making these checks visible, you reduce the need to recall them from memory. Over time, they become second nature.
4. Incorporate “Recognition” into Your Design Review Process
Schedule a dedicated 10-minute “recognition walk” during each design review. During this walk, you look only for accessibility red flags. Ask questions like:
- “Can I read all text without squinting?”
- “If I only used a keyboard, could I complete the primary task?”
- “Is any information conveyed solely through color?”
- “Are there any unlabeled form fields?”
Write these questions on a sticky note and attach it to your monitor. The goal is to recognize issues without having to remember a long checklist.
5. Use Real-World Scenarios as Heuristic Triggers
Recall the example from Aral Balkan’s essay This Is All There Is: a bus timetable app that can affect life events (like missing a daughter’s birthday) or death events (like missing a chance to say goodbye to a dying grandmother). Use such emotional triggers to remind yourself that accessibility is life-or-death. Every time you create a button, text, or navigation element, ask silently: “Could this prevent someone from reaching a loved one?” This emotional anchor makes the heuristic stick.
Common Mistakes
Mistake 1: Assuming Accessibility Is Only for Developers
Many designers believe that accessibility is a technical concern to be handled in code. But inaccessibility often starts in design: wrong color contrasts, tiny click targets, or confusing workflows. Design is where inclusion is born. Always involve accessibility thinking from the wireframe stage.
Mistake 2: Over-Reliance on Automated Tools
Tools like WAVE or axe can catch many issues, but they cannot evaluate context. For example, they can’t tell if your placeholder text is actually helpful for screen readers. Use automated checks as a baseline, not a guarantee.
Mistake 3: Trying to Memorize Everything
The original essay points out that “there’s too much to recall.” Don’t try to remember all WCAG criteria. Instead, build your dashboard and bulleted heuristics. Let the environment do the remembering for you.
Mistake 4: Ignoring Cognitive Diversity
Accessibility isn’t just about vision or hearing. People think and process information differently. Avoid designs that assume a single way of understanding. Use clear language, provide multiple ways to navigate (e.g., search and menu), and allow users to control pacing (e.g., no auto-carousels).
Summary
Good designers can create bad (inaccessible) websites because they can’t hold every guideline in memory. By flipping Nielsen’s heuristic “recognition rather than recall” and applying it to the design process itself, you can make accessibility issues visible and easy to spot. Create an accessibility dashboard, schedule recognition walks, and use emotional triggers to keep inclusion top-of-mind. Remember: this work matters—it affects real life events. Start small, stick with it, and your designs will welcome everyone.