Web Accessibility Guidelines

💎 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

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

Ever notice the little cutouts at street corners, designed so wheelchairs can easily cross the street? That small change—often referred to as the “curb cut”—is a classic example of inclusive design. Initially created to assist people using wheelchairs, these curb cuts have ended up benefiting far more people, from parents pushing strollers to delivery workers with heavy carts and travellers rolling suitcases. This phenomenon is known as the “curb-cut effect.” But here’s why it matters on a bigger scale: over 1.3 billion people (about 16% of the world’s population) live with some form of disability, according to the World Health Organization. Why Inclusive Design Matters 🔻 1️⃣ Empathy Translates to Innovation When we put ourselves in the shoes of people with different abilities, we often stumble upon creative, universally helpful solutions. Curb cuts are just one example—voice recognition technology, originally developed for people with mobility or visual impairments, is now used daily by millions of people around the world. 2️⃣ Better Customer and Employee Experience Companies that prioritise accessibility foster a culture where everyone feels valued. According to a Harvard Business Review article, diverse and inclusive teams often make better decisions up to 87% of the time. Making environments usable for all can translate into stronger loyalty from both customers and employees. 3️⃣ Economic and Social Impact An environment that’s easier to navigate means more people are able to fully participate in the economy and society. Whether it’s allowing someone to shop independently or enabling them to access education and job opportunities, inclusive design has a real impact on quality of life and financial well-being. The curb-cut effect is a reminder that when we remove barriers for some, we often end up elevating the experience for all. This video really highlights how it feels to live in a world not designed for your sensory abilities.

1 in 12 men can’t see your design. And you’re still using red for errors. There’s a real chance your user can’t distinguish between your success green and error red. Yet most design teams still treat colour blindness like an edge case. It’s not. Here’s the simplified breakdown every designer should know: 1. Red-Green (Deuteranopia & Protanopia) - 1st Priority Affects ~8% of men, ~0.5% women. Users struggle to distinguish: • Red vs green. • Brown vs green. • Orange vs red. What to do: • Never rely on red/green alone for success and error states. • Pair every status with text and an icon (✓ ✗ ⚠). • Ensure colours differ in brightness and contrast, not just hue. • Meet contrast requirements: 4.5:1 for text, 3:1 for UI components. If you only fix one thing, fix this. 2. Blue-Yellow (Tritanopia) - 2nd Priority Very rare (~0.01%), but still worth checking. Users struggle with: • Blue vs yellow. • Blue vs green. • Purple vs red. What to do: • Avoid pairing blue/yellow for critical states. • Don’t rely on blue vs green to indicate meaning. • Add icons and text to “info,” “warning,” and “alert” states. • Maintain strong brightness contrast. Red/green works fine here. 3. Monochromacy - 3rd Priority Extremely rare. Users see only in grayscale (no colour perception). What to do: • Rely on contrast, not hue. • Use text labels, icons, patterns or structural differences. • Never use colour as the only indicator for meaning. If your design works in grayscale, you’ve already covered this. Here's a guide your team can use: ✅ DO • Add icons or labels to all colour-coded states. • Use contrast differences ; at least 4.5:1 for text, 3:1 for UI components. • Test with simulators (Stark, Colorblind, Who Can Use). • Ask yourself: “Does this work in grayscale?” ❌ DON’T • Use colour as the only indicator. • Rely on red/green for critical actions. • Skip accessibility testing. 👇🏽 What’s your experience with colour blindness? Drop your thoughts in the comments. ♻️ Share and save this for your team. --- ✉️ Subscribe to my newsletter for accessibility and design insights here: https://lnkd.in/gZpAzWSu --- Accessibility note: Contents in the image attached contain normal and large text ratios for WCAG 2.2 AA only.

