Introduction
Accessibility isn't just a nice-to-have; it's the foundation of inclusive design. Yet even the most well-intentioned designers can accidentally exclude users—not because they don't care, but because there's simply too much to remember. Between typography guidelines, color contrast rules, keyboard navigation patterns, and assistive technology quirks, the mental load can be overwhelming. This guide offers a practical, step-by-step approach to incorporate accessibility checks into your design process using the principle of recognition over recall. Instead of relying on memory, you'll learn to make accessibility information visible and retrievable exactly when you need it. By the end, you'll have a repeatable system that turns good intentions into consistently inclusive designs.
What You Need
- A digital design tool (e.g., Figma, Sketch, Adobe XD) or paper and markers for sketching
- Access to the resources list (bookmarked for easy retrieval)
- A willingness to pause and audit your work at each stage
- A simple checklist (physical or digital) to track steps
- (Optional) A colleague or user with a disability for real-time feedback
Step-by-Step Guide
Step 1: Set Up Your Accessibility Reference Library
Before you start designing, gather all the accessibility guidelines you typically need. Instead of trying to memorize them, store them in a dedicated, easily accessible place. This could be a browser bookmark folder, a Notion page, or a physical binder. Include:
- WCAG 2.2 quick reference (focus on Levels A and AA)
- Color contrast checker tools (like WebAIM Contrast Checker)
- Keyboard accessibility patterns from A11y Project
- Screen reader basics (VoiceOver, NVDA commands)
By making these resources visible from the start, you’re replacing the cognitive burden of recall with the ease of recognition. Jump to the resource list for our recommended links.
Step 2: Start Every Design Session with a Recognition Warm-Up
For the first five minutes of each design session, open your accessibility reference and review one specific topic. For example, today you might focus on “sufficient color contrast.” This primes your mind to spot issues as they arise. You’re training your brain to recognize patterns, not to memorize rules. Repeat this warm-up every time you sit down to design, even if it feels repetitive. Over time, the recognition becomes second nature.
Step 3: Use a Visual Overlay for Immediate Feedback
Create or use an existing overlay template that sits on top of your design canvas. This overlay shows common checkpoints right where you’re working:
- Contrast grid: a semi-opaque layer that simulates different vision types (e.g., deuteranopia)
- Minimum touch target size: a 44×44 pixel circle to overlay on buttons
- Reading order arrows: to ensure logical flow for screen readers
Whenever you place an element, glance at the overlay. If the button fits inside the circle and the text remains legible against the contrast grid, you’re good. This visual cue removes the need to recall exact pixel dimensions or contrast ratios.
Step 4: Perform a Quick Heuristic Assessment After Each Major Decision
After you finish designing a key component—like a navigation bar, form field, or call-to-action—run a mental checklist based on Jakob Nielsen’s usability heuristics, with a special focus on Recognition rather than recall (heuristic #6). Ask yourself:
- Is the accessibility information for this component visible right now (e.g., is the contrast ratio shown in a panel)?
- Can I quickly retrieve the accessibility rule without leaving my design tool?
- Does this component help users recognize options instead of forcing them to remember?
If the answer to any question is “no,” pause and adjust. For example, if the form field lacks an accessible label, add one immediately while the context is fresh. This prevents issues from accumulating.
Step 5: Create a Living Accessibility Checklist That Evolves
Keep a simple checklist document (Google Doc, Trello, or paper). As you encounter recurring accessibility issues in your own work (e.g., “I keep forgetting to add alt text to images”), add a check for that item. Over time, your checklist becomes a personalized memory aid. Review and revise it monthly. The goal is to convert the overwhelming mountain of accessibility guidelines into a short, manageable list of patterns you personally need to watch for.
Step 6: Pair the Design with an Accessibility Annotation Layer
Before handing off to developers, create a separate layer in your design tool that annotates every accessible decision you made. For each interactive element, include:
- ARIA role (if any)
- Keyboard interaction notes
- Alternative text suggestions for images
- Focus order
This annotation serves as a recognition aid for developers, who can refer to it instead of having to recall accessibility specs. It also forces you to articulate why you designed something a certain way, reinforcing your own learning.
Step 7: Conduct a “What Could Go Wrong?” Walkthrough
At the end of the design phase, put yourself in the shoes of users with different disabilities. Imagine:
- Low vision: Can you still navigate if you enlarge the text to 200%?
- No mouse: Can you tab through every interactive element in a logical order?
- Cognitive disability: Is the language plain and predictable?
- Deaf user: Are all audio cues also indicated visually?
Document any issues you find and fix them immediately. This step uses recognition of user needs rather than reliance on memorized guidelines.
Step 8: Implement a Weekly Accessibility Review
Set aside one hour per week to review your recent designs with a colleague. Use your accessibility checklist and reference library. Discuss what went well and what slipped through. This group recognition process leverages collective knowledge, making it easier to spot patterns. Over time, the whole team benefits from shared recognition instead of each person struggling solo.
Tips for Success
- Start small: Don’t try to implement all eight steps at once. Begin with Steps 1 and 3—setting up your library and using a visual overlay—then gradually add more.
- Get feedback from real users: Recognition tools are great, but nothing beats testing with people who have disabilities. Their lived experience can highlight blind spots your checklists miss.
- Use browser extensions: Tools like axe DevTools and WAVE can automatically detect many accessibility issues, reducing recall burden even further.
- Keep learning, but don’t memorize: Accessibility evolves. Instead of trying to know everything, build a system for retrieving information quickly.
- Celebrate small wins: Every button that now has a visible focus ring, every image with meaningful alt text—these are victories. Acknowledge them to build momentum.
- Remember the real stakes: As Aral Balkan wrote, poor design can cause someone to miss a life event or even a death scene. Your recognition-based workflow can prevent that.