Before-After: Accessibility Makeovers in E-Learning #466

E-Learning Accessibility Makeovers #466: Challenge | Recap

Pop quiz: What do you think is the most asked question by course designers in our weekly trainings? Okay, other than "Is this session being recorded?"

If you guessed anything about accessibility, you're correct. Anytime we show a feature, demo, or example, one of the first questions is usually about how it meets accessibility guidelines.

Ideally, accessibility should be considered right from the start of the course design process. However, many courses, examples, and demos were initially built with more focus on design and interaction than accessibility.

That's okay because you can always return and ensure those older projects meet accessibility guidelines. And that's what this week's challenge is all about.

🏆 Challenge of the Week

This week, your challenge is to share a before-after example that reworks a short project to make it more accessible.

If you’re just getting started with accessibility, start with something simple like making text accessible with alt text or ensuring a color contrast ratio of 4.5:1.

You can work on a single slide or multiple slides. If you don't have your own projects, you can use slides from the Content Library or our downloads hub. The goal is to practice making courses more accessible.

Inspiration

Check out last year's accessibility makeover challenge for examples:

Accessibility Makeovers #417: Challenge | Recap

🧰 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

🙌 Last Week’s Challenge:

Before you get started on your accessibility makeovers, check out the creative ways your fellow course designers reworked classroom activities for e-learning:

Converting Classroom Activities to E-Learning #465: 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 #467 (06.28): Using 360° images. See challenge #337 for examples.
Challenge #468 (07.05): Drag-and-drop interactions. This will be a general drag-drop challenge, so you can share anything you like.

42 Comments

David Anderson
Author

8 days ago06/22/24 at 4:24 pm (UTC)

Hope you have a great week, E-Learning Heroes!

Jonathan Hill
Hero

8 days ago06/22/24 at 4:48 pm (UTC)

Hello! Here's a sorta sequel to Escape From Dragen Drop, exploring THE SECRETS OF KUHLUR KONTRAS... https://bit.ly/elhc466

8 days ago06/22/24 at 4:59 pm (UTC)

You know you've been around the challenges for a while when you're building "sequels" lol!

8 days ago06/22/24 at 6:50 pm (UTC)

Thank you for the key strokes. I have so much appreciation for that option now. I really liked how you showed the transition to the more accessible contrast. Exceeding is ok, right? The music made me feel doomed. :)

Jodi M. Sansone

8 days ago06/22/24 at 6:37 pm (UTC)

Meet the Canaries Makeover New Demo: https://jodisdemos.s3.amazonaws.com/466+Canaries/story.html Old Demo: https://tinyurl.com/yc3gwoq7 Download: https://jodisdemos.s3.amazonaws.com/466+Meet+the+Canaries.story

8 days ago06/22/24 at 6:42 pm (UTC)

I randomly chose a demo I did for Challenge #308--Pantone Color of the Year--Illuminating Yellow and Gray. When I looked back at it I felt sick about it. It's a hot mess! So here are some of the things I did to make it more accessible: improved the color contrast, increased the fonts, added alt text to the essential visuals, created custom focus orders, eliminated confusing background audio, added captions to the canary songs, and used key strokes as an alternative to the button navigation. I added a download so you can see some of the features that are behind the scenes. Along the way I learned a lot about canary songs and how they differ. Enjoy the canary songs! I like the Spanish Timbrado the best.

6 days ago06/24/24 at 3:43 pm (UTC)

I don't know which one is my favorite, Jodi. I don't dare choose one of the 2 "French" ones, that would sound too nationalistic and we don't need that these days at home. Unfortunately, I've never seen or heard either of the 2. And I didn't know that canaries could live in my neighborhood.

4 days ago06/26/24 at 4:11 pm (UTC)

It's really beautifully done! Incredibly tidy and easily accessible.

3 days ago06/27/24 at 6:27 pm (UTC)

Oh! I really liked this Jodi. The Parisian Trumpeter is my favorite. :) The list of the changes you made was really helpful to look through. Removing the background music was the biggest change to me. I'm a musician so on the original version I had a hard time focusing in on the bird sounds instead of listening to Swan Lake. However, I did really love the playful feel that the music gave the original project! Maybe you could still have it playing on just the main slide with all the birds since now you have each bird popping up as an individual slide?

