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

⚡️ UI design tip - Ensure interface elements have a 3:1 contrast ratio Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are many online tools to help you measure contrast ratios between different colours. In order to help ensure that people with low vision can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. There are 2 important contrast ratios you need to remember: 1️⃣ 3:1 - Minimum for large text (above 18px with bold weight or above 24px with regular weight) and user interface elements (like form fields). Decorative elements and styles that don’t convey meaning don’t need to meet this contrast ratio. 2️⃣ 4.5:1 - Minimum for small text (18px or less). Star ratings, like the following example, often lack sufficient contrast. Simply adding a darker border gives them sufficient 3:1 contrast, which means that more people will be able to see the rating 🙌 #ux #uxdesign #accessibility #a11y

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!

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

I’ll be honest: I knew it mattered, but I wasn’t doing it. I had many excuses—“I don’t have time,” “I’ll add it later,” or “It’s not that important right now.” But the truth? I just wasn’t paying enough attention. What am I talking about? Alt text. Alt text is a short description read by screen readers that translates images into words. It’s how people who are blind or have low vision can experience visuals, like your graphics and images here on LinkedIn. What finally made me more consistent? 🤖 ChatGPT Now I use a prompt: “Please generate alt text for this image” almost every day. In about 5 seconds, you get a clear description of any graphic you upload. It’s one of the simplest ways to increase inclusion instantly. Because inclusion is when we feel expected, respected and reflected*. Alt text does all three: 👉🏼It shows that you expect people of all abilities to engage with your content 👉🏼It respects everyone’s right to fully access what you share 👉🏼It reflects everyone’s place in the audience by ensuring no one is excluded I'm not perfect at it, but I make an effort to hold myself accountable. What about you? Did you know what alt text is? Do you use alt text in your posts? What’s been your experiences, challenges or good practices? And for those of you who haven't been using it yet, here is how to add alt text to your LinkedIn posts: 🖼️ JPG/Images: Upload the image. Click "Add alt text" below the image. Add a brief description of the image and click "Save" 📄 PDFs/Documents: LinkedIn doesn't support alt text for PDFs directly. Add a short descriptive text in your post explaining the document's content. Just like this one below 👇🏼👇🏼👇🏼 ______ Alt text: Dora - a woman with glasses, wearing a striped shirt and a scarf, sits at a desk working on a rose-gold laptop. Behind her, shelves with books and decor show a modern office setting. A search bar overlay at the top reads, "Can I become more inclusive in just 5 seconds?" Below, a text box explains: "Yes! In just 5 seconds, ChatGPT can create alt text for your posts. Alt text provides a short description of your visuals, allowing people who are blind or have low vision and use screen readers to engage with your graphics and images on LinkedIn." The Punt Kick logo is in the bottom corner, with the tagline "Shaping DEI Competency." *Source: Netflix Correction: it actually took 3 seconds generate the alt text for this post 😉

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.

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.

A small copy tweak changed how hundreds of people filled out their profiles on our platform. 🤯 And it completely shifted how personal - and accessible - they felt. This was one of my most surprising lessons building ND Connect this week. Here’s the change: Old copy: "Note: You can use bullet points by starting sentences with a - . We recommend members use bullets to improve accessibility - especially for lists like interests." New copy: "Note: If you’d like, you can use bullet points by starting sentences with a - . You’re welcome to fill out prompts in the way that lets you express yourself best!" We initially thought that having members all use bullets would create more accessible profiles by making them more skimmable. But this also had the unintended consequence of making profiles feel ... the same. That's the opposite of what we want on a platform for neurodivergent people where we embrace and celebrate our differences (including communication ones). 😅 It also had accessibility trade offs - while skimming in some ways may have been more readable/less overwhelming to some, the similarity and lack of novelty across profiles was less accessible to other readers. And there are trade offs from a reader vs writer perspective too - some folks have an easier time writing longer form content and distilling things into shorter sentences can be challenging. Profiles now feel more human because they're more in people's own authentic voices, and in some ways that's helpful information when deciding to connect with someone too. I'm excited to keep reflecting on competing access needs and implementing things that work for all sorts of different neurodivergent folks but if there's one takeaway I have it's that small details really shape a lot. ♾️ When you’re designing for neurodivergent folks with vastly different access needs, there’s rarely a perfect answer. But language and features that give people agency to choose what works for them is a great place to start. Have you ever made a small design or wording change that ended up making a huge impact? Would love to hear your favorite small-change-big-impact stories 👇 #Neurodiversity #InclusiveDesign #UXWriting #Accessibility #Startups

Sometimes I write articles because they are on a timely topic, or because I think people will find a particular topic useful. Sometimes I write them because something seriously annoys me. This article is the latter. Design choices can create invisible roadblocks that aren’t caught by automated tools or simple WCAG checklists. One of the most overlooked culprits is how scrolling is handled. When designers stack multiple scroll regions, the interaction complexity skyrockets. Keyboard and assistive technology users often end up trapped in a confusing tug-of-war between competing containers, while magnification users lose track of essential information entirely. This isn’t a matter of polish or preference—it’s a fundamental usability breakdown that leaves people with disabilities locked out. I just published a piece that explains why this happens and what to do instead. On behalf of my therapist, thank you for being an outlet for my anger :-) Read the full article here: https://lnkd.in/d4fRXbRg #AccessibilityMatters #InclusiveDesign #WebAccessibility #Accessibility #DigitalInclusion