Eye-Opening Packaging. Packaging design often revolves around what we see - vibrant colours, bold shapes, and logos that pop off the shelves. But what happens when sight isn't part of the equation? For millions of visually impaired individuals, packaging becomes an obstacle, making something as basic as grocery shopping unnecessarily difficult. While pharmaceutical packaging has made strides in including Braille, most consumer goods still leave visually impaired consumers in the dark - both literally and figuratively. Brands are missing a huge opportunity by not designing more inclusively. Focusing only on average consumers excludes a significant portion of the population. Alexandra Burling's project Colour Me Blind challenges this oversight. Her work takes a sensory-driven approach to packaging, tapping into touch and sound, proving that inclusive design can be both practical and appealing. Her approach goes beyond simply adding Braille to products like milk, cornflakes, and canned tomatoes. Instead, she creates packaging that encourages people to engage with products through multiple senses. Textures and tactile instructions make identifying and using everyday items far more intuitive for the visually impaired. Her deep dive into this world wasn't just theoretical. Burling interviewed blind individuals and even lived in the dark to understand the challenges faced when interacting with traditional packaging. The result is packaging that empowers, offering a richer sensory experience that supports independence. At her graduation exhibition, Burling brought this concept to life with a mini-supermarket where visitors could feel the packaging in total darkness. Imagine picking up a milk carton and recognising it not by sight, but by the textures under your fingertips, or hearing the beeping sounds of a cash register in the background, simulating a real shopping environment. With over 2 million visually impaired individuals in the UK alone, the fact that most packaging still doesn't accommodate their needs is a massive blind spot. Colour Me Blind shows that packaging design doesn't need to compromise between beauty and function. It can be both. And as technology continues to evolve, the excuses for not implementing Braille or tactile elements in packaging design are running out fast. We've seen legislation drive change in pharmaceuticals, but when it comes to consumer goods, there's still a long way to go. Burling's work makes it clear - it's time for regulations, conversations, and action to catch up. Packaging needs to move beyond being visually appealing to becoming universally accessible. Let's stop designing only for those who can see and start creating for everyone. Now that's a vision we can all get behind. Agree? 📷Alexandra Burling

I just spent 3 years analyzing more than 30 organizations and their accessibility initiatives. Here are 3 trends I noticed: 1. Accessibility Statements = Lots of Promises, Little Action Many organizations have beautifully written accessibility statements, pledging inclusion and access for all. But when you dig deeper? Very few are walking the talk. It’s easy to pledge on paper, but what matters is the execution—action speaks louder than words. Takeaway: Don’t just craft statements—craft change. It’s time to move from promises to real, measurable outcomes. 2. Token Efforts = Great PR, Minimal Impact I’ve seen so many companies invest in token accessibility efforts—building one ramp or adding alt-text to a couple of images, just to check a box. It’s usually enough to get some positive press, but the actual impact on the disabled community? Minimal. Performative inclusion doesn’t solve the deeper issues of inaccessibility and ableism in society or within workplaces. Takeaway: Inclusion isn’t a one-off. Real accessibility requires continuous effort, investment, and a willingness to evolve. It’s not just about looking good; it’s about making a lasting difference. 3. Accessible Design = More Engagement and Satisfaction Organizations that prioritize truly accessible design—both digitally and physically—see better engagement not only from the disabled community but from everyone. Accessible design benefits everyone. It creates a user-friendly environment where people feel seen, heard, and valued, leading to increased loyalty and satisfaction. Takeaway: Make accessibility your competitive advantage. It’s not just about compliance; it’s about making everyone feel included and valued. The bottom line: If you’re serious about disability inclusion, don’t wait for the world to push you. Lead by example and start making changes now that actually impact lives. What are you doing to ensure your initiatives are more than just words?

Can Apple Vision Pro help blind people? Yes this tech actually has potential to revolutionize how visually impaired people navigate the world. Using real-time meshing, hand tracking, and spatial audio, the headset creates a virtual environment that can act as a guide for blind users. Stijn Spanhove from "In The Pocket" shared two incredible solutions his team developed: Protective Cubes - Users are surrounded by virtual cubes that make noise when they collide with real-life obstacles. Using hand tracking, there's even a virtual blind stick that alerts the user with sound when it hits a target. Obstacle Detection with Audio Cues - By detecting horizontal and vertical planes, the headset uses sound to warn the user when they’re near obstacles, similar to how proximity sensors work in cars. This kind of tech can essentially be ''eyes'' for someone, helping them navigate safely and independently. It's an incredible innovation that could change lives. Follow Endrit Restelica for more. #tech #innovation #ai

I can't tell you how often I've been involved with projects that run out of time, and the owner says, "We'll add accessibility in the first update." Sometimes that actually happened, frequently it didn't. Even when it happened, the accessibility felt more like it was shoehorned into a design that didn't consider accessibility from the beginning. Delaying accessibility decisions is more than a scheduling issue; it’s a values issue. Your organization has decided who matters and who doesn’t. Retrofits rarely work well and almost always cost more. Starting with accessibility at the ideation stage saves time, money, and credibility. It tells your users with disabilities that your organization feels that they belong. If your product development life cycle doesn’t prioritize inclusion from day one, you are guaranteed to exclude potential customers and create unnecessary regulatory and litigation risk for your organization. Alt: If you treat accessibility like a future feature, you've already chosen to exclude people. #AccessibilityTruthTuesday #Accessibility #Disability #Inclusion #Accessible #InclusiveDesignMatters #ShiftLeftAccessibility #AccessibilityIsNotAnAfterthought #InclusionIsAValue

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