Evaluating Accessibility Compliance

🔍 My Process for Testing a Web Page for WCAG Conformance Ensuring web accessibility goes beyond automated testing—it’s about a detailed, methodical approach. Here’s how I test a webpage for WCAG conformance: 1️⃣ Start with the Basics - Double-check I’m testing the correct URL, component, and page state. - Open the page in my browser, set the screen width to 1280px, and open developer tools. (I live in developer tools!) 2️⃣ Inspect Elements - Work top-down, element by element, component by component. - Use developer tools to inspect elements and select shortcut “Expand recursively” to easily view the complete code structure. -Check each element’s HTML semantic structure, name, role, value, aria and functionality. ***Ask questions like: *What is this element? *What’s its role? *What is it's name and where is the name coming from? *Does it have supporting attributes for different states? *Does it pass color contrast requirements? *Is this an interactive element? 3️⃣ Interactivity and State Testing - For interactive elements, test with a mouse first, then the keyboard (Tab, Enter, Space) to ensure equitable functionality. - Ensure all interactive elements have a non-obscured color contrast conforming focus indicator. - Check hover, focus, active, pressed, selected, expanded, and collapsed states. - Ensure the element remains conformant, maintains color contrast, and performs its intended functionality in all states across all input devices. 4️⃣ Comprehensive Component Review Apply this process to all elements within a chosen component or page. Switch to Accessibility Tree View for new fresh perspective. 5️⃣ Screen Reader Testing Use NVDA to do a pass-through, ensuring I haven’t missed anything important. 6️⃣ Responsive Testing Test at 1280px for desktop, zoom to 200% for resizing, and zoom to 400% for reflow to check responsiveness and look for cutoff or missing meaningful content. 7️⃣ ARC Toolkit Analysis - Use ARC Toolkit to run tests with all topics selected. Manually review errors, alerts, and best practices by toggling disclosure panels. - Use highlight tools to quickly check: Page titles, iframes, lists, forms, tables, language attributes, buttons, links, tab order, tab index values, landmarks, and headings. - Leverage the text spacing tool at 1280px, 200%, and 400% to ensure compliance with resizing and reflow requirements. Accessibility isn’t just a checkbox—it’s a commitment to inclusivity and usability for all. This thorough (but not exhaustive) testing process ensures every page and component is tested against the WCAG success criteria. Now knowing how to fix the failures... DM me for help! What’s your favorite step or tool for accessibility testing? Let’s discuss in the comments! #AccessibilityTesting #WCAG #WebDevelopment #Accessibility #A11y

Here's something you might not know about ChatGPT's Atlas browser: it navigates websites the exact same way screen readers do. This fundamentally changes the conversation around website accessibility. It's not just about compliance anymore (though that's still critical with the European Accessibility Act deadline hitting in June 2025). Now it's also about whether AI agents can actually navigate your website. Many websites have some ARIA tags implemented, but they aren't implemented correctly in many cases. For example a drop down might have aria-expanded="false" but it's missing the JavaScript to update it to "true" when the dropdown opens. Visually it looks perfect. For Atlas and screen readers, that dropdown is permanently stuck in the collapsed state. And those accessibility widgets that promise instant compliance? Not true. Over 1,000 companies with widgets installed got sued in 2024. Courts are increasingly rejecting widget-only implementations because they mask problems instead of fixing them. The reality is that proper ARIA implementation takes real work. We're talking 20-40 hours minimum just for critical elements like main navigation and primary forms. It's expensive, it's time consuming, and there's no shortcut. But here's why it matters: you're not just implementing for Atlas or for compliance. You're positioning your website for however AI tools evolve next, while also making your site genuinely accessible. I break down how Atlas actually uses ARIA to navigate, what to prioritize first, and how to audit your current implementation in the full article. #WebAccessibility #ARIA #DigitalMarketing