Thierry EMMANUEL

8 days ago06/22/24 at 10:51 pm (UTC)

Bonjour Heroes. For this challenge, I've come up with a keyboard navigation wizard (no doubt rather pompous title) with the aim of being able to apply it to older, less accessible modules. All the explanations, a little more technical than usual, are on the first slide. And consider that it's a feature that can be improved. I've reused previous ELC demos, a recent professional work... and a hero's demo with his kind permission. https://360.articulate.com/review/content/735d0431-f201-4f94-b30e-572a23c17627/review

4 days ago06/26/24 at 1:41 pm (UTC)

This is fantastic! How in the world did you do that?

Jesse Wu

8 days ago06/23/24 at 2:40 am (UTC)

Hello all, It's not a rework, but here we go — a one-slide artwork narration. Keyword: Text-to-speech, closed caption, alt text, keyboard navigation https://360.articulate.com/review/content/ef01302f-5221-4751-bc95-add059589d00/review (Also got my entry for the drag-and-drop ready, with keyboard navi too. Click on my profile to try it out beforehand if you feel like doing it :) )

Samuel Apata

7 days ago06/23/24 at 3:18 am (UTC)

This week, I've made the DreamBox Math interaction more accessible by editing the focus order and adding audio with closed captions: https://360.articulate.com/review/content/44ba72dd-22ba-4937-9ffd-dcd0d24268e3/review I tested using voiceover on a Mac (https://support.apple.com/guide/voiceover/get-started-vo4be8816d70/mac) and the result wasn't too great. I'll try and make the project more keyboard accessible.

Jared Speight

7 days ago06/23/24 at 1:31 pm (UTC)

This week, I created an accessible "Dragon Drop" activity where users can either click and drag or follow the accessibility tip to use keyboard navigation to complete the activity. Demo: https://jaredspeight.s3.us-east-2.amazonaws.com/Dragon+Drop/story.html Video Walkthrough: https://youtu.be/WaJvkGlDqhA

4 days ago06/26/24 at 5:45 pm (UTC)

Hi Jared, these baby dragons are so adorable! I love the keyboard-accessible drag and drop activity. Side note, the accessibility instructions are placed at the end of the focus order, so I didn't find them until after tabbing through the other buttons. I think it would work better if it was right after the Accessibility Instructions button in the focus order.

4 days ago06/26/24 at 10:03 pm (UTC)

Good catch, I'm going to update it tonight to fix this and address what Thierry mentioned.

Thierry EMMANUEL

6 days ago06/24/24 at 3:57 pm (UTC)

I like dragons, Jared! But I'm facing a problem. Trying to redo the demo a second time (that's how much I like dragons!), I can't select anything IN the slide. Neither the dragons, nor their favorite nests. Every time I try to do it again now. ???? (this works fine with drag & drop with the mouse)

6 days ago06/24/24 at 4:29 pm (UTC)

Does the slide you're trying to use keyboard navigation on have an accessibility button? The Before and After look nearly identical. The first slide will have a before label in the top right and only work with drag and drop. The second one will have an accessibility button.

6 days ago06/24/24 at 5:49 pm (UTC)

My apologies, Jared. I didn't expect to have to use the player's navigation buttons to get back to "Before", and I felt like I had to start by using keyboard navigation the first time. Hm... Your demo works perfectly as expected.

6 days ago06/24/24 at 9:29 pm (UTC)

No worries, I originally published just the accessible version and then went back and added the inaccessible format to show the before and after. I thought about adding an introductory slide that gave the users the option to start with the "Before" or just skip to the accessible version that would've made the navigation clearer and will probably go back and get that added in sometime this week.

Jayashree Ravi

6 days ago06/24/24 at 4:33 pm (UTC)

For this week's challenge, I enhanced the accessibility of a single slide: 1. Before: - Poor color contrast, no alt text for images, no audio transcript, and non-accessible navigation buttons. 2. After: - Improved color contrast (white text on dark blue background), added alt text to images, provided audio transcript, and accessible navigation buttons with clear focus indicators. - Used Tahoma font for better readability. I verified my color choices using the Contrast Checker too - (https://contrastchecker.com/). Demo - https://360.articulate.com/review/content/0818f722-b249-4fb3-ab8c-e00feb59cc15/review

