Blog Post

E-Learning Challenges

3 MIN READ

Give Your E-Learning Course an Accessibility Makeover #353

Staff

3 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:

All About Accessibility

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 3 years ago

Version 1.0

E-Learning Challenge

Instructional Design

Interactive Objects

Staff

Joined October 22, 2010

E-Learning Challenges

Join our weekly challenges to try new skills, get inspired, and build your portfolio.

Jonathan_Hill
Super Hero
3 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
  Staff
  3 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
    Super Hero
    3 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
  Community Member
  3 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
    Super Hero
    3 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
  Community Member
  3 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
Community Member
3 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!
- LindaLorenzetti
  Super Hero
  3 years ago
  I liked how you offered a keyboard shortcut for the instructions, nice work.
  - Ron_Katz
    Community Member
    3 years ago
    Thank you, Linda.
JodiSansone
Community Member
3 years ago
Five Minute Makeover
https://jodisdemos.s3.amazonaws.com/353+Keyboard+Access/353+Screencast.html

I need to build my skills in accessibility. I started with baby steps on one slide and did a demo via a screencast. It's only five minutes long--it took me several hours to re-imagine this slide.
- Yvonne
  Community Member
  3 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
    Community Member
    3 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
  Super Hero
  3 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
    Community Member
    3 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!
Yvonne
Community Member
3 years ago
This was a valuable learning experience, one in which I have merely scratched the surface for accessibility. Comments include my learning notes:

More accessible version: https://360.articulate.com/review/content/1ece07e4-34a3-4174-bb3c-a7af771237d9/review

Original: https://360.articulate.com/review/content/758286c2-338b-478a-9402-c265fd3b8900/review
- JodiSansone
  Community Member
  3 years ago
  I wish this were my demo. :) I tabbed through it and it was so streamlined and easy to follow.
  - Yvonne
    Community Member
    3 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
  Community Member
  3 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
    Super Hero
    3 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
Community Member
3 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
Community Member
3 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
Community Member
3 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
  Super Hero
  3 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
    Community Member
    3 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
  Community Member
  3 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
    Community Member
    3 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
Community Member
3 years ago
In this Makeover, only the focus order was adjusted to navigate through the timeline. It doesn't work properly with Firefox. Chrome and Edge seem to be ok. There is a problem with the highlighting frame when working with zoom pictures. I don't know how to resolve this. Alt-text isn't added yet.
Demo: https://360.articulate.com/review/content/aa8395f6-0a7a-4f2d-a1a5-e5ab7045140d/review
- LindaLorenzetti
  Super Hero
  3 years ago
  Good start Hilla, the timeline now follows a logical order.
  - HillaSchlegel
    Community Member
    3 years ago
    Thanks for the encouragement, Linda! I really appreciate it.
fabulalearning
Community Member
3 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
  Super Hero
  3 years ago
  Hi Kim, I really liked your accessible makeover of your drag and drop and I learned some Spanish!
  - fabulalearning
    Community Member
    3 years ago
    Thank you, Linda! I appreciate the feedback.
- Ron_Katz
  Community Member
  3 years ago
  Yes. This was simply and beautifully executed.
MiltoKnop
Community Member
3 years ago
This is my first Challenge submission; any feedback would be helpful.

With the help and encouragement of Kimberly Fields, I made this simple accessible Drag and Drop interaction for Real Estate Encumbrances: https://360.articulate.com/review/content/1e36b0f1-7340-40f6-a2d6-616e9eda08da/review
- DavidAnderson
  Staff
  3 years ago
  Welcome to the challenges, Milton! Thanks for sharing your accessible interaction. I updated the recap to feature your work: https://community.articulate.com/articles/elearning-accessibility-makeover-examples#MiltonKnopp
- ErinFlage
  Community Member
  3 years ago
  Hi Milton, thanks for sharing your example. Do you happen to have the Storyline source file or a link to a blog post explaining how you made the conversion?
  Thanks!