👩🦰 Persona Spectrum For Inclusive Design (Figma Kit) (https://lnkd.in/eGD38hs4), a wonderful little accessibility tool for designers to include permanent, temporary and situational contexts in design decisions. Open sources, with all illustrations and assets for presentations and print. By 🐝 Mahana Delacour. --- 🔶 1. Accessibility ≠ Compliance We should never rely on automated accessibility testing alone to “ensure” accessibility. Compliance means that a user can use your product, but it doesn’t mean that it’s a great user experience. Manual testing makes sure that your users actually can meet their goals in their own context. It often feels daunting to get started, but small first steps are a great beginning. First, gather people interested in accessibility. Document what research was done, where the gaps are. And then try to include 5–12 users with disabilities in a dedicated accessibility testing. One way to find participants is to reach out to local chapters, local training centers, non-profits and public communities of users with disabilities in your country. You might want to add extra $25–$50 depending on disability transportation. Once you have access to users, run a small accessibility initiative around key flows in your products. Tap into critical touch points and research them. Eventually extend to components, patterns, flows, service design. A good target is to incorporate inclusive sampling into all research projects — at least 15% of usability testers should have a permanent, temporary or situational disability. --- 🔹 2. Building Accessibility Research From Scratch If you’d like to get started, I highly recommend to check “How We’ve Built Accessibility Research at Booking.com” (https://lnkd.in/eq_3zSPJ), a fantastic case study by Maya Alvarado on how to build accessibility practices and inclusive design into UX research from scratch. Maya highlights the idea of extending Microsoft's Inclusive Design Toolkit (https://lnkd.in/eN5J7EkJ) to meet specific user needs of a product. It adds a different dimension to disability considerations which might be less abstract and much easier to relate for the entire organization. And as Maya noted, inclusive design is about building a door that can be opened by anyone and lets everyone in. Accessibility isn’t a checklist — it’s a practice that goes way beyond compliance. A practice that involves actual people with actual disabilities throughout all UX research activities. More resources in the comments ↓

Think you have an accessibility program when you start running accessibility audits? Think again. An accessibility function is not mature just because someone is filing defects. There are several prerequisites that need to exist before the first bug is logged. 1) Governance must be reachable Decisions and priorities cannot live only in long meetings or dense decks. Staff with disabilities cannot follow decisions they cannot reach. Governance needs short forms, asynchronous access, and more than one way to find the signal. Following the "Amazon rule" of six page write ups is guaranteed to leave disabled staff in the dust 2) Workflow must be explicit If ownership and quality control live in private chats or tribal knowledge, staff with memory, processing, or fatigue disabilities are already being left behind. Documented roles, handoffs, and acceptance criteria make participation possible for everyone. 3) Remote participation must be treated as normal Programs that assume co-location or live attendance exclude people who rely on flexible schedules or alternate equipment. Remote participation for accessibility staff needs to be a first-order requirement, not a barrier. 4) Accessibility bugs need a defined place next to functional bugs When accessibility issues are always behind functional issues in triage, they never ship. When teams say “release it and fix it later,” later rarely arrives. A program is only real when accessibility defects move on the same clock as everything else and can block release when harm is predictably introduced. If the operations of the accessibility team are not accessible, the program will recreate the same exclusion it is meant to fix. Audits do not create maturity. Accessible governance, accessible workflow, equitable participation, and accountable prioritization do. #Accessibility #Equity #TechMaturity

A good example of why “technically accessible” does not always mean “cognitively accessible.” These settings controls appear fully active, focusable and styled as enabled. But attempting to change the temperature setting triggers a message requiring “functional cookies” to be enabled first. The issue is the hidden dependency. Users must understand: 1. Why a temperature preference depends on cookies 2. What “functional cookies” means 3. Where to change that setting 4. How to return and retry the task For many users, especially people with ADHD, dyslexia, autism, cognitive fatigue or low digital confidence this can disrupt the mental model completely. The interface communicates "You can change this." Whilst system behaviour communicates "Not unless you already understood an unrelated technical requirement." That creates friction right there! There is also an emotional accessibility consideration here. The strong red warning colour and alert styling communicates danger, failure and critical error ….but the user has done nothing wrong. At COGAI®, I often talk about the fact that emotional load is part of cognitive load. Colour alone is rarely an efficient or sufficient UI signal, particularly when the colour itself may increase anxiety or imply user failure rather than guidance. A system can satisfy technical WCAG requirements while still creating confusion, hesitation and abandonment through interaction design alone. Accessibility is not only about whether users can interact. It is also about whether interactions remain understandable, predictable, and psychologically safe. --- Alt text: Graphic titled "When WCAG Compliance Isn’t Enough" showing a BBC settings screen where a temperature dropdown appears enabled but displays a red warning message requiring functional cookies to change the setting.

