Overview
Every designer wants to create websites that work for everyone. Yet, despite good intentions, many designs still exclude people—whether it's tiny text, confusing navigation, or interactions that rely on perfect vision and hearing. The problem isn't malice; it's overload. With so many guidelines to remember (from visual clarity to cognitive load to technical standards), even the most conscientious designer can miss accessibility issues.
This guide offers a practical solution: leverage Jakob Nielsen’s usability heuristics—specifically, Recognition rather than Recall—to make accessibility problems visible during the design process. Instead of trying to memorize every rule, you'll learn to recognize common barriers and correct them in real time. By the end, you'll have a repeatable method for evaluating your designs, plus a set of actionable checklists to keep your projects inclusive from the start.
Prerequisites
Before diving in, you should have:
- A basic understanding of web design principles (layout, typography, color, interaction).
- Familiarity with at least one accessibility standard, such as WCAG 2.1 (even a high-level overview helps).
- Access to a design tool (Figma, Sketch, Adobe XD, or even paper) to follow along.
- Optional: a screen reader (NVDA or VoiceOver) and a browser’s developer tools to test examples.
Step-by-Step: Applying Recognition over Recall to Accessibility
1. Introduce the Heuristic Framework to Your Workflow
Jakob Nielsen’s heuristics are ten general principles for interaction design. For this guide, we focus on the sixth heuristic: Recognition rather than Recall. The original version states that users should not have to remember information from one part of the interface to another; instead, options should be visible. We’ll adapt this for designers: the information needed to produce an accessible design should be visible or easily retrievable during the design process.
Action: Print out a one-page summary of the ten heuristics (or save a digital copy) and keep it beside your workspace. Whenever you feel unsure about an element, refer to the heuristic list. This simple act reduces the mental load of remembering every accessibility rule.
2. Identify Common Accessibility Barriers Using “Designer Heuristics”
Instead of memorizing all WCAG success criteria, create a short list of high-impact accessibility issues that align with the recognition heuristic. For example:
- Text contrast: Can you instantly see if text color meets WCAG AA contrast ratios? Use a color contrast checker tool (e.g., WebAIM’s) and integrate it into your design tool via a plugin.
- Focus indicators: Are keyboard focus outlines visible and high-contrast? Design them as part of your component library rather than relying on browser defaults.
- Alternative text decisions: For every image, decide whether it’s decorative (alt="") or informative (write a meaningful description). Add a placeholder text field in your design file to force this decision early.
- Language and reading order: Design content so that the hierarchy and sequence are clear visually and programmatically (e.g., heading levels, logical tab order).
Action: For each new design element, run it against these four checks. If a required information (like contrast ratio or alt text) isn’t immediately visible in your file, you’ve found a point where recall is required—redesign to make it obvious.
3. Create Low-Cognitive-Load Checkpoints
One of the reasons designers forget accessibility is that checklists are often long and disconnected from the creative flow. Instead, embed accessibility checks directly into your design process with “micro-reviews.”
Action: After every major design decision (e.g., choosing a color palette, setting typography scale, defining a navigation pattern), pause and ask:
- Would someone who cannot see this screen still understand the layout? (Test with a screen reader.)
- Is the interactive element’s purpose clear without relying on visual context?
- Is the required user input or action visible without requiring memory?
For example, if you place a “Submit” button after a long form, ensure the user can see a summary of their answers before submission—don’t make them recall previous entries. This is a direct application of “recognition rather than recall” for both users and designers.
4. Use Real-World Examples for Training
The original article mentions that even a bus timetable app can affect life-and-death events if poorly designed. To internalize this, create a mini case study:
- Bad example: A timetable app where real-time updates are hidden behind a hamburger menu, and the “next bus” time is only readable in a tiny gray font.
- Good example: The same app with high-contrast, large-font “next departures” on the main screen, and a persistent “refresh” button that provides audible feedback.
Action: Identify one recent design of yours that had a potential accessibility gap. Rewire the interface so that critical information (like error messages, call-to-action buttons, or read-aloud options) becomes instantly recognizable. Then write down the specific cognitive load you removed.
5. Iterate and Automate Where Possible
The heuristic approach is not a one-time fix; it’s a mindset shift. Over a few projects, you’ll start to recognize patterns without the checklist. To speed this up, integrate automated tools that bring accessibility data right into your design environment.
Action:
- Install a contrast check plugin (e.g., Stark for Figma) to see real-time ratios as you pick colors.
- Use a linting tool that flags missing alt text or improper heading hierarchy in your prototype.
- Create reusable component libraries that already include accessible states (focus, error, disabled, etc.).
Common Mistakes
Assuming You Will Remember Everything
Don’t rely on your memory to check accessibility later. The recognition heuristic works both ways: if the design doesn’t show you the accessibility requirement, you’ll forget. Build checklists into your design files.
Treating Accessibility as a Final Step
Adding contrast, alt text, or focus outlines after the visual design is complete often leads to compromises (e.g., “I can’t change the background, so I’ll use black text on dark gray—barely passable”). Instead, start with accessible defaults like a high-contrast palette and semantic HTML structure.
Ignoring Cognitive Diversity
Many designers focus on visual and motor disabilities but forget cognitive accessibility. The heuristic “recognition rather than recall” directly addresses this: avoid interface patterns that require users to remember steps, icons, or jargon. Provide clear labels, consistent navigation, and easy-to-find help.
Overloading the Designer’s Own Recall
The original article points out that there’s too much information to remember. A common mistake is trying to adopt every WCAG guideline at once. Start with the four categories above, then expand.
Summary
Good designers create inaccessible websites not because they don’t care, but because the mental burden of remembering dozens of rules is overwhelming. By reframing Jakob Nielsen’s “Recognition rather than Recall” heuristic as a tool for designers, you can surface accessibility issues during the creative process. The key steps are: keep heuristics visible, identify common barriers with micro-checks, embed checkpoint reviews into your workflow, learn from real-world examples, and automate where possible. This approach turns accessibility from a post-production chore into an integral part of designing inclusive experiences. Start with one heuristic, one checklist, and one project—you’ll be surprised how quickly recognition replaces recall.