This week I explored a couple of technologies to develop an e-learning module, applying digital media design strategies, instructional design best practices, and accessibility principles. To get familiar with the popular authoring tools, I created a module with Articulate Rise 360, Storyline 360, and Adobe Captivate.
How this module supports the objectives: Each unit supports one enabling objective. Over the course, all learning objectives adapt to Bloom's taxonomy. The enabling objectives in each module gradually advance to the next level of the cognitive process dimension, reaching the highest level, categorized under "6 Create" in module #3.
Course goal: Taking the course leads to increased work performance and employee satisfaction in the organization.
The terminal learning objective of module #3: Assemble visual documents of long-term vision and mid-term SMART goals to share with the people involved.
Enabling objectives:
✔️ Classify the difference between a goal and a system.
✔️ Prioritize the gap analysis item for your mid-term planning.
✔️ Formulate your SMART goals.
Learner interaction: Learners are guided to use interaction blocks (Accordion, Process, Flashcard, Button, playing video and audio, downloading worksheets and transcripts).
Authoring tool & why: Rise 360, Storyline 360, Captivate, iSpring
Version 1 Articulate Rise 360 - attractive interface and templates, support rapid development, updated accessibility
Version 2 Adobe Captivate - robust functions, detailed controls
(in progress) Version 3 Articulate Rise 360 with Storyline 360 blocks - more options for engagement, decrease the amount of explanation in texts
The course content went through WCAG 2 Checklist. All of the applicable level A success criteria were assessed that are compliant with the ADA and Section 508.
This is a link to the filled WCAG 2 checklist.
As I worked on videos and audio past weeks, I wanted to have a clear understanding of the description of the visual information. W3C Web Accessibility Initiative (WAI) goes into the details of the topic.
What confused me was the terminology. According to WAI, "description" of the visual information = audio description = video description = described video.
Description provides content to people who are blind and others who cannot see the video adequately. It describes the visual information needed to understand the content, including the text displayed in the video (WAI, n.d. -b).
Providing a description is important since it aligns with WCAG 2.1 Guideline success criteria that satisfy Section 508 (Applicable to the US federal agencies and departments, including businesses supplying the E&IT products). The law requires adding captions and transcripts at the A level. Then, what about description and/or descriptive transcript?
Challenge 1: What kind of description? How to add it?
Integrated - One video with one audio track. The description is included in the main speaker's scripts, usually best for most training videos, yet not most stories. Need to plan in advance.
Alternate video - Two videos: 1) without description(main audio), and 2) with main audio and description in one audio track, usually spoken by different speakers.
Separate file - One video with the main audio track, and description in a separate synched audio track or a Web Video Text Track file(.vtt). Must be supported by the media player.
I wanted to know how the main audio and the audio descriptions are played on Media Player. The University of Washington has a free open-source Able Player that uses the Web Speech API to read the text-based audio description. Terrill Thompson, the creator of Able Player, explains how this works in his blog.
WebVTT files serve five purposes: captions, subtitles, chapters, descriptions, and metadata. For video, unlike the SubRip file which is downloadable from Youtube, WebVTT is written with HTML and can be styled and classified with CSS. This feature is used for localization when the captioning language requires a specific display.
Improving video accessibility with WebVTT
Web Video Text Tracks Format (WebVTT)
Back to the challenge. That means, for the video that has visual information, 1) captions 2) description (integrated/alternate video/separate audio or WebVTT file) OR 2) transcript is required to satisfy Section 508 at the WCAG level A. One description is required at level AA.
... it's still confusing. So, I visualized it in the infographic.
Challenge 2: What is a descriptive transcript? How to prepare?
The process for providing transcripts is basically:
Get a text version of the audio, called “transcribing” to create captions.
From the caption file (.sbv/.txt/.srt), format the transcript with visual information on the video in texts. Also, include speakers identified and add navigations in logical paragraphs as needed.
Put the transcript online, and make it easy for users to find the transcript from the audio or video file.
Designing accessible e-learning resources:
6 Best Practices for Designing Accessible E-learning from E-Learning Heros
Select an authoring tool
Determine which module of the course to develop by the selected authoring tool
Find appropriate lesson templates
Adjust themes such as colors and fonts
Outline a structure according to the IDD
Determine which blocks to use and ask why
Collect digital media elements (images, videos, downloadable PDFs)
Edit the template and write scripts
Run Grammarly
Draw a rough storyboard
Assemble elements on the authoring tool
Check accessibility while assembling
Repeat 6-11
Run the Digital Media Checklist and adjust or fix issues
Run the WCAG Checklist to ensure all contents cover at least A-level
Best to have peer feedback here
Export web/SCORM/xAPI files
Upload the web file on Amazon/Netrify
Run WebAim WAVE to catch errors
Update the storyboard
Upload the module on the portfolio
Initially, I planned to produce a different version of the module, but learning Captivate took longer than I expected. To submit an interactive module by the due, I simplified it to deliver with Rise 360, which has a milder learning curb. Moving on, I want to ensure that I have tools under my belt, especially when the development time is limited.
Sources & References
6 Best Practices for Designing Accessible E-Learning. (n.d.). E-Learning Heroes. https://community.articulate.com/e-books/6-best-practices-for-designing-accessible-e-learning
Articulate 360. (2022a, August 10). Rise 360: Keyboard-Accessible Navigation - Articulate Support. https://articulate.com/support/article/Rise-Keyboard-Accessible-Navigation
Articulate 360. (2022b, September 15). Storyline 360: How to Design an Accessible Course - Articulate Support. https://articulate.com/support/article/Storyline-360-How-to-Design-an-Accessible-Course
Articulate 360. (2022c, October 7). Rise 360 Accessibility Conformance Report—Articulate Support. https://articulate.com/support/article/Rise-360-Accessibility-Conformance-Report-VPAT
Initiative (WAI), W. W. A. (n.d.-a). Audio Content and Video Content. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/media/av/av-content/
Initiative (WAI), W. W. A. (n.d.-b). Description of Visual Information. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/media/av/description/
Initiative (WAI), W. W. A. (n.d.-c). Media Players. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/media/av/player/
Initiative (WAI), W. W. A. (n.d.-d). Transcripts. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/media/av/transcripts/
Klein, R. (2021, June 9). WebVTT Captions: How to Create a Web Video Text Track File. 3Play Media. https://www.3playmedia.com/blog/how-to-create-a-webvtt-file/
Thompson, T. (2019, April 28). Audio Description using the Web Speech API – Terrill Thompson. http://terrillthompson.com/1173