♿💻 Accessibility isn’t just “nice to have” — it’s what makes a website usable for everyone. When we design or build, every detail matters: 🔹Text: readability, contrast, resize without breaking layout 🔹Headings (H1–H6): logical hierarchy, one H1 per page 🔹Alt text: meaningful descriptions for images 🔹Hover & focus states: visible indicators, no “hidden focus” 🔹DOM order: ensure keyboard navigation follows a logical path 🔹ARIA labels: add context where HTML alone isn’t enough To guide us, WCAG uses 3 compliance levels: 🔹 A (Must have) – The basics. Without this, many people simply cannot use your product.
 Examples: keyboard navigation, alt text for images, sufficient text contrast. 🔹 AA (Should have) – The standard most organizations aim for. It balances inclusion with practicality.
 Examples: focus visibility, resizable text, clear headings, captions for live audio. 🔹 AAA (Nice to have) – The gold standard. Harder to achieve everywhere but amazing if you can.
 Examples: sign language interpretation, extended audio descriptions, very high contrast text. #Accessibility #A11y #WCAG #UXDesign #UI #InclusiveDesign #WebDevelopment #ProductDesign

In my work with companies on web accessibility, I hear the same question again and again: “How do we measure it?” So the question is not who it helps or what changed, but almost always it means "what number can we put on it?". Accessibility gets translated into scores, percentages, maturity levels, audit results and of course I understand why: companies need numbers to make decisions, justify budgets, and show progress. But over time, I kept noticing the reality on practice: a product could score well and still be painful to use and a team could “do accessibility” and still ship barriers every sprint. I keep reading an amazing book Lean Impact by the author Ann Mei Chang, and applying it to accessibility made sense. The book talks about vanity metrics: numbers that look good, feel reassuring, and are easy to report, but don’t actually tell you whether you’re making a difference. And impact metrics - the harder ones that reflect real change in the world. Accessibility suffers deeply from this gap: · Passing an audit is not impact. · Publishing an accessibility statement is not impact. · Completing training is not impact. Impact is quieter and less comfortable to measure: · Can a blind user complete a core task without help? · Did keyboard users stop getting stuck? · Did support tickets about accessibility drop or change in nature? These aren’t always neat numbers, but they’re honest. Lean Impact also frames progress through three lenses: value, growth, and efficiency and when I apply them to accessibility, they fit almost perfectly. 1. Value in accessibility isn’t compliance. It’s independence, dignity, time saved, frustration avoided. If nothing became easier for a real person, the value exists only on paper. 2. Growth isn’t the number of accessible pages. It’s accessibility spreading through an organization: designers thinking about it by default, developers reusing accessible components, fewer issues introduced in the first place. Growth is cultural, not cosmetic. 3. Efficiency is where accessibility often changes perception. With fewer late fixes, fewer emergency audits, less rework. When accessibility is integrated early, it becomes cheaper and calmer over time. It really shows that when companies focus only on vanity metrics, accessibility feels heavy and external. And on the contrary, when they measure value, growth, and efficiency, it starts to look like what it really is: good product work. Accessibility doesn’t move forward because we count more things, it moves forward because we count the right things and listen when the numbers challenge us. #WebAccessibility #InclusiveDesign #LeanImpact #DigitalInclusion #Accessibility #ProductThinking #UX #ResponsibleTech

Did you know that following WCAG to the letter still might not create a truly accessible experience? I see this all the time. A team runs their automated scans, fixes every violation, and checks "accessibility" off their project list. But then a real user with a disability tries to complete a task on their site and hits barriers that no compliance tool flagged. Here's what I've learned about the difference between compliance and true accessibility: Compliance asks: "Does this pass the test?" True accessibility asks: "Can everyone actually use this?" That might mean: • A form that's technically compliant but confusing to navigate with a screen reader. • A video player that meets contrast requirements but is impossible to control with voice commands. • A checkout process that passes automated scans but takes someone with cognitive disabilities 20 minutes to complete. Don't get me wrong - WCAG compliance matters. It's your foundation. But it's not your finish line. The gap between "technically accessible" and "actually usable" is where the real work happens. That's where you test with people who actually use assistive technology. That's where you ask hard questions about user experience, not just code compliance. True accessibility isn't about avoiding lawsuits (though that's important too). It's about respecting the civil right of equal access to information and services. It's about ensuring that anyone, regardless of ability, can interact with your digital spaces with dignity. Every barrier we remove opens a door. Every improvement you make could be the change that makes it possible for someone to apply for a job, access medical care, or get the help they need. WCAG is your starting point, not your finish line. True accessibility is about people, not just rules. #Accessibility #Inclusion

