App Design Layouts

💎 Accessibility For Designers Checklist (PDF: https://lnkd.in/e9Z2G2kF), a practical set of cards on WCAG accessibility guidelines, from accessible color, typography, animations, media, layout and development — to kick-off accessibility conversations early on. Kindly put together by Geri Reid. WCAG for Designers Checklist, by Geri Reid Article: https://lnkd.in/ef8-Yy9E PDF: https://lnkd.in/e9Z2G2kF WCAG 2.2 Guidelines: https://lnkd.in/eYmzrNh7 Accessibility isn’t about compliance. It’s not about ticking off checkboxes. And it’s not about plugging in accessibility overlays or AI engines either. It’s about *designing* with a wide range of people in mind — from the very start, independent of their skills and preferences. In my experience, the most impactful way to embed accessibility in your work is to bring a handful of people with different needs early into design process and usability testing. It’s making these test sessions accessible to the entire team, and showing real impact of design and code on real people using a real product. Teams usually don’t get time to work on features which don’t have a clear business case. But no manager really wants to be seen publicly ignoring their prospect customers. Visualize accessibility to everyone on the team and try to make an argument about potential reach and potential income. Don’t ask for big commitments: embed accessibility in your work by default. Account for accessibility needs in your estimates. Create accessibility tickets and flag accessibility issues. Don’t mistake smiling and nodding for support — establish timelines, roles, specifics, objectives. And most importantly: measure the impact of your work by repeatedly conducting accessibility testing with real people. Build a strong before/after case to show the change that the team has enabled and contributed to, and celebrate small and big accessibility wins. It might not sound like much, but it can start changing the culture faster than you think. Useful resources: Giving A Damn About Accessibility, by Sheri Byrne-Haber (disabled) https://lnkd.in/eCeFutuJ Accessibility For Designers: Where Do I Start?, by Stéphanie Walter https://lnkd.in/ecG5qASY Web Accessibility In Plain Language (Free Book), by Charlie Triplett https://lnkd.in/e2AMAwyt Building Accessibility Research Practices, by Maya Alvarado https://lnkd.in/eq_3zSPJ How To Build A Strong Case For Accessibility, ↳ https://lnkd.in/ehGivAdY, by 🦞 Todd Libby ↳ https://lnkd.in/eC4jehMX, by Yichan Wang #ux #accessibility

Stop reinventing the accessibility wheel. Standards, patterns, and guidance already exist. WCAG, ARIA, ISO, plus decades of lived experience from disabled people, have spec'ed out what works and what doesn’t. The problem isn’t the absence of accessible frameworks or design systems. The problem is that too many organizations treat accessibility like a novel experiment and an opportunity to do something splashy or unique rather than following the body of knowledge we already have. Sign language gloves, anyone? Don't waste time and money on one-off “innovations” and tool integrations that don't do what they claim Do focus on consistent implementation, testing with disabled users, maintaining internal accountability, and improving your accessibility maturity. That’s how you build products and services that are actually disability inclusive, instead of just trying to be disability inclusive. Where have you seen teams overcomplicate accessibility instead of applying what’s already proven? #Accessibility #Disability #WCAG #A11y

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

The “accessible” font was the one they couldn’t read. I was in a conversation recently where a bubble-style font was flagged as inaccessible. The reasoning made sense. Then the people we claim to design for responded: - A neurodivergent person said bubble letters were easier to read, and the “accessible” fonts gave them headaches. - A dyslexic person said thin letterforms from the accessible font list blended and distorted, almost like an optical illusion. - Someone else said, “I can’t read the accessible ones. Only the bubble.” - Another asked: Which “accessible” font actually distinguishes between lowercase l, uppercase I, and the number 1? Arial. Helvetica. Calibri. Open Sans. Roboto. Fonts that recur in design systems, accessibility guidance, and handover decks. But for some people, those three characters are almost indistinguishable: l, I & 1 A font can look clean, pass brand review and appear in an accessibility checklist. And still fail the person sitting in front of the screen. Here’s what design teams can do: 1. Test the “Il1” string before choosing a font. - Type uppercase I, lowercase l, and the number 1 side by side: Il1. If they look identical, you have a legibility problem that your audit may not catch. 2. Don’t block text resizing. - Use scalable units where possible. Respect browser and device-level text preferences. Many people with disabilities and neurodivergent users resize text without assistive technology. 3. Build typography preferences into the product. - Font choice, size, line height, letter spacing, and background colour should be adjustable wherever possible. 4. One person’s accessible default is not everyone’s usable experience. - Include people with disabilities and neurodivergent users before the font is locked. Font decisions often happen in brand or design system sprints with no user research attached. That needs to change. Accessibility is a conversation And too often, we’ve been having that conversation without the people it’s supposed to serve. 👇🏽 Have you ever struggled to read something that was supposed to be “accessible”? What made it harder, or what actually worked better for you? 🔖 Save this for the next time you're looking at font options ♻️ Share it with your team ---- ✉️ Subscribe for more accessibility and design insights: https://lnkd.in/gZpAzWSu ---- Accessibility note: This infographic, titled The accessible font was the one they couldn't read has the same information as the post.

My design passed accessibility checks with 7:1 contrast, while a user measured 3.37:1 on Linkedin. Both of us were right at the end, do you know how? I recently had a very interesting discussion under one of my posts and it turned into a great reminder of how complex accessibility can be in the real world. For the post, I created a graphic and checked that the color contrast of every text element is safely above the 4.5:1 minimum recommended by WCAG. Then a follower commented that some of the text was hard to read on the phone and he shared a screenshot from a contrast checker showing 3.37:1 for one of the colors. That raised an interesting question: how can a design that passes accessibility checks suddenly fail a user? There are several things happening between the moment we design something and the moment someone sees it: 1️⃣ Platform compression When we upload images to social platforms, they are usually compressed automatically to reduce file size. Compression can slightly change colors and blur the edges between text and background. If the contrast was already close to the limit, this can lower the effective contrast. 2️⃣ Image resizing The graphic I designed was quite large, but platforms often resize images for different screens, especially on mobile. When the image becomes smaller: • text strokes become thinner • edges get softened by scaling • readability decreases 3️⃣ Thin fonts + antialiasing Even with sufficient contrast ratios, thin fonts can reduce perceived contrast. When text is scaled or compressed, the browser blends text pixels with the background (antialiasing). That means the visible color becomes a mixture of text and background. Contrast tools inside design software measure pure colors, while the final rendered image contains blended pixels. 4️⃣ Screens and real-world conditions People view content on: • phones in bright daylight • different screen technologies • different brightness levels • sometimes without glasses All of this affects how readable something feels. 5️⃣ Measuring the uploaded image Another important detail: the contrast was checked on a screenshot of the uploaded image, not on the original design. That means the tool measured pixels that were already affected by: • compression • scaling • antialiasing So the measured 3.37:1 might actually be correct for the rendered version of the image. Accessibility does not only happen during design, it also depends on how the design is exported, processed by platforms, and displayed on real devices. That’s why it's helpful to: ✔ aim for contrast higher than the minimum ✔ avoid very thin fonts in images ✔ check the exported file, not only the design tool ✔ test how it looks after uploading to the platform Have you ever experienced something similar where a design technically passed accessibility checks but still caused issues for users? #WebAccessibility #Accessibility #InclusiveDesign #UXDesign #UXAccessibility #WCAG #DesignForAll

📣 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

EN 301 549 (the EU’s accessibility standard for ICT) looks like it’s on track for a refresh that incorporates WCAG 2.2—and that’s worth having on everyone’s radar. A draft update is already published, which is a pretty strong signal that the standards process is moving (even if formal harmonization/citation timelines can lag behind the draft). What this likely means in practice: More alignment with WCAG 2.2 for web and app accessibility expectations tied to EN 301 549. Procurement language and audit checklists may need updates once the revision is finalized and formally adopted. If you’re building an accessibility roadmap for 2026, it’s a good time to sanity-check gaps against WCAG 2.2, even if your official obligation today still references earlier versions in many contexts. Here’s the ETSI draft (public PDF): https://lnkd.in/gYCEc4q6 #Accessibility #EN301549 #WCAG22 #EAA #DigitalAccessibility

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

Why does it seem like accessibility is often treated as an afterthought? 🕒 In my experience, companies wait until audits or legal pressures force them to act, but this reactive approach costs time, money, and damages user trust. Why let it come to that? I’ve seen forward-thinking organizations start to shift accessibility left—embedding it directly into every stage of development. 🌍 From the requirement phase to testing, accessibility checks can now be automated, flagging and resolving issues in real-time. This isn’t just about ticking boxes for compliance; it’s about creating a seamless, inclusive experience for every user from the start. Today’s AI-driven accessibility tools don’t just identify issues—they help solve them. With checks happening within the developer’s IDE, real-time feedback ensures accessibility is built into the code before it even reaches production. 🛠️ This approach saves on manual work, lowers costs, and empowers developers to meet standards like WCAG and ADA efficiently. By making accessibility part of the core development platform, we’re not just avoiding fines—we’re building a brand that prioritizes inclusion and usability for everyone. It’s time to make accessibility a key business principle, not just a checkbox. 🔍💡

Edge cases aren’t as rare as many think—they’re just less visible. Most teams design for the ideal user in the perfect scenario: ✅ Clean data. ✅ Fast wifi. ✅ Desktop screen. ✅ Full attention. ✅ Two working hands. But auditing dozens of products has shown me that “edge case” are sometimes the majority. → Your user ordering food while holding a crying baby → Someone navigating your app with a broken wrist → People using voice commands because their hands are busy → Someone squinting at your low-contrast text in bright sunlight We call them edge cases because they live outside our comfortable assumptions about how people use our products. The truth? Your “happy path” user—sitting calmly at their desk, fully focused, with perfect conditions—they’re the real edge case. When you design for the invisible majority, something interesting happens. Your product doesn’t just become more accessible. It becomes more usable for everyone. → Keyboard navigation helps screen reader users—and power users who prefer shortcuts → High contrast modes support low vision—and anyone using their phone outdoors → Simple language helps cognitive accessibility—and reduces friction for everyone → Voice controls assist motor impairments—and busy multitaskers → Reduced motion prevents vestibular issues—and saves battery life The businesses that understand this don’t treat accessibility as compliance theater. They recognize it as a competitive advantage. Because when you solve for the hardest use cases, you make your product resilient for all use cases. Most of your users aren’t swimming in perfect conditions. They’re navigating choppy waters with limited visibility, competing priorities, and real-world constraints. Design for the storm, not the calm. What’s the biggest “edge case” you’ve designed for? #uxdesign #accessibility #productdesign ——— 👋 Hi, I’m Dane—your source for UX and career tips. ❤️ Found this helpful? Dropping a like would be 🔥. 🔄 Share to help others (or for easy access later). ➕ Follow for more like this delivered to your feed every day.