Tips for Improving Accessibility in eLearning Design

💎 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

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

Research-backed accessible text checklist (beyond color & fonts) 1️⃣ Avoid ALL CAPS for long text Reading all caps slows people down by up to 10–20% because we recognize word shapes, not just letters. Uppercase removes those shapes, forcing letter-by-letter reading: https://lnkd.in/e7tCHxUD 👉 Keep all caps for short labels or acronyms only. 2️⃣ Keep an optimal line length Long lines make it hard for the eye to jump to the next line, while very short lines break reading rhythm. Based on classic readability research by Emil Ruder and later UX studies: https://lnkd.in/eJsTZT3w 👉 Aim for ~45–75 characters per line for comfortable reading. 3️⃣ Use generous line height Dense text increases cognitive load and reduces comprehension, especially for users with dyslexia. Recommended in Web Content Accessibility Guidelines (1.4.12 Text Spacing): https://lnkd.in/eam2Uqs5 👉 Use at least 1.4–1.6 line height for body text. 4️⃣ Don’t squeeze letters together Tight letter spacing makes words harder to parse, especially for users with visual or cognitive impairments. Supported by research from British Dyslexia Association: https://lnkd.in/eKc_2HPr 👉 Slightly increasing spacing (e.g., ~0.02–0.05em) can improve readability. 5️⃣ Avoid justified text blocks Perfectly aligned edges may look clean, but they create irregular spacing (“rivers of white”) that disrupt reading flow. 👉 Prefer left-aligned text for most content. 6️⃣ Give paragraphs room to breathe Large text blocks discourage reading and increase cognitive effort. 👉 Use spacing between paragraphs and keep them short (3–5 lines max). 7️⃣ Design for zoom and scaling Users should be able to zoom up to 200% without losing content or readability. 👉 Fixed heights and cramped layouts often break here. 8️⃣ Support scanning, not just reading Most users don’t read - they scan. Structured text helps them find what they need faster. Eye-tracking studies by Jakob Nielsen show “F-shaped” reading patterns: https://lnkd.in/etWrYsM7 👉 Use headings, lists, and clear content chunks. 9️⃣ Be careful with width and layout Very wide text blocks reduce focus, while overly narrow ones feel fragmented. 👉 Balance layout to guide the eye naturally across content. Small changes in spacing and structure can significantly improve comprehension, speed, and user comfort. What’s one text rule you wish more designers followed? #Accessibility #WebAccessibility #UX #InclusiveDesign #Readability

Inclusive design is more than the font you choose. It is about how your content behaves when it meets a different nervous system. We are auditing your media and structure. In our rush for engagement, corporate communications often rely on visual shortcuts like flashing videos, color coded alerts, and walls of emojis. Marketing calls these tactics. I call them barriers. When accessibility clashes with creativity, we often default to what looks flashy rather than what is functional. But true creativity flourishes within the constraints of inclusive design. Compliance is just the floor. Our goal is to cultivate an ecosystem where everyone thrives. Here are 8 ways to operationalize inclusion in your content structure. 1/ The Emoji Balance → The Tension: A wall of emojis creates chaos for screen reader users. → Reality: Minimal emojis act as vital visual anchors that break up dense text for ADHD and dyslexic minds (like mine). → The Fix: Use sparingly. Place them at the end of sentences, never in the middle. 2/ The Caption Choice → The Tension: Audio posted bare completely excludes Deaf and Auditory Processing communities. → Reality: But forced, burned in open captions can distract or overwhelm some neurodivergent minds. → The Fix: Provide high quality closed captions (CC). AI generated captions are helpful, but a human must review for accuracy. This empowers user agency, allowing individuals to toggle them based on their needs. 3/ The Color & Shape Rule → The Tension: Using only color to signal danger locks out colorblind users. → The Fix: Always pair color with a distinct shape or text label to ensure the warning translates across all visual systems. 4/ The Alt Text Discipline → The Tension: Images with file names like "IMG_5920.jpg" are dead ends for screen readers. → The Fix: Write descriptive, concise alternative text that translates the visual data clearly. 5/ The Header Hierarchy → The Tension: Manually bolding text to look like a header creates a flat, confusing landscape for screen readers. → The Fix: Use actual heading styles (H1, H2) to create a structured, accessibility. 6/ The Motion Control → The Tension: Auto playing GIFs or flashing content trigger vestibular overload, siezures and visual migraines. → The Fix: Use static images or user controlled play buttons. Protect your team's nervous systems. 7/ The Permanent Label → The Tension: Form field labels that disappear once you start typing strain working memory and executive function. → The Fix: Keep labels permanently visible above the text box to reduce cognitive load. 8/ The Invisible Reality → The Tension: We often design solely for static, highly visible needs. → The Fix: Recognize that many disabilities are invisible or temporary. Low friction content is high impact content and supports everyone. Stop making your audience fight your design to get to your message. Check your latest post or project. Are you planting barriers, or cultivating connection?