Angela Thomas

6 days ago06/25/24 at 1:27 am (UTC)

Hi everyone! This is my first time posting, but I've been following discussions and weekly challenges for a few weeks now. I love how supportive everyone is and I am in awe of all the talent! I appreciate any suggestions. https://360.articulate.com/review/content/8ee11581-9857-48f1-b5aa-2f9e6b5d6472/review Since I'm still learning, I decided to create an interaction to show ways to improve an original slide (label the parts of the brain) using each POUR principle. Here is what I changed: P - Changed background from white to black and checked contrast using colourcontrast.cc O - Changed drag-and-drop into a drop-down version U - Changed the image alt-text from colors to locations for each section of the brain R - Changed the question instructions from “Label the parts of... Expand

5 days ago06/25/24 at 4:25 pm (UTC)

That's a very impressive piece of work you've done, Angela. Fully functional and very informative. On the subject of NVDA, I've had several fights with it and I've come out knocked out every time. I did the best I could, but when I checked, after 3-4 black screens, I was completely lost. Because I'm lucky enough not to have to use it every day. What's more, it seems to me that every user makes different settings on their own NVDA player. And the mine is probably not very useful for a blind person. Only a blind person can really check a module with NVDA, I think. But if anyone has had a better experience than I have, I'd like to hear about it.

3 days ago06/27/24 at 7:17 pm (UTC)

Thank you for trying it out and for the info on NVDA Thierry! I'm definitely going to need to need more practice.

4 days ago06/26/24 at 3:18 am (UTC)

Hey Angela, I loved your artifact and how you demonstrated how you made the content perceivable, operable, understandable, and robust. The only suggestion I'd have would be for the alt text, labeling "top left" and "top right" may not be sufficient unless the user knew which way the brain was facing. Great work!

3 days ago06/27/24 at 7:11 pm (UTC)

Oh! I didn't even think of that Jared. Thanks for the suggestion. I'll go in and add that.

4 days ago06/26/24 at 1:23 pm (UTC)

wow, that's really impressive and a helpful principle for future modules! Thanks for sharing :)

4 days ago06/26/24 at 6:11 pm (UTC)

Hi Angela, this module is amazing! I haven't heard of the POUR principles before, so I learned a lot from your module. I look forward to seeing your entries in future challenges!

3 days ago06/27/24 at 7:14 pm (UTC)

Thanks Chloe and Fabienne. The examples in this training video had great examples for POUR: https://training.articulate.com/webinars/5-things-you-need-to-know-about-accessibility

Ron Katz

5 days ago06/25/24 at 12:27 pm (UTC)

Here is my before and after Before: https://360.articulate.com/review/content/fe3d3a30-3558-4b35-a00f-bb8a8220b559/review After: https://360.articulate.com/review/content/2bd0bb7c-08c0-4947-bf2a-187fc1f35ebc/review Accessibility features: - Opening instructions with ability to turn on and off narration. - Ability to play with or without visual clues - Ability to play with or without a timer - Ability to play using tab keys and enter button only - Simplified sidebar instructions - Additional levels of play

5 days ago06/25/24 at 4:36 pm (UTC)

I have so little musical ear and so little memory, Ron, it's a scandal. My cat who sleeps next to me reacts more to sounds than I do. All the features are very well done, but your game almost drove me nuts, especially in the "black out" mode.

Ron Katz
Thierry EMMANUEL

4 days ago06/26/24 at 8:03 pm (UTC)

Thanks for the feedback, Thierry. Glad you had an appropriate level of fun without losing your mind.

3 days ago06/27/24 at 6:44 pm (UTC)

Oh man! That reset to zero keeps killing my score. haha. The instructions in the new version helped and I like that you added some options to turn off the visual clues or timer.

Ashi (Neha) Tandon

4 days ago06/26/24 at 1:01 pm (UTC)