Inclusive design is more than the font you choose. It is about how your content behaves when it meets a different nervous system. We are auditing your media and structure. In our rush for engagement, corporate communications often rely on visual shortcuts like flashing videos, color coded alerts, and walls of emojis. Marketing calls these tactics. I call them barriers. When accessibility clashes with creativity, we often default to what looks flashy rather than what is functional. But true creativity flourishes within the constraints of inclusive design. Compliance is just the floor. Our goal is to cultivate an ecosystem where everyone thrives. Here are 8 ways to operationalize inclusion in your content structure. 1/ The Emoji Balance → The Tension: A wall of emojis creates chaos for screen reader users. → Reality: Minimal emojis act as vital visual anchors that break up dense text for ADHD and dyslexic minds (like mine). → The Fix: Use sparingly. Place them at the end of sentences, never in the middle. 2/ The Caption Choice → The Tension: Audio posted bare completely excludes Deaf and Auditory Processing communities. → Reality: But forced, burned in open captions can distract or overwhelm some neurodivergent minds. → The Fix: Provide high quality closed captions (CC). AI generated captions are helpful, but a human must review for accuracy. This empowers user agency, allowing individuals to toggle them based on their needs. 3/ The Color & Shape Rule → The Tension: Using only color to signal danger locks out colorblind users. → The Fix: Always pair color with a distinct shape or text label to ensure the warning translates across all visual systems. 4/ The Alt Text Discipline → The Tension: Images with file names like "IMG_5920.jpg" are dead ends for screen readers. → The Fix: Write descriptive, concise alternative text that translates the visual data clearly. 5/ The Header Hierarchy → The Tension: Manually bolding text to look like a header creates a flat, confusing landscape for screen readers. → The Fix: Use actual heading styles (H1, H2) to create a structured, accessibility. 6/ The Motion Control → The Tension: Auto playing GIFs or flashing content trigger vestibular overload, siezures and visual migraines. → The Fix: Use static images or user controlled play buttons. Protect your team's nervous systems. 7/ The Permanent Label → The Tension: Form field labels that disappear once you start typing strain working memory and executive function. → The Fix: Keep labels permanently visible above the text box to reduce cognitive load. 8/ The Invisible Reality → The Tension: We often design solely for static, highly visible needs. → The Fix: Recognize that many disabilities are invisible or temporary. Low friction content is high impact content and supports everyone. Stop making your audience fight your design to get to your message. Check your latest post or project. Are you planting barriers, or cultivating connection?

Welcome back to Disability Tip Tuesday. Living life on wheels means I’ve come across a lot of spaces that almost got accessibility right—but missed the mark in ways that matter. I’m continuing this series to share what those misses look like in real life, and how a small shift in design or mindset can make a big difference. These posts are based on my lived experience, and my goal is to spark awareness and offer doable ideas that help make access more thoughtful—and more effective—for everyone. *** Image descriptions: 1) A photo of a hotel shower with a shower bench several feet from the shower controls. 2) Another view of a photo of a hotel shower with a shower bench several feet from the shower controls. 3) A photo of a hotel shower where the controls are just above the shower bench. Video content: Disability Tip Tuesday—ADA compliance doesn’t always equal true accessibility. Frustration: I can’t reach what I need. Designing for people without consulting them often misses the mark. The situation: A hotel room features an “ADA accessible” shower. The bench is fixed on one end of the shower, while the shower head and controls are on the opposite end—completely out of reach for someone seated. The setup leaves the user unable to shower independently or safely. Before: The hotel installs required elements—bench, grab bars, handheld shower head—but fails to consider the practical layout. A guest must attempt to stand or call for assistance, undermining dignity and independence. After (what success looks like): The hotel places the bench and controls together at the same end, within comfortable reach for seated users. Guests can use the shower independently and safely without awkward stretching or assistance. Three tips for success: 1.       Design for real usability, not just code compliance. Ask: Can someone use this independently and with dignity? 2.       Think beyond minimum requirements. Go the extra step—just because something meets ADA standards doesn’t mean it meets actual user needs. 3.       Test your designs with real users. Invite people with disabilities to do pre-opening assessments or better yet, invite them into the design process. https://lnkd.in/gAWvyKDn