Embedding Accessibility in Your Design Workflow: A Step-by-Step Guide

By ● min read

<h2>Introduction</h2> <p>You’re a good designer. You care deeply about your users and would never intentionally create something that excludes people. Yet, despite your best intentions, you’ve likely encountered websites or apps that are difficult to read, navigate, or understand. The gap between good intentions and inclusive outcomes often stems from one core problem: <strong>information overload</strong>. There’s simply too much to remember—design principles, usability guidelines, <a href="#what-you-need" title="Jump to What You Need list">accessibility standards</a>—and it’s easy to let crucial details slip through the cracks. This guide turns the challenge into a clear, actionable plan. Follow these steps to make accessibility an effortless part of your creative process, ensuring your work is usable by everyone.</p><figure style="margin:20px 0"><img src="https://picsum.photos/seed/309566826/800/450" alt="Embedding Accessibility in Your Design Workflow: A Step-by-Step Guide" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px"></figcaption></figure> <h2 id="what-you-need">What You Need</h2> <ul> <li>A genuine commitment to inclusive design</li> <li>Basic familiarity with UX/UI design principles</li> <li>Access to the book <em>A Web for Everyone</em> by Sarah Horton and Whitney Quesenbery (optional but highly recommended)</li> <li>Knowledge of <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noopener">WCAG guidelines</a> (bookmark them)</li> <li>A tool for taking notes (digital or analog)</li> <li>Patience and willingness to iterate</li> </ul> <h2>Step-by-Step Guide</h2> <h3 id="step-1">Step 1: Acknowledge the Problem</h3> <p>Start by admitting that even well-intentioned designs can exclude people. This isn’t about blame; it’s about awareness. As the original article states, no designer says “I don’t care if somebody can’t read this text.” Yet, exclusion happens. Common examples include:</p> <ul> <li>Low-contrast text that strains eyes</li> <li>Complex navigation that confuses users</li> <li>Missing alt text for images</li> <li>Interactive elements that don’t work with keyboards</li> </ul> <p><strong>Action:</strong> List two designs you’ve seen that felt inclusive but actually excluded some people. Write down the specific barrier.</p> <h3 id="step-2">Step 2: Understand the Real-Life Impact</h3> <p>Exclusion isn’t a minor inconvenience—it can affect life and death events. As Aral Balkan’s essay <em>This Is All There Is</em> points out, even a simple bus timetable app can cause someone to miss a daughter’s birthday or the chance to say goodbye to a dying grandmother. <strong>Every design choice matters.</strong></p> <p><strong>Action:</strong> For each barrier you listed in Step 1, imagine a specific person affected by that barrier. Describe one tangible consequence. Let that emotion drive your commitment.</p> <h3 id="step-3">Step 3: Recognize the Cognitive Load on Designers</h3> <p>Why do exclusionary designs persist despite good intentions? Because designers are overwhelmed with information. You’re expected to recall usability heuristics, accessibility guidelines, visual design principles, and more. That’s too much to hold in your head at once. The solution isn’t to memorize everything—it’s to make the information <strong>visible and retrievable</strong> when you need it.</p> <p><strong>Action:</strong> Audit your current workflow. Where do you currently rely on memory? Write down at least three places where a quick reference tool would help.</p> <h3 id="step-4">Step 4: Apply the “Recognition Rather than Recall” Heuristic to Your Design Process</h3> <p>Jakob Nielsen’s Usability Heuristic #6 states that users shouldn’t have to remember information—it should be visible. Let’s flip that: <strong>designers shouldn’t have to remember accessibility requirements</strong>—they should be visible or easily retrievable. Create a curated cheat sheet that lives next to your design tools. Include:</p> <ul> <li>Color contrast ratios (4.5:1 minimum for normal text)</li> <li>Common keyboard shortcuts</li> <li>Alt text templates</li> <li>List of common disabilities and corresponding design adjustments</li> </ul> <p><strong>Action:</strong> Build a physical or digital “recognition board” that you can glance at while designing. For example, a sticky note on your monitor or a pinned browser tab with key do’s and don’ts.</p> <h3 id="step-5">Step 5: Use Existing Resources as Your Safety Net</h3> <p>You don’t need to reinvent the wheel. The book <em>A Web for Everyone</em> by Sarah Horton and Whitney Quesenbery provides a comprehensive framework for accessible user experiences. Similarly, the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Quick Reference is a ready-to-use tool. Integrate these into your daily workflow:</p> <ol> <li>Keep the WCAG Quick Reference open in a tab.</li> <li>Skim the relevant chapter of <em>A Web for Everyone</em> before starting a new project.</li> <li>Use automated accessibility checkers (like WAVE or axe) as a first pass.</li> <li>Schedule regular manual reviews using screen readers or keyboard-only navigation.</li> </ol> <p><strong>Action:</strong> Add the WCAG Quick Reference to your browser bookmarks. Set a recurring calendar reminder to review one accessibility principle each week.</p> <h3 id="step-6">Step 6: Shift from “Recall” to “Recognition” in Your Design Sessions</h3> <p>During design reviews or critiques, actively look for violations of accessibility instead of trying to remember them. Hang a poster of common accessibility issues in your workspace. Create a checklist that you tick off with your team. This shifts the mental load from memory to pattern recognition.</p> <p><strong>Action:</strong> In your next design review, use a <a href="#step-4">recognition board</a> (from Step 4) as the lens for evaluation. Identify three issues that the board helped you spot that you might have missed otherwise.</p> <h2 id="tips">Tips for Success</h2> <ul> <li><strong>Start small.</strong> Don’t try to implement every guideline at once. Pick one heuristic (like color contrast or keyboard navigation) and master it before moving on.</li> <li><strong>Embrace imperfection.</strong> Accessibility is a journey, not a destination. Some barriers will remain—the key is to keep learning and iterating.</li> <li><strong>Test with real users.</strong> Tools and checklists can’t replace feedback from people with disabilities. Always include diverse users in your usability testing.</li> <li><strong>Pair up.</strong> Team up with a colleague who has a different skill set (e.g., developer, content strategist) to catch accessibility issues from multiple angles.</li> <li><strong>Celebrate wins.</strong> When a design change improves accessibility, share the story with your team. Positive reinforcement builds a culture of inclusion.</li> </ul> <p>By following these steps, you’ll transform your good intentions into consistent, inclusive designs. Remember: the goal isn’t to memorize everything—it’s to make the right information visible when you need it. Happy designing!</p>