Blog Post

E-Learning Challenges
3 MIN READ

Give Your E-Learning Course an Accessibility Makeover #353

DavidAnderson's avatar
DavidAnderson
Staff
4 years ago

Accessibility Makeover in E-Learning  #353: Challenge | Recap

Challenge of the Week

This week, your challenge is to rework one or more slides to make them more accessible. To help others understand your approach, please share some insights into your design choices. What features did you use? What challenges did you encounter? Anything you share will benefit other designers.

If you don't have existing content, try reworking a series of Content Library slides or grab some templates from the downloads hub. The goal this week is to practice building more accessible courses.

Rebuilding E-Learning Courses to be More Accessible

This week’s challenge was inspired by Articulate SuperHero Linda Lorenzetti. While trying to learn more about designing accessible interactions, Linda took an existing project she’d made and rebuilt it to make it accessible. 

Reworking live projects is a fantastic approach to learning more about accessibility and the available features to course designers. You can learn more about Linda’s project and her design process in the following video overview and source file she shared.

View the project overview on YouTube | Download the sample project

Retrofitting Drag-and-Drop Activities

Currently, Storyline's standard drag-drop activities are not accessible. But with a bit of extra work, you can retrofit them to use keyboard navigation. In this example, Jonathan reworked an existing drag-and-drop interaction to offer a keyboard accessible version using click events. 

View the example | Learn more about the project

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 share a link to your published example and blog post.
  • Forums: Start  your own 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 back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you access this week’s challenge, check out the creative ways course designers use timed activities in e-learning:

Time-Based Interactions RECAP #352: 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.

