Building Inclusive Websites: A Practical Guide for Designers to Recognize Accessibility

Overview

Good designers often produce websites that exclude people. This isn't because designers don't care—they simply have too much to remember. Accessibility is critical because even small design failures can affect life events (like missing a birthday party) or death events (like not saying goodbye to a loved one). The solution? Adapt Jakob Nielsen's heuristic of recognition rather than recall—not just for users, but for designers themselves. By making accessibility information visible and easily retrievable during the design process, we can build sites that work for everyone.

Prerequisites

To follow this guide, you should have:

• Basic knowledge of web design principles and HTML/CSS.
• Familiarity with usability heuristics (e.g., Nielsen's 10).
• An open mindset about inclusive design and accessibility.
• Access to common design tools (Figma, Sketch, or similar) and a screen reader (e.g., NVDA for testing).

No advanced coding needed—just a willingness to change your design habits.

Step-by-Step Instructions

Step 1: Understand the Real Stakes

Design isn't just about aesthetics. As Aral Balkan argues in This Is All There Is, nearly everything we design affects life events and death events. For example, a bus timetable app that's hard to read might cause someone to miss their daughter's fifth birthday party—a life event. Or worse, prevent them from saying goodbye to a dying grandmother—a death event. Write these scenarios on a sticky note and place it near your workspace. Remind yourself that exclusion has real consequences.

Step 2: Recognize the Information Overload

Designers are expected to recall vast amounts of guidance: typography, color theory, UX patterns, and yes—accessibility rules. That's why even well-intentioned designers create inaccessible sites. The core problem is too much to recall. Instead of trying to memorize everything, shift to a system where accessibility cues are visible or easily retrievable as you design. This is the key insight from Nielsen's heuristic #6, applied to the designer's own workflow.

Step 3: Apply Recognition over Recall to Your Process

Jakob Nielsen's 10 Usability Heuristics include “Recognition rather than Recall.” For users, this means interfaces should present information clearly so they don't have to remember it. We can adapt this for designers: Make accessibility information visible at the moment of decision. For example:

• Use a design system that includes accessible color palettes and contrast ratios.
• Add accessibility notes as comments in your mockup files (e.g., “This blue/ gray combination passes WCAG AA at 4.5:1”).
• Create a one-page reference card with common issues (e.g., minimum touch target size, alt text rules, keyboard navigation). Place it beside your monitor.

When you can see these reminders, you naturally design more inclusively without relying on memory.

Step 4: Use Tools and Checklists

Sarah Horton and Whitney Quesenbery’s book A Web for Everyone provides a practical framework for designing accessible user experiences. Build a checklist from their guidelines:

1. Perceivable – Ensure all content can be perceived (e.g., text alternatives for images).
2. Operable – Make sure all interface elements work with keyboard and assistive technology.
3. Understandable – Keep content clear and predictable.
4. Robust – Code is semantic and works with current/future tools.

Keep this checklist open in a browser tab or printed out. When you’re designing a new component, run through the list visually. This turns recall into recognition.

Step 5: Integrate Recognition into Daily Work

Make accessibility a habit by embedding reminders in your environment:

• Set browser bookmarks to resources like WCAG Quick Reference or the A11y Project checklist.
• Use design plugins that check contrast or simulate color blindness (e.g., Stark for Figma).
• Create a personal “accessibility dashboard” with key metrics (contrast ratios, font sizes, focus indicators) visible while you design.

By reducing the mental load, you free up cognitive space for creativity while still building inclusive sites.

Common Mistakes

Mistake 1: Overlooking Low Vision and Blindness

Don't assume perfect vision. Always test with a screen reader and zoom the page to 200%. Use realistic text—not dummy content—to see how it reads aloud. Many designers skip this because it's “extra work,” but it's essential.

Mistake 2: Relying Only on Automated Tools

Automated checkers miss up to 70% of accessibility issues. They don't catch logic errors, confusing navigation, or missing context. Use them as a baseline, but always perform manual checks.

Mistake 3: Ignoring Cognitive Diversity

Not everybody thinks the same way. Avoid jargon, complex instructions, or layouts that assume linear thinking. Use clear headings, simple language, and consistent navigation. Test with people who have cognitive disabilities if possible.

Mistake 4: Forgetting about Mobility Impairments

Not everybody uses a mouse. Ensure all interactions work with keyboard alone. Check that focus order matches visual order. Provide ample click areas (at least 44x44 pixels) for touch targets on mobile.

Summary

Good designers don't intend to exclude, but information overload leads to oversight. By adopting the heuristic of recognition rather than recall for your own design process, you can make accessibility a natural part of your workflow. Use visible reminders, checklists, and tools to reduce the mental burden. Remember: inclusive design isn't just ethical—it's practical, and it begins with making the right information easily accessible to you, the designer.