Why the blueberry muffin accessibility analogy works so well for learning content. I still find the blueberry muffin analogy one of the best ways of explaining why it's so important to consider accessibility from the start of a learning project. Of course, you can add in accessibility afterwards, but imagine pushing those blueberries in by hand after the muffin is cooked. Not only does it feel like an afterthought for the learner, but it's also frustrating and time-consuming for the practitioner! In my recent conversation with Bill Banham on the Voices of the Learning Network Podcast, we explored what baking accessibility in from the start looks like - and how accessible design leads to better outcomes for all learners. We discussed simple ways to include accessibility in your everyday practice: - Writing clear, descriptive alt text that adds context. - Providing accurate captions and transcripts that benefit everyone. - Using consistent heading levels so learners and assistive technologies can navigate easily. - Applying good colour contrast. - Using plain language to reduce cognitive load. We also explored practical ways AI can help practitioners apply accessibility and why leadership matters for modelling inclusion, celebrating progress, and embedding accessibility into standards and strategy. When research shows that up to a quarter of your learners may have a disability or experience a temporary or situational access need, accessibility becomes more than a nice-to-have - it's a fundamental part of excellent learning design. So the next time you design a course, remember the blueberry muffin. Accessibility isn't an ingredient to add in at the end - it needs to be baked in from the start. You can listen to my full conversation with Bill at the link below: https://lnkd.in/eiBeiTEr #eLearning #Accessibility #AccessibleLearning #eln (Blueberry muffins on a wooden surface, with fresh blueberries scattered nearby. Baked blueberries are generously distributed through the batter of the muffins, creating deep purple pockets.)

If you build courses in #Storyline, here’s an accessibility pitfall that shows up more often than you’d think. I keep seeing modals where the Close button looks like it’s part of the dialog, but it’s actually sitting on the base layer underneath. Visually it feels fine, but for screen reader and keyboard users, it’s like seeing a button through glass. You can see it, you can point at it, but you can’t reach it from inside the dialog. Here’s what’s really happening: Storyline exposes the layer as a dialog and moves focus into it, but the Close button isn’t actually inside that dialog layer. The keyboard is trapped in the dialog until the user tabs out of it. That might be seemless for a keyboard-only user, but for a screen reader user in Browse Mode, we get completely stuck until we guess that the magic fix is to press the tab key to escape. That breaks the entire modal experience and creates WCAG failures around focus order, operability, and keyboard traps. The fix is simple: move the Close button into the dialog layer instead of placing it visually on top. Once it actually belongs to the modal, everything works the way learners expect. The button appears in the dialog’s tab order, screen readers announce it correctly, focus stays inside the dialog, and learners can exit confidently. If you’re building accessible Storyline content, remember: visual positioning isn’t structure. A button sitting on top of a modal isn’t the same as a button belonging to it. So remember to use your Layers panel to arrange things where they belong. Your users will thank you. Or maybe not. But at least they won't curse you, which is pretty cool too. #InclusiveDesign   #A11yTips #LearningDesign

Instructional Design Accessibility Tip! 📣 When you use multimedia or interactive elements, anchor them with a properly tagged heading underneath. This is something I learned from Jacob Wood that changed how I design. Example 1: YouTube Video If you embed a YouTube video, place the transcript directly below it and mark it with a real heading tag, such as an H2 or H3. Why ❓ When a screen reader user finishes the video, they should not have to tab through every single player control just to move on. If there is a heading immediately after the video, they can jump straight to it using heading navigation. If you do this consistently, it becomes a predictable pattern. Predictability reduces cognitive load. Example 2: Flip Cards or Tab Panels If you use flip cards, accordions, or tab panels, add a heading after the interaction. A sighted user can visually decide to skip those cards. A screen reader user should have the same choice. They should not be forced to: Flip every card. Open every tab. Listen to every detail. That creates noise. Headings give screen reader users the ability to skim, just like sighted users skim visually. Be intentional! ⭐ Use proper H-tagged headings. If sighted users can skip it, screen reader users should be able to skip it too.

Let’s take a look at the most common accessibility issues and how to fix them. 1️⃣ Low-contrast button labels The buttons with low-contrast labels are harder to read, especially for users with visual impairments. ✅ How to fix: Ensure that the minimum contrast ratio for normal text size (less than 24px) is at least 4.5 : 1. If the text is large (≥ 24px or ≥ 18.66px bold), the contrast ratio should be at least 3 : 1. 2️⃣ Low-contrast icons When an icon has low contrast against the background, it becomes more difficult for users to recognize it. ✅ How to fix: Ensure that icons have a contrast ratio of at least 3 : 1 against the background. 3️⃣ Small target areas When interactive elements have small target areas (less than 24px) and there is not enough space between them, the user can accidentally click or tap the wrong element. ✅ How to fix: A target area should be at least 24×24px, with certain exceptions, such as sufficient spacing or inline text links. 4️⃣ Using placeholder text instead of labels If input fields don’t have visible labels, it will be more difficult for users to recognize the purposes of the fields. It is a bad practice to rely on placeholder text alone, as it’s often low contrast and disappears when users type. ✅ How to fix: Input fields should have labels or instructions so that users know what data is expected. 5️⃣ Missing error message When an input error occurs, it’s not enough to simply highlight the input field in red without showing an error message, because users won’t be able to understand what’s wrong. ✅ How to fix: When an input error is detected, an error message should appear and clearly describe what’s wrong. Check out the Accessibility Checklist here: https://lnkd.in/d_HACYBy #Accessibility #WCAG #AccessibilityChecklist  #WebAccessibility #InclusiveDesign #ProductDesign #UXDesign

You know what’s better than fixing accessibility bugs? Not introducing them in the first place. When accessibility is part of your workflow, you don’t have to scramble later. You prevent the problems before they hit production. That means: ✔️ Including people with disabilities in user research. ✔️ Training teams to run more than just automated tools. ✔️ Documenting the tools and test steps so no one’s guessing. ✔️ Reviewing designs for accessibility before development. ✔️ Adding accessibility to your Definition of Done. It’s not always perfect. But making accessibility part of “how we work” beats “something we’ll fix later” every time. #ShiftLeft #Accessibility #InclusiveDesign #UXR