Blog Post

E-Learning Challenges
2 MIN READ

Designing Accessible E-Learning Course Starter Templates #476

DavidAnderson's avatar
DavidAnderson
Staff
2 months ago

Accessible E-Learning Templates #476: Challenge | Recap

A common challenge with designing accessible courses is that course designers retrofit existing courses to meet accessible standards. Going back and tweaking every little detail can take a lot of time. Or maybe you're building from scratch with accessibility in mind but focusing on making each slide accessible as you create it, which can add unnecessary time to your production timeline.

A better solution is to start with templates that already have accessibility features built in. You'll save a ton of time and ensure your course meets most accessibility guidelines right from the start. And that's what this week's challenge is all about!

🏆 Challenge of the Week

This week, your challenge is to share an accessible course starter template. 

Course starters usually include about six slides with a mix of content and interactions. But if time’s tight, sharing just two slides is perfectly fine. Even one slide will do if that’s all you can manage. The goal is to focus on building accessible templates, no matter how big or small.

Whether you're sharing one slide or a complete course starter, please include some info about your approach to the template. What steps did you take to make your slide accessible? Did you face any challenges along the way? Any context you can share will help others build more accessible templates.

🧰 Resources

On-demand training

Articles

✨ Share Your E-Learning Work

Comments: Use the comments section below to link your published example and blog post.

Forums: Start a new thread and share a link to your published example.

Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.

Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you access this week’s template-building challenge, check out the if-then scenario examples your fellow challengers shared over the past week: 

 

Using If-Then Scenarios in E-Learning #475: Challenge | Recap

đź‘‹ New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

📆 Upcoming Challenges

  • Challenge #477 (10.04): Show how you're using AI Assistant to help you build e-learning.
