Introduction
You're a good designer. You care about your users. You've never intentionally ignored someone who struggles to read tiny text or navigate a confusing interface. Yet, despite good intentions, many websites and apps still exclude people. Why? The problem isn't malice—it's overload. There's simply too much to remember: typography best practices, color contrast ratios, semantic HTML, keyboard navigation, and a hundred other guidelines. As accessibility expert Aral Balkan reminds us, even a simple bus timetable app can affect life and death—missing a daughter's birthday or a final goodbye to a grandmother. So how do we bridge the gap between good intentions and truly inclusive designs? This guide offers a practical, step-by-step approach rooted in Jakob Nielsen's usability heuristics, specifically Recognition rather than Recall. Instead of expecting designers to memorize everything, we'll make accessibility issues visible and easy to recognize during the design process.
What You Need
- Empathy and willingness – A genuine desire to design for all users.
- Basic knowledge of web accessibility – Familiarity with WCAG or similar standards helps, but isn't required.
- Jakob Nielsen’s 10 Usability Heuristics – Especially heuristic #6: Recognition rather than Recall.
- A copy of A Web for Everyone (optional but recommended) – Sarah Horton and Whitney Quesenbery's book is a fantastic resource.
- Design tools – Sketch, Figma, Adobe XD, or even paper and pencil.
- Accessibility testing tools – Like Axe, WAVE, or color contrast checkers.
- A willingness to learn from failure – Recognizing that every excluded user is a learning opportunity.
Step-by-Step Guide
Step 1: Internalize the Core Problem – Too Much to Recall
Before diving into tactics, understand the root cause. Designers are expected to hold an entire encyclopedia of best practices in their heads. That's unrealistic. As Nielsen noted, users benefit from recognition – having information visible when needed. We must apply the same principle to our design process. Accept that you cannot memorize everything. Instead, build systems that surface accessibility requirements at the right moment.
Step 2: Rewrite Heuristic #6 for Designers
Adapt Nielsen's heuristic for your own workflow: "The information required to produce the design should be visible or easily retrievable when needed." This means creating reminders, checklists, and visual cues within your design environment. For example, place a sticky note on your monitor: "Check color contrast before finalizing." Or embed accessibility notes directly in your design file.
Step 3: Create a Visual Accessibility Checklist
Develop a one-page cheat sheet that you can glance at while designing. Include items like:
- Text sizes large enough for reading (at least 16px body text)
- Sufficient color contrast (WCAG AA: 4.5:1 for normal text)
- Clear labels on form fields
- Keyboard-accessible interactive elements
- Alt text for images
This checklist makes the criteria recognizable during design, not after.
Step 4: Use Real-World Scenarios to Test for Life-and-Death Contexts
Recall Aral Balkan's bus timetable example. For every feature you design, ask: "Could this affect someone's ability to attend a life event or a death event?" If the answer is yes (and it often is), prioritize accessibility. For instance, a poorly designed appointment booking system might cause someone to miss a critical medical visit. Use this emotional driver to stay motivated.
Step 5: Incorporate Accessibility Heuristic Reviews into Your Workflow
Just as you run a heuristic evaluation for usability, run one for accessibility. Create a custom set of accessibility heuristics based on WCAG principles. For example:
- Is all content perceivable (e.g., captions for video)?
- Can users operate all controls with keyboard alone?
- Is the content understandable (e.g., clear error messages)?
- Is it robust across different assistive technologies?
Review your designs against these heuristics iteratively.
Step 6: Leverage Recognition-Making Tools
Use design plugins that flag accessibility issues in real time. For example, the Stark plugin for Figma shows contrast ratios directly in your artboard. These tools reduce the need to recall ratios—they show you instantly. Similarly, use browser extensions like Axe or WAVE to audit prototypes during testing.
Step 7: Practice Pairing and Peer Reviews
Two designers are better than one. Pair up with a colleague and review each other's work for accessibility. One person focuses on the interface, the other on how a screen reader would hear it. This distributes the cognitive load and makes issues more recognizable.
Step 8: Learn from Exclusion Examples
Gather real-world examples of designs that excluded people – like a website with illegible text or a kiosk unreachable by wheelchair. Analyze why they failed. Notice that the designers weren't bad; they just forgot. Use these examples to trigger your memory during your own work. Create a "wall of shame" (or a digital board) that reminds you of common pitfalls.
Step 9: Iterate and Improve Your Process
After each project, reflect on what accessibility issues you caught and what you missed. Update your checklist and heuristics accordingly. Over time, more and more issues will become automatically recognizable, freeing your mental energy for creative and complex decisions.
Tips for Long-Term Success
- Start small. Don't try to implement everything at once. Pick one heuristic (e.g., color contrast) and master it before adding others.
- Use the book A Web for Everyone as a go-to reference. Keep it on your desk for quick recognition – not for memorization.
- Teach others. Explaining accessibility to a teammate reinforces your own learning and embeds patterns deeply.
- Remember: designers are good people. When you find an accessibility gap, don't blame yourself. Instead, say, "My process needs a better reminder." That shifts focus to systemic improvement.
- Review this guide periodically. Revisit Step 1 and Step 2 to refresh your core mindset. Then reapply the steps to new projects.
- Celebrate wins. Every time you catch an accessibility issue during design (not after launch), acknowledge it. That positive reinforcement makes recognition easier next time.
By shifting from recall to recognition, you can transform your design process from forgetful to inclusive. You don't need to be a accessibility expert – you just need visible cues that help you act on the empathy you already have. Start today, and make every website a welcoming place for everyone.