Blog Post

E-Learning Challenges
2 MIN READ

Share Your E-Learning Accessibility Makeovers #417

DavidAnderson's avatar
DavidAnderson
Staff
2 years ago

Accessibility Makeovers in E-Learning #417: Challenge | Recap

Challenge of the Week

This week, your challenge is to rework a short project to make it more accessible. 

Bonus

First, THANK YOU for writing overviews of your AI-inspired examples last week. Those were super helpful. I included your descriptions in the recap post to help viewers better understand the tools and techniques you used.

To help others understand your approach, please share some insights into your design choices. For example, what features did you use? What challenges did you encounter? 

Resources

Looking for more information on designing accessible e-learning? The following resources are chock full of practical tips for getting started with the accessible features in Storyline 360 and Rise 360.

Webinars

Articles

For even more on accessibility in e-learning, you can find all our best content in this series:

User Guides

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 get started on your makeovers, check out the creative ways course designers are using AI to help them build better e-learning:

Using AI in E-Learning RECAP #416: 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. 

Next Week’s Challenge & Webinar

  • Next week's challenge #418 (May 26): Motion Graphics and Animated Intros for E-Learning. 

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

Published 2 years ago
Version 1.0
accessibility
E-Learning Challenge
  • Jonathan_Hill's avatar
    Jonathan_Hill
    Super Hero
    2 years ago
    Hello!

    As popular as Drag and Drops are, they're not terribly accessible and I have a love/hate relationship with them. I became very aware of their limitations during the Covid Lockdown, watching my kids struggle with the clunky Drag and Drops that are a staple feature of most e-learning aimed at children.

    Having said that, they can be an extremely tactile and immersive way of interacting with content. As long as you include fallback controls!

    ESCAPE FROM DRAGEN DROP

    Demo: https://bit.ly/elhc417
    Explainer Video: https://twitter.com/DevByPowerPoint/status/1659647749569015808
      • IzabelaSamso110's avatar
        IzabelaSamso110
        Community Member
        2 years ago
        Splendid work! I don't know why but the 'Better' version is quite addictive.
    • DavidAnderson's avatar
      DavidAnderson
      Staff
      2 years ago
      Thanks for 1) not reimagining my avatar this week and 2) for the fantastic use of motion paths. Nicely done, my friend.
      • Jonathan_Hill's avatar
        Jonathan_Hill
        Super Hero
        2 years ago
        Thanks, David. If you zoom in, you're piloting the helicopter.
    • CourtneyMRobert's avatar
      CourtneyMRobert
      Community Member
      2 years ago
      Thanks for the explainer video on this one. I just used it to make a drag-and-drop activity accessible! I was almost there, but the "after clicking on" part of the trigger was confusing to me. As soon as I saw it in the video, I was good to go! Thanks so much!
  • JackieMatuza's avatar
    JackieMatuza
    Community Member
    2 years ago
    I've been trying to learn how to use MacOS VoiceOver in order to test out courses with a screen reader and that has been challenging but I've gotten the hang of it enough to start testing. I decided to update the element of a course that seemed the least accessible - a drag-and-drop interaction. I updated the interaction to be a "select one" option for each of the items that were previously dropped. I haven't loved using layers with the screen reader so I made each object/question it's own slide, but I don't know if that's entirely necessary. In my old version, the object being dropped was an image and descriptive text appeared when you hovered over it, which is also not accessible (or at least I couldn't figure out how to make it work well) so I changed the object being dropped to be a box with the descriptive text. I tried to keep the fun and visually interesting element of the object moving to the owner by adding a motion path when clicking the answer and changing the placed state of the object to be the original image.
    I also read that auto-playing music/sounds doesn't work well with a screen reader so I've set the default to be no sounds and added an initial screen to turn the sound on if the user chooses. This then adjusts a variable that is used in triggers on each slide with sound. I also fixed the focus order (removing a lot of objects that don't need to be read aloud) and gave alt text as needed.
    I also updated a slider interaction which required a trigger to only play animation sounds if the sound was turned on, fixing the focus order, and adding some alt text for buttons and the slider.

    Demo of updated course slides:
    https://360.articulate.com/review/content/6220eb5f-71a3-4bdc-bfd8-d62e75213237/review

    File:
    https://drive.google.com/file/d/1igOsFP6qZ2RUOJ4FahskL9mL_p_JVsLx/view?usp=share_link
  • Yvonne's avatar
    Yvonne
    Community Member
    2 years ago
    Demo with accessibility improvements: https://360.articulate.com/review/content/e2272460-d5b3-4057-803d-adc18ae8922b/review

    Original: https://360.articulate.com/review/content/a0b9cf52-05ff-4d2f-b103-b27abd4a8fd2/review

    For this quick demo, I revisited one of my first challenge story files. I focused on some of the "core skills" of digital accessibility: programmatically defining structure with sequential headings, adding concise alternative text, ensuring a logical reading order, testing for keyboard navigation, increasing contrast, using plain language, and providing user choice / adaptability of how content is presented.
    • Yvonne's avatar
      Yvonne
      Community Member
      2 years ago
      More information: During a remediation cycle, I test a course against WCAG guidelines, brainstorm solutions, apply changes, retest the course, then submit the file to a testing group for additional feedback. The testing team returns the file with any notes for additional changes, and I repeat the cycle. Remediation can be quite the process!

      The updated demo options presented have accessibility improvements applied, although one retains optional features (background music that can be adjusted for volume, motion paths, transitions, mouse hover visibility) and one is a static presentation. Neither present complete remediation solutions, but some key access issues were addressed.
  • ThierryEMMANUEL's avatar
    ThierryEMMANUEL
    Community Member
    2 years ago
    Bonjour Heroes.
    For a module that had to be accessible to learners with motor difficulties, and therefore entirely usable with keyboard navigation, a client asked me to propose interactive activities (quizzes) that could be used with the mouse as well as with the keyboard, so that there would be no difference. I worked on 2 drag-and-drop templates to show how it can be done, as they are a priori the most complicated activities to do without the mouse: a classic drag-and-drop and a reorganization activity (a little more difficult because there are several drop zones). The way I've found to do this is to use motion paths to "drag", and the "drag and drop" are actually hidden "True/False" and "Multiple Choice" activities.
    I finalized the demos and translated the explanations for this challenge.
    https://360.articulate.com/review/content/723c7439-2332-43e9-bc1d-4e47b36a91f2/review
    The .story file is in the comments of the Review.
    And a picture of my garden table that I made last week instead of studiously working on the previous challenge. :-)
    • JackieMatuza's avatar
      JackieMatuza
      Community Member
      2 years ago
      Thank you for the file, Thierry! And the table looks great :)
  • SarahScott-000a's avatar
    SarahScott-000a
    Community Member
    2 years ago
    Hi everybody. I got the idea from Jodi's entry in the last accessibility challenge to makeover a few slides from Content Library. I concentrated on alt text, color contrast, and focus order, but those just scratch the surface of what accessible eLearning looks like. I also included a checklist of things to consider when designing accessible Storyline courses. Excuse the quality of the audio recordings on this; I put it together quickly.

    https://360.articulate.com/review/content/06f89035-68a9-4684-9383-2d4f42b22504/review
    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member
      2 years ago
      A lot of great infos, Sarah, to get started or already be successful with accessibility.
      • SarahScott-000a's avatar
        SarahScott-000a
        Community Member
        2 years ago
        Thanks, Thierry! That was my intent - to share some fairly easy ways to get started. My team is just starting to implement accessibility standards in their work, so I was putting myself in their shoes and thinking about small things to do that will make a big impact!
    • IzabelaSamso110's avatar
      IzabelaSamso110
      Community Member
      2 years ago
      This is great, thank you! Now I feel the need to check all my work for the font vs colour visibility. Is there a chance you'd share your file with us, Sarah? Would love to keep it as a reference.
      • SarahScott-000a's avatar
        SarahScott-000a
        Community Member
        2 years ago
        Sure, Isabelle! Glad it was helpful :) I added the file on the link, in the feedback/comments.
  • BonneNagle-5ecb's avatar
    BonneNagle-5ecb
    Community Member
    2 years ago
    I have the same complaints about drag and drop. Not only is it not accessible, but it tests knowledge as a method of deduction - rather than something deeper.

    https://bonnenagle.org/cat-breeds/

    It's still matching, just not mouse-drag dependent. And as always, CATS!
  • AmaliaGillig's avatar
    AmaliaGillig
    Community Member
    2 years ago
    Hi everyone! I love this challenge theme and look forward to exploring the items submitted.

    My entry is a quick-click interaction focused on color contrast for those with visual impairments. I used motion paths and triggers related to the "object intersects" option to make the sliding reveal happen. https://360.articulate.com/review/content/14dd5aa5-a891-4e2c-9493-82151a204c2e/review

    And I used this free cool tool designed to show how your hex value choices impact those with various visual impairments - www.whocanuse.com
  • amarkulshreshth's avatar
    amarkulshreshth
    Community Member
    2 years ago
    Hello Evryone,

    Here is my entry for this week challenge. 10 years back I created first accessible course and that time tabs control worked properly only in internet explorer and only limited options were available for functionality slides. But now storyline is more advanced tool to work such a type of course.

    http://www.amarkulshreshtha.com/activity/Accessibility/story.html

    In this demo you can easily control all functionality from keyboard.
    All text is accessible from screen reader applications.
    Close captions are included with audio.
    Alt text for images

    All illustration are used from undraw