Web Accessibility Guidelines

Inaccessibility is all around us - but sometimes we’re doing it without even realising. I’ve made every one of these mistakes in the past. It wasn’t until someone took the time to point them out that I learned how inaccessible I was being - despite having good intentions. Here are 5 ways you might be being inaccessible, without even knowing: 1. Long LinkedIn headlines or overuse of emojis. Screen reader users hear your full headline every single time you post or comment. Every. Single. Time. Even when it’s truncated visually. That can mean hearing your full job title, emojis, and taglines multiple times before even reaching your post content. Try to keep your headline under 100 characters or two lines max - it makes a huge difference. 2. Long email signatures, HTTP links, and unlabelled images. Screen readers will read out every line - including things like “H-T-T-P-colon-slash-slash…” for full URLs. Images without alt text are completely invisible to screen reader users. Keep it short and simple, and use alt text wherever you can. Put only essential info in your email signature and put two dashes at the top to signal your signature is starting. And remember, it’s not your marketing tool. When was the last time you actually bought something from an email signature?! 3. Not running documents through the accessibility checker. You run a spell check, so why not an acceeeibility check? It’s a quick step, but it can flag things like heading structures, contrast issues, and missing image descriptions. It takes seconds and makes a big impact. 4. Using colour alone to convey meaning. For example, “I’ve marked the important cells in green” doesn’t help if someone can’t perceive colour easily. Neither does “I’ve shaded the cells for our RAG status”. Always add a label, icon, or another indicator. 5. Using all lowercase hashtags. #thisisnotaccessible - screen readers can’t parse where one word ends and another begins. Use camel case instead - #ThisIsAccessible - so screen readers pronounce the words correctly. Small changes, big impact. If you’ve made some of these mistakes before - welcome to the club. We learn, we improve, we do better. #DisabilityInclusion #Disability #DisabilityEmployment #Adjustments #DiversityAndInclusion #Content #A11y

👨🏾💻 How People Use Screen Readers. With behavior patterns, practical insights and things to keep in mind for accessibility. ✅ 253 million people worldwide have a visual impairment. ✅ Screen readers help them translate text to speech or Braille. ✅ They work for websites, PDFs, emails, OS and other documents. ✅ They use the same voice regardless of font size, weight, color. ✅ E.g. Jaws/NVDA (Win, 80% share), VoiceOver (iOS), Talkback (Android). 🤔 Users often listen to screen readers at the 1.5–2.0x speed. ✅ Repetitive labels and hints aren't helpful (image caption, alt). ✅ Content order during tabbing conveys the structure of the page. ✅ Follow a logical linear layout, don't spread content all over a page. 🚫 Auto-playing audio is often an alarming, frustrating experience. 🤔 Users heavily rely on descriptive headings and labels. 🚫 Screen readers can’t extract meaning from images or videos. ✅ Avoid "Click here", "Read more", "View now" for links. ✅ A text box without a label is meaningless to screen readers. ✅ Never rely on visuals alone, they might not even be there. 🤔 Frequent issues with poorly structured forms, navigation, PDFs. ✅ Add UI controls for mouse-precise actions (drag'n'drop, resizing). ✅ Include nav landmarks, so users can jump within the page quickly. ✅ Ensure PDF/UA compliance to generate accessible PDFs. ✅ Always add labels to forms and avoid CAPTCHAs if you can. Where “abled people” use their natural feelings such as sight and hearing, people with disabilities must rely on technologies. Screen reading UX shouldn’t mean a “simplified” experience. It’s just a different experience, one of many. Unfamiliar tools might sound scary. Just start. Get familiar with screen readers. Run accessibility testing with a few screen reader users. Eventually make screen reader testing a part of QA. Many accessibility issues are severe, but solutions can be simple — and impactful for people who need them most. Useful resources: How A Screen Reader User Surfs The Web (video), by Léonie Watson https://lnkd.in/emv9AT-u Designing For Users Of Screen Readers, by Lewis Wake https://lnkd.in/ePTVpBxy Testing With Blind Users: A Cheat Sheet, by Slava Shestopalov https://lnkd.in/e8vBEqHn How And When To Use Alt Text, by Emma Cionca, Tanner Kohler https://lnkd.in/e3ivcPVg How to Conduct Usability Studies for Accessibility, by NN/g https://lnkd.in/egAxJxtW Mobile Accessibility Research With Screen-Reader Users, by Tanner Kohler https://lnkd.in/eb5Y36qZ How To Document Screen Reader UX, by BBC https://lnkd.in/e8KWr-Z6 #ux #accessibility

