Give Your E-Learning Course an Accessibility Makeover #353

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 YouTubeDownload 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. 

Retrofitting Drag-and-Drop Activities

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:

16 Ways to Use Time-Based Interactions in E-Learning #352

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.

44 Comments
Jonathan Hill
Ron Katz

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 ... Expand

Yvonne Urra-Bazain
Yvonne Urra-Bazain

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 do... Expand

Alicia de Billy

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 ... Expand

Eric Kowalik
Cathy Edwards

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 ... Expand

Ron Katz
Cathy Edwards
Cathy Edwards
Cathy Edwards
Cathy Edwards
Yvonne Urra-Bazain
Jodi M. Sansone
Hilla Schlegel
Kimberly Fields, CPACC
Deirdre O'Reilly