Updated 2 months ago
Version 4.0
accessibility
Elearning Challenge
Template
  • JodiSansone's avatar
    JodiSansone
    Community Member
    2 months ago

    Break Up With  Your Mouse

    Demo: https://jodisdemos.s3.amazonaws.com/476+Mouse+Break+Up/story.html

    Download: https://jodisdemos.s3.amazonaws.com/476+Break+Up+With+your+Mouse.story

    Here's a template that gives you several ways to maneuver through some interactions, all using a keyboard instead of a mouse. And it's the first time I tried creating a project using my left hand on the mouse instead of my right hand. It took forever, but I got faster. I also checked my, focus order, alt text, color contrast and used a pretty large, modern font for readability.

    I also had some fun with the new AI features. It created: 

    • a squeaky click
    • "Mouse Lorem Ipsum"
    • quiz answer options for me based on the slides I had already created

     

    If you think I missed an opportunity, let me know. Have a great week!

     

    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member
      2 months ago

      The title made me laugh out loud, Jodi. I can't remember which romantic comedy has a long scene explaining how silly that phrase is... because it's always “you” really. 
      It's a lovely, super-practical demo for learning some techniques and getting inspired by the way you do things.
      Mouse Ipsum joins my collection of absurd Ipsum.

  • Jonathan_Hill's avatar
    Jonathan_Hill
    Super Hero
    2 months ago

    Hello!

    Busy schedule this week, so I don't have time to build a full slide deck - sorry!

    But here's a trick I've been using for a while to make sliders more accessible and responsive across a range of devices.

    DRAG OR CLICK
    Demo: https://bit.ly/elhc476 
    Download: https://bit.ly/elhc476dl 

    Further reading:

    https://www.engagebraintrain.com/x-and-y-you-should-consider-sliders-instead-of-scroll-boxes/ 

    https://www.linkedin.com/pulse/slide-away-jonathan-hill-assoc-cipd 

    • ded2's avatar
      ded2
      Community Member
      2 months ago

      Simple, yet awesome! I seem to have a lot of issues with sliders -- really nice solution. Thanks for sharing!

    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      2 months ago

      Great idea to put hotspots below for mobile experience! Thanks!

  • EkaterinaMar356's avatar
    EkaterinaMar356
    Community Member
    2 months ago

    Hello everyone! Sharing my contribution :)
    https://360.articulate.com/review/content/032f400a-13be-4107-a00f-5f9b01318387/review 
    Here's what I worked on to make the course more accessible:

    1. Chose light shades for the background and dark font for contrast
    2. Used large font for headings. Chose a decorative but easy-to-read font for the headings
    3. Selected a simple, readable, sans-serif font for the main text and made it fairly large
    4. Made graphical images (dogs, objects, etc.) larger
    5. Avoided excessive detail in graphics to prevent visual "noise."
    6. Made buttons larger, and they also increase in size when hovered over.
    7. Added different ways to perceive information: visually and audibly.
    8. Added the ability to navigate the course using the keyboard.

  • JesseWu's avatar
    JesseWu
    Community Member
    2 months ago

    Unlike before, this week's content is really in the slide master, so I will upload the file instead of hosting it online.

    A theme with a set of font and color scheme. Expanded slide master content to align with a regular MS365 PowerPoint slide master. Brief introduction attached. Didn't touch the feedback master, but I confirmed the color scheme is applied.

    Speaking of tools, come with vanilla Google Chrome, Lighthouse is always a convenient starter tool as an accessibility checklist, at least for web devs.

  • ThierryEMMANUEL's avatar
    ThierryEMMANUEL
    Community Member
    2 months ago

    Bonjour Heroes.

    I've already done several demos turning a “normal” interactive activity into an “accessible” one, and I couldn't come up with a good enough idea to do it again this week.

    So I focused on the possibility of making a training course more accessible to people with comprehension difficulties, for lots of different reasons. We talk about it a lot less. All the contextual and technical explanations in the demo. I've tried to make the template as simple as possible so that it can be easily customized and reused. See you next week to see if I can improve the look and feel with Storyline's AI tools (if I can).    https://360.articulate.com/review/content/34e8354f-f5b5-4cdc-b3f5-873d1240b3fc/review

    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member
      2 months ago

      Nice! Look forward to seeing the script you used. Thank you for sharing the file Samuel!

      • Samuel's avatar
        Samuel
        Community Member
        2 months ago

        Thanks, Cyd! The script was generated using ChatGPT. Here's the prompt I used:

        "In Articulate Storyline, write a javascript to control 1 step direction of 360-degree image with the four directional keyboard controls." 

        It's interesting to see how its knowledge of Storyline has progressed.

  • PaulAlders's avatar
    PaulAlders
    Super Hero
    2 months ago

    Hi everyone,

    Using the 'new' emphasis Storyline animations (shake, shrink), I successfully recreated the drag and drop interaction from Articulate Rise. During a nice chat with one of our fellow members I was asked to make this drag and drop interaction accessible.

    Follow the link below for a life preview;

    https://elearningbrewery.com/eChallenge/240531%20dragAndDrop_5R/story.html

    Or the link below to download the source file;

    https://downloads.elearningbrewery.org/s/8eEA34Ve8ifr12GQ/nl

    Have a great day! ;)

    • JodiSansone's avatar
      JodiSansone
      Community Member
      2 months ago

      Thank you for posting this and sharing the file. If you have time, can you explain something you included? I'm scratching my head trying to understand the role of your check ovals. I see that you change the states, but I don't understand how those ovals contribute to the interaction. Thank you!

      • PaulAlders's avatar
        PaulAlders
        Super Hero
        2 months ago

        Hi Jodi,

        I tried to rebuild the drag and drop interaction from Articulate Rise in Articulate Storyline. The check ovals are there to visualize a correct drop of a draggable item. At the other hand, when a draggable item is dropped incorrect the item has a shake effect and returns to his original place. 

        I hope that this answers your question.

        Have a great day! ;)

  • DavidAnderson's avatar
    DavidAnderson
    Staff
    2 months ago

    🚨 With our new community, some usernames have changed. You might have a new handle or a variation of your old one. I’m updating everything in my Google Docs template, so if you’d like me to use a specific version of your name in the recap, just let me know, and I’ll make the change.

    • JodiSansone's avatar
      JodiSansone
      Community Member
      2 months ago

      Hi David, one other thing I've noticed, but didn't know who to report it to, is that when I get notified that someone has posted a comment or project in the challenge, I get the notification in duplicate or triplicate. My inbox is full of responses 2x and 3x. Also, I have asked Ginger in her post on the new community but have not gotten an answer. What happened to our portfolio page? Will that come back? Thank you! I really like the new AI features.

      • DavidAnderson's avatar
        DavidAnderson
        Staff
        2 months ago

        I’ll check on the multiple responses, JodiSansone. I hadn't noticed that, but I'm also subscribed to everything and those all filter into another folder. But I'll get you an answer on what's going on. After the initial launch, once things settle down, we’ll work on adding more customizations, so hopefully that includes our user profile pages. There’s a lot more we can do with those. 

    • NormaKaplan's avatar
      NormaKaplan
      Community Member
      2 months ago

      JN, hover isn't used anymore because it doesn't work on mobile phones and tablets. I don't know the alternative, but maybe someone else can give a suggestion. 

    • JodiSansone's avatar
      JodiSansone
      Community Member
      2 months ago

      Hi JN,

      I just looked at your quiz question file. If I understand your question, you are trying to format the states of your quiz options. Your quiz answers have 5 pre-built state options: Normal, hover, down, disabled and selected. I usually get rid of down and disabled, and keep the other three.  Highlight the answer and then view the STATES Tab for each item. You can change the appearance there if you like. I did a quiz question in my template if you want to download it and compare it to your file. Also, make sure you check which of your answers is the correct one on the question form view screen--when I opened up your file you hadn't designated which answer was correct.