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