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 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
- What is Accessible E-Learning?
- 5 Things You Need to Know About Accessibility
- How to Create Accessible Courses with Articulate 360
Articles
For even more on accessibility in e-learning, you can find all our best content in this series:
User Guides
- Articulate 360 FAQs: Accessibility
- How to Test Storyline 360 Content with a Screenreader
- Storyline 360: How to Design an Accessible Course
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.
44 Comments
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
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
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
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