Power Tips for Accessibility

Apr 22, 2020

I recently worked on a large Storyline project for a government agency. After the first version was finished the client ran accessibility tests and found several items that did not meet the Web Content Accessibility Guidelines (WCAG).


Here are some highlights of things that I discovered as I re-worked the project, meeting the WCAG guidelines.


I've attached the complete article as a Word document as well as a .story file with how-to videos and an accessibility checklist.


Use the Storyline WCAG Checklist
You can find it here https://articulate.com/support/article/Storyline-360-Accessibility-Conformance-Report-VPAT. Use this to make sure your project meets all of the guidelines.



JAWS from Freedom Scientific (https://www.freedomscientific.com/products/software/jaws/) is the gold-standard for screen readers.  I originally tested the project using NVDA, a free, open-source screen reader. But, NVDA did not give me an accurate rendering of the objects on the slide. Using JAWS for testing each slide is the most accurate way to understand how the slide will be presented auditorily.



Think Accessibility at the Beginning
The original version of my project looked really great with lots of gradients, different colored text boxes, fancy shadowed buttons, and nice-looking headings. However, this lowered the text contrast on every slide. This particular project had 234 slides, so I had to do a lot of rework to do on the revision.



Keep accessibility in mind before you dive into the content by utilizing themes, color schemes, and a good font choice.



Establishing the Project Color Theme
As you begin a new project, establish the color scheme including the text/background combinations. Test these using a contrast checker. WebAim offers a free service https://webaim.org/resources/contrastchecker/
You need to have a contrast ratio of at least 4.5:1.


Once you have a satisfactory ratio, add these colors to your project using the Design tab/Colors/Create New Theme Colors.



Setting up a Default Button Style
Style buttons using the same color scheme. Once the appearance is the way you want it, right-mouse click on the button and select "Use as default". Each time you create a new button it will have this same styling, ensuring all your buttons meet the color contrast guidelines.



You can install browser extensions to check the contrast of your slides. In order to use this, you'll have to publish the slide, scene, or project to HTML and then view the story.html in your browser, clicking on the Contrast Checker icon in the top bar of the browser.


Google Chrome: WCAG Color Contrast Checker  https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf


Firefox: Contrast Checker https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/



It is better to have the color scheme and your basic slide layouts established and tested before you start developing the course. It is easier to fix a single slide than every slide in the finished project.



Work Incrementally - One Slide at a Time
If you set up a slide, and it is not fully accessible, when you duplicate it, you will greatly expand the number of errors that have to be fixed later.



As an example, in my project, I copied and pasted a particular button many times. The original button had the alternative text, "Hit enter to hear more about using the brass pencil test." It was quite a surprise, and a lot of rework later, to hear JAWS read this line over and over again for all those other buttons.


Tab Order Panel Workflow Checklist
You will find this in the live demo as well as in the attached .story file.


 Videos Transcriptions
Transcribe any video using the free service, oTranscribe (https://otranscribe.com). It is browser-based so save your work to a text editor every few paragraphs in case the browser closes unexpectedly.


 Setting up the Player for Video Transcripts
In the Player enable the Notes option. A new tab will display next to the menu tab. This discussion offers more details, https://community.articulate.com/discussions/articulate-storyline/how-do-i-add-a-transcript-to-the-storyline-player


 Utilize the built-in captioning controls by checking the "Captions" options for the Controls in the Player Properties. You can also change the player tab label from "Notes" to "Transcription" in the Player Properties page using the Custom group "Aa Text Labels" option.


 This Notes/Transcription tab is not available with the lightbox trigger option. Make sure you jump to the video using the "jump to slide" action trigger


 Closed Captions
I use Camtasia to create an .srt file with closed captioning text and timings, importing it into the embedded video in Articulate Storyline. However, you can also use the closed captioning editor in Storyline itself. Here is a link showing how to use this built-in panel. https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-user-guide-how-to-closed-captions-editor


Listening to your course will give a new perspective to your work. Following these tips will improve your product quality as well as greatly reduce project rework.



The Articulate team has put together several resources on accessibility.



·      Several how-to articles https://articulate.com/support/article/Articulate-Storyline-360-is-Compliant-with-Web-Content-Accessibility-Guidelines-wcag



·      The Articulate Storyline  360 Accessibility Conformance Report (PDF) https://cdn.articulate.com/assets/kb/sl360/Articulate-Storyline-360-Accessibility-Conformance-Report.pdf



·      This is a list of accessibility features that were added to Storyline 360 in the last year



 I've attached a .story file with how-to videos and an accessibility checklist as well as some sample slides you can use to experiment with the tab order panel and the transcription sidebar.

You can view the live demo file here:  https://WebExplorations.com/articulate/accessibility

6 Replies
Liz Victoria

This is very helpful, Peter -- thank you!

On the JAWS vs. NVDA topic, WebAIM periodically releases nicely detailed surveys on screen reader usage.  Highly recommended reading for any Storyline devs working on accessibility -- it gives all sorts of insights into how people actually use screen readers.

WebAIM Screen Reader User Survey

One highlight: NVDA has edged out JAWS as the primary screen reader used by respondents on laptops/desktops.  While the sample size isn't huge, and the margin is very close, it points to the fact that NVDA is very popular, and is a viable option for us.

Anchulee Raongthum

Chiming in to say THANK YOU. I am new to government work and have a lot to learn. I'm spending time now establishing 4-5 base slides that do what I want them to do, and will duplicate them like crazy once I'm satisfied they work. I have done many of the mistakes you made in past projects, and 508 compatibility is a bear, and I hope to build it as cleanly and accurately as possible from the jump.