🙈🙊🙉 Inclusive Design = Better UX Did you know that over 1 billion people worldwide live with a disability? That is about 16% of the global population. 😱 Yet, 98% of websites still fail basic accessibility standards. Even more concerning, 68% of users with disabilities leave websites because of design barriers. Microsoft Inclusive Design https://lnkd.in/gxx_CXp9 💡 What is Inclusive Design? Inclusive design is a methodology that considers the full range of human diversity. Abilities, languages, cultures, genders, ages, and different life situations. It is not only about accessibility for people with disabilities. It is about creating better experiences for everyone. 🛠️ Examples of inclusive design in real life: 🚪 Automatic doors Originally created for wheelchair users. Now convenient for everyone. 📃 Subtitles Essential for deaf and hard of hearing users. Also useful in noisy places or when sound is off. 🎮 Xbox Adaptive Controller Designed for gamers with limited mobility. Fully customizable for many user needs. 🎯 Why does it matter? When we design for diverse needs, we build products that work for a wider audience. ✅ How to get started: 1️⃣ Explore Microsoft’s Inclusive Design toolkit https://lnkd.in/gxx_CXp9 2️⃣ Use accessibility checklists W3C Web Accessibility Guidelines https://lnkd.in/dAjpu_8R 3️⃣ Apply WCAG principles in your projects https://lnkd.in/dSVbFjXi 4️⃣ Involve users with different needs in your design process. Let’s design products that are accessible, inclusive, and useful for all. #InclusiveDesign #UXDesign #Accessibility #DesignForAll #MicrosoftDesign

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!

Molly Burke’s experience at the Guide Dog Centre of Australia is a powerful reminder of what thoughtful design can do. She encountered a tactile braille map of the bathroom: something incredibly simple, yet it completely elevated her experience. As designers, we talk a lot about experience. But this is where it begins. With environments that give people confidence, dignity, and real autonomy. Molly’s video is a call to action. We need more of this. More inclusive wayfinding. More multi-sensory cues. More environments that consider the full range of human experience from the start. Small details shape the way people move through the world. Let’s design with that level of intention. ——— Molly Burke is a renowned blind beauty creator and disability advocate. Her work continues to expand awareness around how design decisions truly impact daily life. You can follow her journey on instagram at @mollyburkeofficial. #InclusiveDesign #AccessibilityMatters #ExperienceDesign

Lyft knew they had a problem. Only 5.6% of its users are over 65, and those users are 57% more likely to miss the ride they ordered. So, Lyft created Silver – a special app version for seniors. But why create a separate app when these improvements would benefit all users? The curb-cut effect is real. Features designed for wheelchair users ended up helping parents with strollers, travelers with luggage, and delivery workers with carts. The features in Lyft's senior-friendly app wouldn't only benefit older riders: 💡The 1.4x larger font option? Great for bright sunlight, rough rides. 💡Simplified interface? Less cognitive load for all of us. 💡Live help operators? Great for anyone when there's a problem. 💡Select preference for easy entry/exit vehicles? Not everyone likes pickup trucks. What started as an accommodation should became a universal improvement. The most powerful insight? Designing for seniors forced Lyft to prioritize what truly matters: simplicity and ease of use. Will they leverage this for all their users? The next time someone suggests adding another button to your interface or feature to your product, consider this approach instead: sometimes the most innovative design is the one that works for everyone. Rather than creating separate "accessible" versions, what if we just built our core products to be usable by all? This is the paradox of inclusive design - what works better for some almost always works better for all. What "accessibility" feature have you encountered that actually made life better for all users? #UniversalDesign #ProductThinking #CustomerExperience