Hello...I attempted to make the custom drop-down (#457) accessible. This is a work in progress. Thus, there is just one choice as of now. Will complete it once I have enough bandwidth. Before: https://www.ashitandon.com//Storyline%20Files//ELH457/story.html After: https://www.ashitandon.com//Storyline%20Files//ELH466/story.html

Chloe Okura

4 days ago06/26/24 at 5:35 pm (UTC)

Hi all! I made adjustments to a template by David Anderson. Before: https://community.articulate.com/download/storyline-pop-out-tabs-interaction-template After: https://360.articulate.com/review/content/97490ce9-4ce9-4ba8-a476-581d97f409e9/review I improved the color contrast of the buttons, added alt text to images, and changed the focus order. Like a few others, I also tried to check my lesson with NVDA - it sometimes reads out "Rectangle 7/8," but there's no object with that name in the focus order. Not sure what's causing that!

3 days ago06/27/24 at 7:07 pm (UTC)

Nice updates! I was able to navigate through your version really well. I also got the "rectangle 7 and 8." I think those might be the white background boxes that the main text and images are on top of. Just brainstorming: Maybe they are grouped with the text/image and that's why it's not showing on the focus order? If it's not showing in the focus order, maybe you could turn the accessibility off by right clicking it in the timeline?

Kate Golomshtok

3 days ago06/27/24 at 1:44 pm (UTC)

Hi everyone, I don't have a lot of experience in creating accessible courses. In this challenge I tried to apply different recommendations and updated the previously created example. I worked on fonts, removed distracting design elements, made buttons brighter and more visible, reduced the number of animations, replaced video inserts with photos, prescribed alternative text for them, added voiceover and the ability to read the transcription of the voiced text Take a look :) https://360.articulate.com/review/content/38a1d256-8da7-4ec6-b214-feec1713410b/review This is the version before the changes https://360.articulate.com/review/content/6bcc6a5f-7237-405a-b5e6-0200e38b989e/review

Angela Thomas

3 days ago06/27/24 at 6:51 pm (UTC)

Kate, I really liked how you added the number and letter keyboard options to navigate in the new version.

Ange CM

3 days ago06/27/24 at 8:34 pm (UTC)

Hello... Matching quiz, originally a freeform drop and drop. I added 2 more options: Select and click, and Tab key, and edited for increased accessibility with instructions for options, list attached in SL file. I would have liked to restrict the match to one item per 'drop-zone', but to do that using the Tab key will need a complete rework. SL file added in comment section of review. https://360.articulate.com/review/content/21628cc3-4412-4943-8827-8e60b9a2f267/review

eLearn Dev

2 days ago06/28/24 at 1:03 pm (UTC)

Hi everyone, For this week’s Articulate challenge, we focused on making e-learning courses more accessible. We chose a project and implemented accessibility features. Our Approach: We reworked an existing project to include: - Improved Color Contrast Ratios - Keyboard Navigation - Screen Reader Compatibility Before and After: We’ve created a few screens to show the before and after of our accessibility makeover. These transformations highlight the importance and impact of accessible design. View the Makeover: https://www.swiftelearningservices.com/articulate-challenge-466/

faima naz

2 days ago06/28/24 at 5:13 pm (UTC)

its quite good but some of information is more over here MB WHATSAPP

Sneha Sivaprakash

10 hours ago06/30/24 at 5:07 am (UTC)

Hi, for this challenge, I'm sharing my project titled 'Claims under the microscope' to highlight the ability to design modules that are both accessible and interactive. I've focused on improving accessibility through: - Better colour contrast - Focus order - Providing keyboard compatibility You can choose your navigation options at the start to compare the two. I'm also keen to experiment with voice recognition as an option. https://storage.googleapis.com/snehaselearningprojects/466%20Claims%20under%20the%20microscope/story.html

Before-After: Accessibility Makeovers in E-Learning #466

🏆 Challenge of the Week

Inspiration

🧰 Resources

🙌 Last Week’s Challenge:

👋 New to the E-Learning Challenges?

📆 Upcoming Challenges

Related Content

Converting Classroom Activities to Interactive E-Learning #465

Creating Immersive Learning Experiences with 360° Images #467

Using Timed Activities in E-Learning #352

42 Comments