19 Accessibility Makeover Examples for E-Learning #417

Accessibility Makeovers RECAP #417: Challenge | Recap

This week's challenge asked course designers to rework an existing project to make it more accessible. Common techniques used for improving accessibility include:

• Making sure there's enough contrast between colors.
• Adding alternative text descriptions for images.
• Organizing the order in which elements are highlighted when navigating with a keyboard.
• Allowing learners to have more control over their own learning experience.

Thanks to everyone who shared a demo, download, or feedback this week. Your examples and makeover tips will significantly help other course designers.

Jodi M. Sansone

Example | Download (player tab) | Jodi M. Sansone | Website | @jodimsansone

Teresa Sowell

Example | Teresa Sowell

Ron Katz

Example | Ron Katz | Website

Jonathan Hill

As popular as drag-and-drops are, they're not 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, a staple feature of most e-learning aimed at children.

Example | Explainer | Jonathan Hill | Website | @DevByPowerPoint

Ron Katz

I tried to maximize the accessibility features of Articulate, especially during the last video. Background music is on, but you can turn it off. Closed captioning and transcript are available. Video presenter allows for lipreading for those who need it.

Example | Ron Katz | Website

Thierry EMMANUEL

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 and keyboard so there would be no difference. So I worked on two 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 complicated 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 hidden "True/False" and "Multiple Choice" activities.

Example | download (in the comments) | Thierry EMMANUEL

eLearn Dev

E-learning accessibility makeover examples ensure inclusive online learning for all, including individuals with disabilities or diverse learning needs.

Example | eLearn Dev

Amar Kulshreshtha

Example | Amar Kulshreshtha | Website | @AmarShreshtha

Sarah Scott

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

Example | Sarah Scott

Jackie Matuza

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 its own slide, but I wonder 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. 

Example | Jackie Matuza | Website

Bonne Nagle

Example | Bonne Nagle | Website

Yvonne Urra-Bazain

I revisited one of my first challenge story files for this quick demo. 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.
• Providing choice/adaptability of how content is presented.

Example | Original version| Yvonne Urra-Bazain | Website

Amaly Gillig

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. 

Example | Amaly Gillig

Daniel Canaveral

Example | Daniel Canaveral

Rhiannon Knowles

• I changed the headings/subheadings to sentence case (although I've been reading up on this, and the literature needs to be more varied regarding whether this is more readable/easier to process!).
• I added timings in the first section for those not able to see the GIF and enabled the option for users to zoom in on the GIF if they need to.
• I also added audio for each section – I've noticed some of my favorite websites doing this more and more. :) I tried recording this myself, but sadly I live next to a building site right now, so my audio was picking that up, and I opted for text-to-speech instead. More robotic, but still nice to have the easy option to play the audio right there on the page.

Example | Rhiannon Knowles

Phezulu Dhlodhlo

This is my first effort at creating a course that is accessible. It's quite a considerable challenge. I read a lot about 508 Compliance, A11Y Project, accessibility, and many other related resources. In this challenge, l concentrated on the basics. These basics included structuring text accordingly, customizing the SL360 player for accessibility, changing the focus order, and changing specific interactions to make them accessible. 

Example | Phezulu Dhlodhlo

Kate Golomshtok

Example | Kate Golomshtok | Website

Samuel Apata

Example | Samuel Apata | Website | @afrostem

Jill Martine

I kept color simple with black text on a white slide background and black on light orange answer choices (checked with WebAIM for color contrast with available colors in our palette). But, as many others have said, we're also trying to make things accessible and engaging and can always learn and improve on it.

Example | Jill Martine

New to the E-Learning Challenges?

The weekly 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.

If you have a blog, please write about your challenges. We'll link back to your posts so your great work gets even more exposure. 

And if you share your demos on Twitter, please include #ELHChallenge so your tweeps can follow your e-learning coolness.

Share Your E-Learning Accessibility Makeovers Examples!

The accessible makeover challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.