Accessible User Interface Guidelines

Accessibility Guidelines (WCAG) in Plain English (https://lnkd.in/eSJnNYs2), a practical overview of A, AA and AAA success criteria, guidelines, real-world examples and references in human-friendly language — without dense technical explanations, abbreviations and terminology. Neatly put together by AAArdvark with the help of Johannes Lehner, Andrew Hick, Martin Underhill, Charlie Triplett. All guidelines are also broken down by levels, themes, responsibilities and WCAG levels, as well as the group of people who are supported by each — from auditory/hearing to cognitive to physical/motor to visual assistance. Plus, search for finding a specific A fantastic reference to keep close by for your accessibility work! Useful resources: How To Make A Strong Case For Accessibility https://lnkd.in/eSNNbGD2 Designing Accessibility Personas https://lnkd.in/eTXRxQwv Inclusive Design Patterns For 2025 (Google Doc + Videos) https://lnkd.in/e2YKm8Gv The New European Accessibility Act (EAA), and What It Means https://lnkd.in/exGDjZFB European Accessibility Act (EAA): Why WCAG AA Isn’t Enough https://lnkd.in/ePRNSyP4 And thanks to everyone pushing for accessibility efforts and inclusive design — your work is often happening behind the scenes, without a lot of fanfare, but it makes a whole world of a difference for people who rely on it every single day. 👏🏼👏🏽👏🏾 #ux #WebAccessibility

Happy Global Accessibility Awareness Day everyone! It's a great day to remind people, that, accessibility is the responsibility of the whole team, including designers! A couple of things designers can do: - Use sufficient color contrast (text + UI elements) and don’t rely on color alone to convey meaning. - Ensure readable typography: support text resizing, avoid hard-to-read styles, maintain hierarchy. - Make links and buttons clear and distinguishable (label, size, states). - Design accessible forms: clear labels, error help, no duplicate input, document states. - Support keyboard navigation: tab order, skip links, focus indicators, keyboard interaction. - Structure content with headings and landmarks: use proper H1–Hn, semantic order, regions. - Provide text alternatives for images, icons, audio, and video. - Avoid motion triggers: respect reduced motion settings, allow pause on auto-play. - Design with flexibility: support orientation change, allow text selection, avoid fixed-height elements. - Document accessibly and communicate: annotate designs, collaborate with devs, QA, and content teams. Need to learn more? I got a couple of resources on my blog: - A Designer’s Guide to Documenting Accessibility & User Interactions: https://lnkd.in/eUh8Jvvn - How to check and document design accessibility in your mockups: a conference on how to use Figma plugins and annotation kits to shift accessibility left https://lnkd.in/eu8YuWyF - Accessibility for designer: where do I start? Articles, resources, checklists, tools, plugins, and books to design accessible products https://lnkd.in/ejeC_QpH - Neurodiversity and UX: Essential Resources for Cognitive Accessibility, Guidelines to understand and design for Dyslexia, Dyscalculia, Autism and ADHD https://lnkd.in/efXaRwgF - Color accessibility: tools and resources to help you design inclusive products https://lnkd.in/dRrwFJ5 #Accessibility #ShiftLeft #GAAD

Drop the white. Your clean background is creating visual friction. We tend to equate pure white with professionalism. But for a massive part of your ecosystem, that stark background is not professional. It is a strobe light. I have posted about this before. The feedback from UX researchers, designers, and accessibility advocates helped expand this landscape significantly. The clinical reality is that high contrast drains executive function. You force users to burn cognitive fuel just to stabilize the image, leaving less fuel to actually understand the content. Here is an updated guide to cultivating visually accessible digital environments. 1/ The Strobe Light (Stark White) → The Code: #FFFFFF → The Issue: For the 14% of the population with Scotopic Sensitivity, high contrast black text on pure white causes text to vibrate. It acts as an optical strobe light, washing out the letters. → The Environment: Pair this stark hex code with harsh fluorescent office lighting, and you actively trigger visual migraines and severe optical drag. 2/ The Deep Shade (Pure Black) → The Code: #000000 → The Issue: Dark Mode is not a universal cure. For the 33% of people with astigmatism, pure black backgrounds cause halation. The text becomes fuzzy, bleeds into the dark, and forces the eyes to overwork just to focus. 3/ The Soft Sun (Optimal Contrast) → The Standard: The British Dyslexia Association explicitly recommends avoiding bright white. You want soft, not stark. → The Metric: Accessibility experts note that an ideal luminance contrast ratio sits between 7 to 1 and 15 to 1. Going over 15 to 1 becomes difficult to tolerate. 4/ The Solarized Upgrade → The Codes: Background FDF6E3 with Text 657B83. → The Science: Lowers contrast gain. It mimics reading on a sunny afternoon rather than staring into a flashlight. 5/ The Sepia Upgrade → The Code: Background F4ECD8. → The Science: Provides a cozy warmth that reduces blue light exposure and relaxes the ciliary muscles in the eye. 6/ The Cream Upgrade → The Codes: Background FFFFE5 or FAFAFA. → The Science: Replaces the harsh #FFFFFF and #000000 with a gentle off white. Reduces glare while preserving a familiar paper feel. This is a standard recommendation for dyslexic readers. 7/ Expanding the Ecosystem → The Goal: Normalize customization. The goal is never to force everyone into a sepia box. → The Practice: Build websites that respect custom user style sheets. Ensure your contrast choices do not break screen reader compatibility. Empower user agency so individuals can adjust the lighting for their own specific neurobiology. White space is important. But it does not have to be white. Check your recent slide deck or website. Are you planting visual friction, or are you cultivating flow?

Your design might look clear and organized, but if that structure isn't in the code, assistive tech users miss out. Headings, lists, form groups, required fields, tables - they all need proper HTML to be meaningful. This carousel breaks down how to meet 1.3.1 and why it's important. Check it out 👉 #Accessibility #A11y #InclusiveDesign #WebDev #WCAG #SemanticHTML #DesignWithIntention If you prefer your content as text, read on: When design isn’t enough. Understanding WCAG 1.3.1. What is WCAG 1.3.1? Your design communicates meaning and relationships. But if it’s not in the code, assistive technology users can’t access that information. Why it matters. If you rely only on how things look, you leave out people who use screen readers, rely on braille displays, or can’t see layout or hear audio cues Common mistakes. These may look fine, but aren’t coded accessibly: Bold text as a heading Asterisks or red text for required fields Dashes for lists Tables made with spaces or tabs instead of HTML Do it right with semantic HTML. Use the correct HTML tags and attributes to convey meaning to assistive technologies. Reinforce style with structure. If color, sound, or placement communicates something, back it up with code. Code grouped form fields. Wrap form fields that go together in a fieldset and use a legend to describe the purpose of the set of fields. Code headings correctly. Use semantic heading tags in a logical order. Use h1 for the page title, h2 for section headings, h3 for subsection headings, and so on. Mark up lists correctly. Use ul or ol elements to code lists. Don't fake it with dashes or emojis. Mark up (and use) tables correctly. Use tables for tabular data, not for layout. Use a caption to describe what the table is about. Use th elements for table headers and define their scope. Use td elements for table cells. Label it or lose the meaning. Programmatically associate labels with form fields by using a for attribute on the label that refers to the ID of the input. Required field? Code it that way. Use the aria-required="true" attribute to mark required fields. No landmarks? No map. Provide page landmarks such as header, main, footer, aside, and nav to help users find their way. The big picture. WCAG 1.3.1 is one of the most common success criteria to have failures...and many of those are some of the easiest to fix! Learn more. Want more clear and actionable WCAG breakdowns? WCAG in Plain English is available now!

You can pass accessibility checks. And still confuse everyone. I’ve seen “accessible” interfaces that nobody could actually use. The problem? The words.  If users can’t understand your interface, they can’t use it. Here are 5 language shifts that instantly improve accessibility: 1. Use active voice It’s easier to read and act on. ✅ “Click here to download.” 🚫 “The download can be started by clicking here.” 2. Make buttons say what they do Generic CTAs slow people down. ✅ “Download your free guide.” 🚫 “Click here.” 3. Explain errors like a human ✅ “Please check the highlighted fields and try again.” 🚫 “An error occurred.” 4. Break instructions into steps Scanning beats reading. ✅ Go to Settings Select Security Tap Reset Password 🚫 "To reset your password, go to settings and follow the instructions provided." 5. Use plain language ✅ “Your payment didn’t go through.” 🚫 “Payment method unsuccessful.” These changes help: - Neurodivergent users - Non-native speakers - Anyone tired, stressed, or multitasking If people don’t understand your product, They can’t use it. 👇🏽What’s one language fix you’d add to this list? Drop your thoughts in the comments. ♻️ Share and save this if you write UX copy. --- ✉️ Subscribe to my newsletter for accessibility and design insights here: https://lnkd.in/gZpAzWSu

📣 Accessibility Professionals, Bookmark This. My good friend Natalie MacLees from AAArdvark Accessibility just launched something the entire accessibility community has been asking for: 🔍 WCAG in Plain English https://lnkd.in/gYGUM8vR This site breaks down each WCAG success criterion into straightforward, human-readable language; designed specifically for accessibility professionals, content creators, designers, developers, and educators. No jargon. No gatekeeping. Just clarity, context, and community-forward accessibility. ✨ Why it matters: Helps bridge the gap between standards and implementation Makes WCAG digestible for teams outside of dev Encourages shared understanding and accountability Supports real-world conformance, not just checkbox compliance 🙌 Please support Natalie’s work by exploring, bookmarking, and sharing this essential resource. #Accessibility #WCAG #InclusiveDesign #A11y #DigitalInclusion #AccessibilityEducation #PlainLanguage #GracefulWebStudio #DesignWithGrace #AardvarkAccessibility #WCAGinPlainEnglish

Did you know that WCAG color contrast applies to more than just text? Under Success Criterion 1.4.11: Non-text Contrast, user interface components and graphical objects must meet a minimum contrast ratio of 3:1 against adjacent colors. This includes buttons, form fields, checkboxes, sliders, and icons, especially those used to convey meaning or trigger actions. If a visual control or icon blends into the background due to insufficient contrast, users with low vision may miss or misinterpret it. To check for this, try using the WebAIM Color Contrast Checker to evaluate your digital content in e-Learning and online courses. Improving contrast for all visual components supports a broader range of users and helps ensure that your interface is perceivable, not just to some, but to everyone. Have you checked color contrast on non-text elements yet? Image Description: Brightspace course titled “Making Online Content Accessible for All Cohort.” The interface features a table of contents made up of rectangular course tiles (cards). Each tile displays a course module title, progress indicator, and two icon buttons at the bottom. An orange arrow points to the question mark icon. When hovered over, it displays a visible label reading “Show Description.” Another arrow points to the WebAIM Color Contrast Checker, which shows a contrast ratio of 8.62:1 between white text (#FFFFFF) and a dark gray background (#4A4C4E), confirming it passes WCAG 2.2 contrast requirements for non-text elements.

Ever tapped the wrong button on a healthcare app because they were all crammed together like a bad game of Tetris? That’s not just annoying. It’s a usability failure. And in healthcare, that means missed refills, skipped messages, or abandoned appointments. Ease of Use is one of the most overlooked (but most critical) dimensions of digital patient experience. When interfaces are hard to tap, guessy to navigate, or visually overwhelming, patients drop off—or never engage to begin with. Here are 5 UX fixes to make healthcare tools feel effortless across devices: 1️⃣ 𝗗𝗲𝘀𝗶𝗴𝗻 𝗟𝗶𝗸𝗲 𝗧𝗵𝗲𝘆’𝘃𝗲 𝗡𝗲𝘃𝗲𝗿 𝗕𝗲𝗲𝗻 𝗛𝗲𝗿𝗲 𝗕𝗲𝗳𝗼𝗿𝗲 Follow the Don’t Make Me Think rule. If a button looks like plain text, it’s not a button. If users have to guess what’s clickable, they’ll guess wrong. 2️⃣ 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝗶𝘇𝗲 𝗙𝗮𝗺𝗶𝗹𝗶𝗮𝗿𝗶𝘁𝘆 𝗢𝘃𝗲𝗿 𝗡𝗼𝘃𝗲𝗹𝘁𝘆 Use common patterns that feel natural. Patients shouldn’t have to “learn your interface” just to book a flu shot. 3️⃣ 𝗠𝗮𝗸𝗲 𝗘𝘃𝗲𝗿𝘆 𝗧𝗮𝗽 𝗘𝗳𝗳𝗼𝗿𝘁𝗹𝗲𝘀𝘀 Especially for older adults and low-vision users, tap targets should be at least 1 cm x 1 cm with adequate padding. This isn’t just best practice — it’s accessibility 101. 4️⃣ 𝗟𝗲𝘁 𝗙𝗶𝗻𝗴𝗲𝗿𝘀 𝗟𝗲𝗮𝗱 𝘁𝗵𝗲 𝗪𝗮𝘆 Support natural gestures — swiping, pinching, tapping — especially for scrolling long results or zooming into care instructions. 5️⃣ 𝗚𝘂𝗶𝗱𝗲 𝘄𝗶𝘁𝗵 𝗖𝗼𝗹𝗼𝗿, 𝗡𝗼𝘁 𝗖𝗵𝗮𝗼𝘀 Use bright colors for actions that move users forward. If everything is bold, nothing is clear. Prioritize clarity over decoration. When digital care is easy, patients trust it. When it’s clunky, they opt out. 💬 𝗕𝗼𝗻𝘂𝘀: Well-designed UX reduces patient errors and data-entry mistakes, which means fewer compliance headaches for your team. 𝗪𝗮𝗻𝘁 𝘁𝗼 𝘁𝗲𝘀𝘁 𝗵𝗼𝘄 𝗲𝗳𝗳𝗼𝗿𝘁𝗹𝗲𝘀𝘀 𝘆𝗼𝘂𝗿 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝗿𝗲𝗮𝗹𝗹𝘆 𝗶𝘀? Let’s apply the PX Scale and uncover where friction is hiding: https://lnkd.in/gVd7Vd-z Because in healthcare UX, friction isn’t just a design flaw — it’s a barrier to care. #HealthcareUX #DigitalHealth #PatientExperience #UXDesign #AccessibilityMatters #DesignForOutcomes #ComplianceByDesign

Book Review: Inclusive Design for Accessibility (August 2025) Did you know that over 1 billion people worldwide experience some form of disability? At some point, everyone faces a disability—whether situational, temporary, or permanent. “Inclusive Design for Accessibility” is a must-read for anyone building digital products that truly work for everyone. I just finished “Inclusive Design for Accessibility: A practical guide to digital accessibility, UX, and inclusive web and app design”—and it’s a game changer. What sets this book apart? Twelve industry leaders—including Dale Cruse, Denis Boudreau, Dr. Angela Young, Maya Sellon, Julianna Rowsell, Nandita Gupta, Jennifer Chadwick, Crystal Scott, Chris McMeeking, Dr. Keith Newton, Charlie Triplett, and Kai Wong—team up to offer a holistic, multi-perspective blueprint for accessibility. Their combined expertise in accessibility, UX, development, and inclusive leadership makes every chapter practical and authoritative. Key chapters cover: Defining inclusive design for today’s digital landscape Understanding a range of disabilities and assistive tech Going beyond compliance to ethical, human-centered design User research and real-user testing Actionable UI/UX strategies, content creation, and dev best practices Accessibility for mobile, VR, AR, and AI Building accessibility into your design system from the ground up A few chapters truly stood out for me: Chapter 7 by Crystal Scott: Packed with practical advice on HTML, CSS, and ARIA for accessible web development. Her real-world examples demonstrate how small code changes can significantly enhance accessibility. Chapter 11 by Kai Wong: Focuses on tools and techniques for accessibility testing, offering a comprehensive overview of both automated and manual testing methods. This chapter is especially valuable for anyone looking to ensure their products are genuinely accessible and compliant. Inspired by Kai Wong’s chapter, I’ve started experimenting with accessibility testing tools like Axe and Lighthouse. Both have already helped me uncover issues I wouldn’t have spotted on my own, and I’m excited to keep exploring what they can do. What I loved: This book isn’t just about compliance—it’s about creating digital experiences that work for everyone. If you work in accessibility design, development, product management, or leadership, you’ll find this book invaluable. If I had one wish, it’d be for more on accessibility for emerging tech like AI chatbots—but maybe that’s for the sequel! Highly recommended for anyone serious about inclusive digital experiences. #Accessibility #InclusiveDesign #UX #DigitalTransformation #BookReview Have you read it? What did you think? Drop your thoughts below! Get your own copy: https://lnkd.in/eHQpVdVq Kai Wong, CPACC, CHES 🌈♾️ Crystal Scott, CPWA

We’re all about diversity, right? Well, one thing I’ve noticed is that there’s a curious lack of conversation about how to test and design for neurodiversity. We talk about how we can ensure accessibility, but what about ensuring accessibility in terms of cognitive ability? Studies show that up to 20% of the population is neurodivergent. As more information emerges about how diverse human brain function can be (and how this diversity can be the basis of many unique strengths), it’s time that we started exploring how we can ensure cognitive accessibility in digital experiences. Neurodiversity exists on a wide spectrum, everything from dyslexia to autism spectrum disorders. For researchers and businesses designing with neurodiversity in mind, I have a few tips to guide the process. 1. Be mindful of sensory thresholds when conducting research with neurodiverse users. Minimize environmental elements that could be overwhelming for individuals with sensory processing disorders, such as bright lights, intense animation, and loud sounds. 2. Keep user interfaces simple and to the point. Be intentional about creating a visual hierarchy that gives clear directives. Using legible fonts helps keep users focused. Give your neurodiverse users the option to adjust some features during their digital usability experience—font size, background color, screen contrast, etc. This takes into account the fact that neurodiversity is unique to each individual and that digital experiences will vary from user to user. 3. Throughout testing, provide clear and consistent feedback to users as they move through the digital experience. Give plenty of visual and auditory cues to actively eliminate ambiguity around what actions lead to what results. If you’re ready to start integrating these principles into your products, an accessibility audit could be a good place to start, or you could initiate a pilot project focused on enhancing cognitive accessibility. These practical steps will help your designs and applications become more accommodating for neurodiverse users.