Many teams believe they’re being inclusive when they say, “We kept accessibility in mind from the start." But good intentions aren’t the same as meaningful inclusion. I’ve been doing accessibility and inclusive design work for 25 years. Over the last decade, I’ve focused more deeply on what true disability inclusion really means—especially when it comes to power in the design relationship. Again and again, I’ve seen the same pattern: there are levels to inclusion. And only one of them truly shifts power. Here’s how that journey tends to unfold... ranked from least to most inclusive: Level 1: “We kept accessibility in mind.” You didn’t include disabled people. You included the idea of them. This is empathy without participation, and honestly... it’s not enough. Level 2: “We tested with disabled people just before launch.” There’s progress here—real people were involved. But testing at the end only lets you ask: “Do you accept what we built?” It’s too late for meaningful change. This is just late-stage validation. Level 3: “We tested early AND at the end.” Now there’s room for impact. People with disabilities had a chance to shape the work before it was finished. Their feedback could actually change the outcome—and that matters. Level 4: “We included disabled people throughout the process.” Even better. You've moved from on from a "testing" mindset. You brought people in during idea generation, design, development, and launch. You did research. You listened. You adjusted. That’s inclusion in action. Level 5: “We co-created the solution.” ✅ This is the gold standard. You didn’t just include people—you gave them power. They helped shape the goals, question the methods, and guide the direction. It wasn’t just "your" product. It was "ours" -- co-created together. Your greatest power is to give that power away. Inclusive design means shared decisions—not just shared feedback. If you’re not sure where to start, ask yourself: 👉 Where in our process do disabled people have the power to shape what we build? And if the answer is “nowhere”—it’s time to change that. #InclusiveDesign #Accessibility #DesignLeadership #CoCreation #DisabilityInclusion #UXDesign #ProductDesign

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.

Why inclusion and universal design need to come together We often hear organisations talk about diversity and inclusion. Yet inclusion alone isn’t enough if the systems we work within were never designed with difference in mind. A review by Shore and colleagues (2018) (https://lnkd.in/e6vjNAXM) looked at what makes workplaces truly inclusive. They emphasised fairness, authenticity, and equal access to opportunities. Their model shows that inclusion is not just about who is in the workforce, but whether everyone feels respected, valued, and able to participate fully. But here’s the challenge: many workplace practices are retrofits. Adjustments are made once someone discloses a need or points out a barrier. That can work but it’s often costly, time-consuming, and can unintentionally stigmatise the individual. This is where Universal Design (UD) comes in. Instead of waiting to respond, UD builds accessibility, flexibility, and usability into everyday business-as-usual. It reduces the number of case-by-case “fixes” by planning for variation from the outset. For example: Providing captions and transcripts in training as standard helps Deaf staff, those learning English, and anyone re-watching on mute. Clear communication, step-by-step checklists, and structured task tools reduce overload not only for neurodivergent employees but for everyone. Designing sensory-friendly workspaces supports those with sensory sensitivities—and also improves focus and wellbeing for the whole team. So how do the two approaches differ and align? Inclusion models focus on culture: creating fairness, authenticity, and psychological safety. Universal Design focuses on structures: embedding accessibility and flexibility into systems, tools, and environments. Bringing them together means leaders shape workplaces that are both fair and functional, inclusive and accessible. For employers, this isn’t just the right thing to do it’s efficient. Many UD approaches are low or no cost, but they reduce duplication, improve resilience, and make personalised support less stigmatising. 👉 Take away.... Inclusive practices creates the right mindset; Universal Design creates the mechanisms. Together, they help us move from patching barriers to preventing them.

🚫 WCAG Levels Are Not a Grading Scale There’s a common misconception in digital accessibility: that WCAG levels A, AA, and AAA represent a “good, better, best” system. They don’t. ✅ WCAG levels are not about quality—they're about scope. • Level A addresses critical blockers for access. • Level AA covers common barriers that impact many users. • Level AAA includes enhanced requirements aimed at specific user needs—not a gold star for perfection. 🔍 Not every AAA criterion is feasible or appropriate for every website or document. That’s by design. AAA is not “better,” it’s more specific. If you got caught up in this misconception, I hope this brought some clarity. 💡 True accessibility is about meeting user needs, not chasing a letter grade. #DigitalAccessibility #WCAG #InclusiveDesign #AccessibilityEducation #A11y #UX #DocumentAccessibility #Chax