Published 4 years ago
Version 1.0
accessibility
E-Learning Challenge
Instructional Design
Interactive Objects
  • Jonathan_Hill's avatar
    Jonathan_Hill
    Super Hero
    4 years ago
    Hello!

    Drag and Drop is great and all, but it presents accessibility issues. This was highlighted to me when the Articulate team shared my Star Wars demo, FIX THE HYPERDRIVE, on their Templates pages:

    https://community.articulate.com/download/storyline-star-wars-knowledge-check

    So I 'retrofitted' the course to allow users to 'click' as well as 'drag' each item:

    https://community.articulate.com/discussions/articulate-storyline/issues-retrofitting-accessibility-functions-to-a-former-drag-and-drop-exercise

    At the start of the quiz, you can now select whether you would like to DRAG or CLICK, and this selection is also accessible using the TAB key.

    In the CLICK version you can select your answer using the keyboard too.

    Try it out here:
    https://bit.ly/elhc353
    • DavidAnderson's avatar
      DavidAnderson
      Staff
      4 years ago
      I forgot about this one, Jonathan. I'll update the post later this morning to also include your example. I should have known you'd have an example and write-up about the project.
      • Jonathan_Hill's avatar
        Jonathan_Hill
        Super Hero
        4 years ago
        Thanks David.

        I learned a lot of important lessons modifying this demo and hope others benefit from reading my notes. I think it was the first time I'd really considered the focus order in a design.
    • LizzieAngell's avatar
      LizzieAngell
      Community Member
      4 years ago
      This is great and a great work around - still looks lovely in the click version - nice to see it working well with the tab order - which seems very hard to achieve with interactions at times
      • Jonathan_Hill's avatar
        Jonathan_Hill
        Super Hero
        4 years ago
        Thanks Lizzie - hotspots being accessible through the TAB key was central to this solution and helped me keep the flow/appearance of the quiz.
    • fabulalearning's avatar
      fabulalearning
      Community Member
      4 years ago
      I love this example! Until I saw this retrofit a while back, I regarded drag and drops and something to be avoided because they're not accessible. Thanks for inspiring me to strive to do better than just skip drag and drops altogether!
  • Ron_Katz's avatar
    Ron_Katz
    Community Member
    4 years ago
    Here is my entry. I reworked a connect - 4 Romeo and Juliet edition to make it more accessible.

    Demo: https://360.articulate.com/review/content/3b005cc8-8407-45cc-b0e2-17904688f704/review

    Some accessibility features added include
    - multiple options for selecting the column you wish to select (button, keypress, tabbing)
    -adjusted the volume of the background music so that all audio prompts could be better distinguished
    -audio prompts showing which button/key was clicked/pressed
    -an instruction page in black font on white page, 14 point, with options to hear instruction in robotic voice or human voice
    -audio prompts for win or tie
    -useful alternate text and removal of alternate text from merely decorative images or screen elements
    -test with NVDA screen reader
    -a link to the original version at the top of the player

    Enjoy!
    • Yvonne's avatar
      Yvonne
      Community Member
      4 years ago
      Seeing the change via video is incredibly helpful. I can relate with how long retrofitting took. The changes I made felt subtle, but did take hours to implement.

      I am curious about Tab interactions vs. up and down arrow interactions. I need to play more with NVDA and Storyline, because I could not get the Tab to work to help me read my own presentation, while it seemed to work well for yours. :)
      • JodiSansone's avatar
        JodiSansone
        Community Member
        4 years ago
        I need to work on this as well. I have not mastered how to ensure the tabbing works when a layer pops up with something clickable on it. There's a lot to learn!
    • LindaLorenzetti's avatar
      LindaLorenzetti
      Super Hero
      4 years ago
      I loved your screencast Jodi, it made your thought process easy to understand. Remember, whenever you learn something new you need to walk before you can run. Your final result was a great improvement.
      • JodiSansone's avatar
        JodiSansone
        Community Member
        4 years ago
        Thank you, and I only thought of the screencast after watching your demo makeover on youtube. I was thinking of something my business partner Kevin Kim-Eng says all the time too: "How do you eat an elephant? One bite at a time." :) I have another demo I'm working on and I've been tabbing all through it. It has some "phantom" tab items I can't figure out!
    • JodiSansone's avatar
      JodiSansone
      Community Member
      4 years ago
      I wish this were my demo. :) I tabbed through it and it was so streamlined and easy to follow.
      • Yvonne's avatar
        Yvonne
        Community Member
        4 years ago
        Thank you for your kindness, Jodi. :)

        I'm glad to know tabbing worked for you. I need to figure out why I am not able to tab with NVDA. I use the up and down arrow keys instead.
    • Yvonne's avatar
      Yvonne
      Community Member
      4 years ago
      Steps I took to make this quiz more accessible:

      1. Removed layers and "merged" information on the layer onto the base slide.

      2. Used Colourcontrast.cc to fine tune background and foreground colors. I used the eyedropper tool in storyline, copy and pasted the web color values into the Colour Contrast Checker, then adjusted the lightness slider of each "pivot" color until the contrast Passed AAA Normal standards for text and AAA Large standards for icons and large images. This was really helpful for still using the brand's color scheme, allowing me to slide up and down lightness attributes of each hue/saturation of a color to stay within a similar tone for a still-harmonious color scheme.

      3. I referred to WebAIm's WCAG 2.0 Checklist, their own interpretation of Guidelines

      4. I downloaded NVDA screen reader and tested my story file, repeatedly. I had trouble testing the file in the preview screen, so I had to publish and republish to test using the screen reader and up and down arrow keys on my laptop.

      5. The simplest way to change alt-text is to go to Home on the Storyline ribbon while in Slide View and click on Focus Order. While in Focus Order, you can delete decorative elements like "line" and "rectangle" that you would like the screen reader to not read. Also, in the right column, you can type in the Alternate Text you'd like the screen reader to read as you tap up and down on the arrow keys, or other key bindings selected in your screen reader.

      This is also the place to reorganize which elements should be read in what sequence, and to monitor how the slide communicates. I added in additional information to make the alternate text more descriptive for those learners who may use assistive devices for visual impairment.

      Retrofitting was a great way to learn about using the tools for accessibility that Elizabeth Pawlicki described in her informative webinars and that the enlightening video by Linda Lorenzetti and Amy had demonstrated. I look forward to building my toolbox for accessibility, and creating my own "Pre-Build Checklist" that designs with Accessibility as a forethought.
      • LindaLorenzetti's avatar
        LindaLorenzetti
        Super Hero
        4 years ago
        Nice example Yvonne. The best way to test a course is to publish it because the preview can be glitchy for screen readers.
  • AliciaSloan-5d2's avatar
    AliciaSloan-5d2
    Community Member
    4 years ago
    Humbling challenge. I am short on time this week, so I haven't done more than two slides, but there are a TON of changes and I'm grateful for the opportunity to do this makeover challenge. These two files are very different "under the hood".

    New: https://360.articulate.com/review/content/0d48ff28-3869-467e-bd2e-7a6686052b18/review

    Old: https://360.articulate.com/review/content/7f6400de-28a8-4768-8ce6-b76a2d6be97d/review

    - Removed buttons and enabled Modern player with CC, etc.
    - Closed captions are enabled to match voiceover.
    - Bison sounds are included in closed captions - style guide:
    https://mediaarts.humber.ca/assets/files/Captioning_Guide.pdf
    - Bison images are changed from background (non-ALT text) to "snapshots" with ALT text
    - Overall design is simplified to focus on content
    - Decorative icons are removed from accessibility (nice to have, not essential)
    - Orange font colours removed, simplified to green forest scheme (logo matching)
    - French language signs include French translation in both a bubble and ALT text
    - More detailed ALT text (Example: A large, adult bison is standing in the tall, dry grass. It has two horns and a thick brown fur coat)
    - Removed unnecessary animations
  • EricKowalik's avatar
    EricKowalik
    Community Member
    4 years ago
    Thanks for sharing your accessible drag and drop example Jonathan.

    I developed a similar example where one can use the mouse or the keyboard to move items to their appropriate location. You can try it out here - https://marquetterml.github.io/information-literacy-modules/anatomy_of_citations_chicago/index.html

    Edits were also made to the alt text for the different states of the item so a learner will know if it was correctly or incorrectly placed.

    A huge shout out to Sally Wiedenbeck for sharing the steps on how to make this possible in Stroyline - https://community.articulate.com/discussions/articulate-storyline/build-an-accessible-drag-and-drop-interaction-in-storyline
  • CathyEdwards-bc's avatar
    CathyEdwards-bc
    Community Member
    4 years ago
    This slide - https://360.articulate.com/review/content/bdfffa08-7330-4608-9e93-66a9ff3140d4/review is part of a course titled: Cultivating LGBTQIA+ Inclusive Practices and was retrofixed with accessibility. The strategy used was to provide instructions in AltText that made sense to learners using JAWS, while non-JAWS learners would still use a mouse to move the slider. If you have a screen reader, you can use it to navigate and by pressing the Tab key. I don't have a place to upload the slide for the "behind-the-scenes" view, which would be helpful to see how Focus Order works along with the AltText.

    Accessibility features include:
    1. Color contrast
    2. AltText for graphical images
    3. Focus Order based on slide feedback layers
    4. Learner-activated play, pause, stop

    Navigate the screen using your mouse to move the slider. Then, navigate the screen pressing Tab only.

    In our LMS, learners need to use the up/down arrow keys to navigate screens and use the Enter and Tab keys to assist with navigating to the Submit button on assessment screens.

    This course was my initial jump into creating a fully accessible course. Prior to this course, I had adjusted a couple of screens in a course that were trapping JAWS users. Things I learned in the retrofixing was that if I intend to use certain screen layouts throughout a course, then it's easier to set the accessibility features in a template screen. I've gotten used to coming up with a course design that use several different screen layouts consistently and adding the accessible features from the get-go. Now, accessibility is part of my approach to all course, videos, documents, etc. design. I'm no expert, because I still catch myself missing a feature here and there, but the more I practice, the better I get.
    • LindaLorenzetti's avatar
      LindaLorenzetti
      Super Hero
      4 years ago
      I liked your solution, Cathy. The only problem that I had, like Ron were the character states. Getting people with disabilities to review your courses is a great idea!
      • CathyEdwards-bc's avatar
        CathyEdwards-bc
        Community Member
        4 years ago
        Thank you, Linda. I was really happy when my organization provided myself and a few others on my team with JAWS in order to test our products, but still find it helpful to have true JAWS users review what we create. A really interesting twist regarding having access to JAWS has also been the ability to review vendor products during their beta work...having the ability to really get kinks out before releasing learning assets that could potentially exclude some learners is gold to me because it means no one is left out.

        Anyway...I need to find time to work on those states. Still want to get a screencast as well for the "under the hood" stuff that made the interaction and layers work.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      4 years ago
      Great job. I like the ability to tab through the content. Some of the messages didn't close as expected. You may also consider adding the ability to move through the slider based on keystrokes.

      It looks something like this . . .

      Change state of character1 to normal
      When user presses 1 after clicking on this slide

      Change state of character2 to normal
      When user presses 2 after clicking on this slide
      • CathyEdwards-bc's avatar
        CathyEdwards-bc
        Community Member
        4 years ago
        Thanks Ron. It's been a while since I've played around in this slide, but I seem to remember having issues with what the states did/didn't do. I'm feeling like also doing a short video that shows the inner workings.

        One of the cool things we've been able to do on my team is asking employees with disabilities to review the accessible courses we create in order to get better feedback regarding what works and what doesn't work. That's how I learned that providing instruction in AltText has been helpful. I
      • HillaSchlegel's avatar
        HillaSchlegel
        Community Member
        4 years ago
        Thanks for the encouragement, Linda! I really appreciate it.
  • fabulalearning's avatar
    fabulalearning
    Community Member
    4 years ago
    For this challenge, I gave a drag and drop a makeover by rethinking the design and creating a new experience that works for all learners. You can see the drag and drop and the keyboard accessible slides in the same file: https://360.articulate.com/review/content/78447f89-c041-420c-a078-9ae6f0b705cb/review

    I have been meaning to experiment with different methods for recreating drag and drops ever since the first time I saw Jonathon Hill's Star Wars retrofit (available upthread), and this challenge came at the right time!

    There are a couple of things I'd like to do to improve the interaction, such as taking choices away once they have been selected, but that's for another day!

    Source file: https://drive.google.com/file/d/14nc1oopE8EwNpCTuGmj3vi_NKB9jisW-/view
    • LindaLorenzetti's avatar
      LindaLorenzetti
      Super Hero
      4 years ago
      Hi Kim, I really liked your accessible makeover of your drag and drop and I learned some Spanish!
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      4 years ago
      Yes. This was simply and beautifully executed.