Designing Accessible Websites: A Practical How-To Guide for Recognizing and Fixing Exclusion

By • min read

Introduction

Every designer strives to create inclusive experiences, yet many websites still exclude users. The problem isn't intent—it's the overwhelming amount of guidelines and standards to remember. This guide adapts Jakob Nielsen's heuristic of Recognition rather than Recall to help designers spot accessibility issues during the design phase. By following these steps, you'll learn how to embed accessibility into your workflow without memorizing every rule.

What You Need

• A solid understanding of basic design principles (typography, color, layout)
• Familiarity with user experience (UX) design processes
• Access to Jakob Nielsen's 10 Usability Heuristics (specifically Heuristic #6)
• Reference books or online resources: A Web for Everyone by Sarah Horton and Whitney Quesenbery, or WCAG guidelines
• A willingness to challenge your own assumptions about users
• Design software (Figma, Sketch, or equivalent) for prototyping

Step-by-Step Guide

Step 1: Recognize the Real-World Impact of Exclusion

Before diving into techniques, understand that accessibility isn't a nice-to-have—it can affect life and death. As Aral Balkan argues, even a bus timetable app can cause someone to miss a life event (like a child's birthday) or a death event (saying goodbye to a dying relative). When you design, imagine the worst-case scenario for a person with a disability. This emotional anchor will motivate you to prioritize inclusive design.

Step 2: Acknowledge Human Diversity

No single design works for everyone. Remember these truths:

• Not everyone can see perfectly (low vision, blindness, color blindness)
• Not everyone can hear perfectly (deaf or hard of hearing)
• Not everyone thinks the same way (cognitive disabilities, neurodiversity)
• Not everyone moves the same way (motor impairments, temporary injuries)

Design for the full spectrum of human ability. If you keep these four categories in mind, you'll start catching more exclusionary patterns.

Step 3: Accept the Cognitive Load Problem

Designers are expected to remember endless guidelines: from layout best practices to microcopy, from color theory to accessibility. It's too much. Instead of trying to memorize everything, admit that your brain needs shortcuts. That's where recognition over recall comes in.

Step 4: Apply Nielsen's Heuristic #6 (But for Designers)

Jakob Nielsen originally said: users should not have to remember information—it should be visible or easily retrievable. Let's adapt this for creators: designers should not have to remember accessibility requirements—they should be visible or easily retrievable during the design process. How?

• Create a cheat sheet of the most common accessibility failures (low contrast, missing alt text, small touch targets).
• Keep WCAG quick reference cards near your workspace.
• Use design system components that are pre-tested for accessibility.

Step 5: Use Proven Resources Like 'A Web for Everyone'

Sarah Horton and Whitney Quesenbery's book offers a framework that integrates accessibility into every stage. Read their chapters on perception, operation, understanding, and robustness. For each design decision, ask: Can a person who cannot see/hear/understand/interact the way I assume still use this? Bookmark key pages so you can reference them quickly.

Step 6: Build Checkpoints into Your Workflow

Don't add accessibility at the end—weave it into each phase:

1. Research: Include users with disabilities in personas and testing.
2. Wireframing: Ensure logical tab order and clear labels.
3. Visual Design: Check color contrast ratios (use tools like WebAIM Contrast Checker).
4. Prototyping: Test with keyboard navigation and screen reader preview.
5. Handoff: Provide developers with annotated specs for aria labels and focus states.

Step 7: Reduce Recall by Creating Your Own Heuristics

Start with Nielsen's 10 heuristics, then add 3–5 accessibility-specific ones. For example:

• Can all content be understood without color?
• Is every actionable element reachable by keyboard?
• Do images have meaningful alt text?

Print these and stick them on your monitor. When designing, visually scan them – recognition replaces recall.

Tips for Long-Term Success

• Start small: Pick one accessibility issue (like color contrast) and master it before moving on.
• Involve real users: Conduct usability tests with people who have disabilities – their feedback is invaluable.
• Embrace mistakes: If you realize a design excludes someone, fix it and document what you learned.
• Share knowledge: Create an internal wiki of accessibility patterns common in your team's projects.
• Use automated tools: Lighthouse, Axe, or WAVE catch many issues, but remember they only catch 30% of problems.
• Iterate constantly: Accessibility is a journey, not a one-time checkbox.

Remember: good designers want to include everyone. The barrier is not willpower, it's information overload. By making accessibility information visible and retrievable—just like Nielsen suggested—you'll design better websites for everyone.