1. Smart Strategies for Designing Accessible E-Learning
Tuesday, October 11th 2016
Fourth Annual Federal Accessibility Forum
National Institute of Health
Bethesda, MD

2. Why E-Learning? 74% of companies currently use web-based learning
Professor E. Learning
74% of companies currently use web-based learning
e-Learning is:
Flexible
Self-paced
Cost-effective
Scalable
Web-based learning has increased in popularity over the past several years, and is currently in use at approximately 74% of companies. E-Learning has several benefits over traditional classroom learning, including the fact that it is flexible and can be done from pretty much anywhere in the world. It is self-passed, which studies have shown leads to increased information retention, and it is cost-effective, and can scale from small groups to large seminars.

3. E-Learning & Accessibility
Software programs have tools for creating accessible content
It is critical to know how to use these tools and their limitations!!!
The content designer is ultimately responsible for accessibility
E-Learning software programs often support the use of screen readers and have many accessibility option. It’s important to know how to use these features and make them available for your user. Most software programs have settings that can be turned on to produce an accessible output. However, even with these settings, it is up to the content designer to make all content accessible. In today’s presentation we will walk you through some tips and strategies to help you create interactive and accessible training modules.

4. Presentation Objectives
Key principles & strategies for creating accessible e-Learning content
Animation
Navigation
Interactivity
Layout
Closed Captioning
Overview of capabilities and limitations of popular software packages
In today’s presentation we will cover key principles for creating accessible e-learning. Our presentation is organized into 5 main topics (Animation, Navigation, Interactivity, Layout, and Closed Captioning). We will cover the common accessibility concerns in these areas along with strategies and examples on overcoming these concerns. We will close by presenting a brief side by side comparison of two popular software packages: Adobe Captivate, and Articulate Storyline in regards to their accessibility functionality.

5. Animation

6. Use of Animation Animation adds visual interest to content!
Consider how animated content is interpreted by non-sight users
Tools to use alongside animation for accessibility:
Alternative text
Narration
Unlike MS Word or PDF documents, e-learning modules can be animated and interactive. Animated objects/modules are done for visual aesthetics and to entertain the user. However, if your audience includes non-sight users, then there needs to be a way to relay any animated information to them. This includes the use of a screen reader, and it is important to understand what the screen reader reads and what it does not read.
Screen readers read any available alternative text. Animated objects that contain informative and crucial information need alternative text. If you there is an animation for pure decoration, this does not need alterative text. For example, slide to slide animated transitions do not need alternative text.
Another solution for relaying information to non-sight users is using narrations. Narrators can read on screen text or explain needed information.

7. Animation Strategies Self-Check If No…
Is the animation purely decorative?
Then your animation is informative. You need to provide alternative text.
Is the screen reader relaying all the information in the module?
There’s probably some missing alternative text. Make sure all the text has been filled in and is appropriately descriptive.
Animation strategies differ from program to program. But there are several questions that you should ask yourself when creating modules.
First you need to know what kind of animation you have.
Is the animation decorative?
If yes, then you don’t need any alternative text. The animation is purely decorative
If no, then the animation has information that the user needs. You need to alternative text.
Is the screen reader relaying all the information in the module?
If yes, then you’re ready to move on.
If no, then you should check all the alternative text. Also, adding audio can help.

8. Informative vs. Decorative
Characters are agreeing to work together by shaking hands
Decorative Animations
Informative Animations
There are two types of animation.
First, there are decorative animations. Decorative animations are purely aesthetic. This can include background images or other non-essential visual content. The example on the left hand side of the screen is an example of an animation that may not require alternative text. On this slide, there is a character pointing to a list of items. The fact that she is pointing to these items does not really add to the intended meaning of the slide. The character just adds visual interest. Decorative images or animations are not required to have alternative text because they do not provide the user with crucial information.
The second type is informative animations that actually add information or enhance the meaning of a slide. For example, the slide on the right hand side shows two characters discussing a regulation and then shaking hands. The shaking of hands animation is actually adding useful information, because it is driving home the point that these two parties came to an agreement. Alternative text is required for this animation.
Character is pointing to a canvas

9. Adding Alternative Text
Step 1: Select “Format”
Step 2: Select “Size and Position” button
Articulate Storyline supports the use of screen readers. Screen readers use Articulate’s alternative text to give the user information. To add alternative text for a navigation button you can do the following.
Select the object
Format the Navigation object
Select the size and position window.

10. Adding Alternative Text
Descriptive
Meaningful
Clear Language
A size and position window opens and you can open the Alternative Text tab. In the text box, type in the text you wish the screen reader to read. Ensure the text is appropriate. For example, you can type in Begin Module.
Step 3: Type in the Alternative Text

11. Navigational Elements

12. Use of Navigation Elements
Navigation of content is crucial consideration for accessibility!
Navigation within content
Ex. Buttons/Continue/Back
Navigation to external content
Ex. Hyperlinks
Making the navigation of your content accessible to all users is a crucial consideration for content designers. There are two main types of navigation, one is navigation within the content or the module. So this would be a continue button, or a back button. The second type is the navigation to external content, so, materials that are outside of the training module themselves, for example hyperlinks to additional resources or webpages.
We will discuss here some strategies for ensuring that navigational elements are accessible.

13. Navigation Strategies
Self- Check Questions
If No…
Are all elements accessible via keyboard or tabbing?
Add keyboard shortcuts or tab-able objects.
Does your screen reader provide detailed description of all elements?
Ex. “Continue button to next slide”
Ex. “External link to Ripple Effect home page”
Include a more detailed description of what each element does.
The first thing we want to discuss is keyboard accessibility. All elements, including navigation, must be keyboard accessible through the use of “tabbing” through items, or using keyboard shortcuts. We will talk more about this concept later on in the presentation as well.
The navigation buttons must also be read by the screen reader and tell the user the action of the button.
In Adobe Captivate, screen readers read “Captions” associated with the button, and Articulate the screen reader reads the object’s alternative text.

14. Visual User Vs. Screen Readers
What the screen reader “reads”
Any time you use a navigation button – especially a hyperlink – you need to let the non-sight user know where they are going. In Adobe Captivate, a navigational button can go to external links. For example, we have a slide that allows the user to Ripple or visit the website.
By default the screen reader will read whatever the caption of the button is. Yet, this doesn’t fully achieve compliance. To a visual user, it may be obvious that upon selecting the top button, they will be directed to Ripple’s home page. However, to a non-sight user, it may not be obvious that they will be redirected to external content. So, we want the screen reader to be thoroughly descriptive and let the user know what is going on.
However, we don’t want a visual user to have duplicative information. To change and control what the screen reader is using, we can change the item’s accessibility. In this case, we want the screen reader to let the user know that they will be opening a web page to Ripple’s homepage. We can do this by deselecting the auto label in the accessibility and typing an alternative description.
What the visual user reads

15. Interactive Elements

16. Use of Interactive Elements
Not all interactive activities are accessible
Primary consideration is the ability to preform the activity using a keyboard
The use of interactive elements, such as quizzes or activities, is one of the things that makes e-learning unique. However, not all interactive activities are fully accessible. Here we will discuss some interactive elements that you will find in many programs that are accessible, and discuss some that are not and should not be used.
The primary factor that dictates the accessibility of these elements is all interactive activities need to be keyboard accessible. Anything that can not be “tabbed” through will not be accessible. In addition most programs allow you to add shortcuts to objects like buttons, which allows an additional way for users to select the item.
You also need to ensure that there is a visual focus on the item that is being selected or tabbed through. For example, many programs have a setting that causes a colored outline to appear on the item that is selected to distinguish it and draw attention to it.

17. Accessible Interactive Elements
Multiple Choice Questions
True/False Questions
Selecting Buttons
Interactive quizzes or activities that ARE accessible include multiple choice questions, as seen in the example in the image on the right hand side of the screen. This example shows a question, along with 3 answer choices. The answer choices can be tabbed through to select. Other such accessible activities include true or false questions, and any activity that involves selecting buttons.
Consider adding keyboard shortcuts

18. Inaccessible Interactive Elements
Drag and Drop
Click boxes
Sliders
There are several types of interactive elements out there such as click boxes, drag and drop, and sliders do not allow you to tab through the slide. And for this reason they do not meet Section 508 standards.
For example, learning interaction such a word searches, shown here on the right, are not compliant because they require the user to click a letter and drag across to the final letter in a word, which cannot be done using only a keyboard. Similarly, the example on the left requires the user to drag the correct number into the answer space, which cannot be done using a keyboard.

19. Strategies for Interactive Elements
Self-Check
If No…
Can you do the same things on the keyboard as the mouse?
Consider changing the interactive object.
Can the user navigate easily and in order?
Check all the tabbing and reading orders.
Does the activity allow the appropriate amount of time for user responses?
Add in more response times in the module.
Is there a way for user to focus in on the activity, such as a highlighted box?
Ensure there is a focus box or hover indicator for the user.
To ensure compliance in interactivity, ask the following:
Can you do the same things on the keyboard as the mouse?
If yes, then you’re compliant.
If not, you need to change the activity or interactive object.
Can the user navigate easily and in order?
If yes, then you can move on.
If not, you’ll need to adjust the order and navigation styles.
Does the activity allow the appropriate amount of response time?
If no, you will need to adjust response times.
Is there content focus?
If yes, you can move on.
If not, you need to find a way to highlight user focus (visually/audio).

20. Buttons vs. Click Boxes (Adobe Captivate)
In this example, we take a look at buttons and Click boxes. The two are similar in that we can apply an action for each. Here we have a button that opens the Ripple Effect home page and we have a click box over a shape that sends an to Ripple.
Using a click box is appealing because it is clear box that can go over images, shapes, and text and can change any item into a clickable object. However, these click boxes are not tab-able elements, and thus should not be used. The way to work around this is to use a button, and manipulate the button’s appearance (for example changing the look, or putting the button behind another object, allowing the object to appear to be clickable.

21. Built-In Widgets
Sometimes you may want to offer users a printable certificate upon completion of a series of trainings. Programs like Captivate offer build-in certificate functions using what they call “widgets. The problem we encountered this certificate widget is that there are multiple extra “tab-stops” when a user is navigating through using the keyboard. These extra tab-stops offer no action or information, and are confusing to a non-sight user. In this example, the orange boxes highlighted show some of these extra tabs. In this case, we found that building our own certificate widget was a better solution and gave us the same functionality while maintaining compliance.

22. Ease of Use and Layout

23. Ease of use and Layout Layout and Organization matters!
Avoid lengthy text in one slide
Avoid complex navigations
Pay attention to reading order and tab-sequence
Because e-learning is interactive and not just a static document, considering ease of use for all users is very important. Consistency of layouts and content organization is very helpful for users to understand the messages you are presenting. For example, it is best to avoid very lengthy passages of text, and also avoid very complex layouts. The image shown here on the right hand side of the screen illustrates a very creative, but very complex layout. This type of layout where the user would need to click around a lot to find all of the important information is not ideal for all users, especially those using a screen reader. It is also very important to pay careful attention to the reading order and tab-sequence of your content.

24. Layout Strategies Self-Check If Not..
Is this layout easy to understand and navigate?
Check all the tabbing and reading orders.
Does the layout divide the page into different areas?
Divide the layout into organized sections.
Is layout consistent throughout the module?
Find a layout that works and apply consistently. (i.e., next and previous buttons in the same location throughout)
Is the language complicated or easy to understand?
Avoid complicated language and keep it simple.
Is the text large enough in the module?
Increase the size of the text.
To ensure the layouts are organized and compliant, ask the following.
Is the layout easy to understand and navigate?
If yes, you’re all set.
If not, you may want to reorganize the layout. Try checking the tabbing and readings orders.
Does the layout divide the page into different areas?
If yes, are these divisions clear.
If not, create clear divisions for content.
Is the layout consistent?
If yes, great!
If not, find a structure and apply to all slides. You want to ensure that navigation buttons are in the same place.
Is the language complicated?
If yes, change the language to something more clear.
If not, keep what you have.
Is the text large enough?
If yes, keep it.
If not, change the size.

25. Tab Sequence & Reading Order
In this example, we take a look at tab order. The tab order is the order in which objects such as images and text boxes are selected when using the keyboard to navigate. As a general rule, you want the tab order to mimic the preferred reading of the module. For example, if you want the module to read: Title first, then the content of a text box, then the animation alternative text, you will want to set the tab order to match this. In Articulate Storyline, the tab order function can be found on the Home ribbon.
In this example, the image on the right hand side of the screen shows our example slide, with a title, an animated character, and a text box. On the left hand side, we see the tab order panel. Looking at the tab order panel we see that the text box is listed first, followed by the character, the master slide, and then the title last. This is not the order that we want. We can adjust the tab order of these elements to occur in the preferred reading order for ideal comprehension.

26. Closed Captioning & Transcripts

27. Use of Closed Captioning
Use synchronized closed captioning!
For users who cannot hear the audio, your training module must have an alternate way to present auditory information. This can be accomplished by different methods across programs. Here in the image on the left side of the screen we show an example from Adobe Captivate, illustrating what the closed captioning may look like in your output.
Importantly, the closed captioning must be be synchronized with the content presentation. The user should also have the option to turn the captions on and off. Additionally, it is advisable to provide users with a separate written transcript to refer to.

28. Closed Captioning Strategies
Self- Check Questions
If Not…
Is the available Closed Captioning synchronized to content?
Adjust timing of the closed captioning.
If Closed Captioning is used, does the user have the option to turn the captioning on/off?
Ensure that there is an option to turn the caption on or off.
If Closed Captioning is used, is the text size appropriate? Is the background color meeting the color contrast ratio?
Make sure that the text size is increased, and that the text has appropriate contrast with the background.
While making the module, ask yourself the following:
Is the available closed captioning synchronized?
If yes, then make sure that the text is large enough to read.
If not, make the captions synchronize with the audio.
If the Closed captioning is used, can the user turn the captioning on and off?
If yes, then you’re all set.
If not, find an option to turn it on and off. If there is no option, then find a way to provide a full transcript.
If closed captioning is used, is the text size appropriate?
If yes, check the color contrast ratio.
If not, change the sizing.
Is the color meeting the color contrast ratio?
If yes, you’re all set.
If not, change the color settings.

29. Software Comparison

30. Program Matrix Chart Adobe Captivate Articulate Storyline
Screen Reader Notes
Check under slide properties
Screen readers read alternative text
Screen Reader and Buttons
Use captions by default
Use alternative text
Navigation Button
Allows you to create your own navigation buttons
Built-in previous and next buttons
Closed Captioning
Available built-in feature
Need to create manually or use slide notes
Tab Order
Check tab order under slide options
Hyperlinks
Use a button for tab-ability
Need to use a button for tab-ability
Extra Highlighted boxes
Avoid using widgets and other built-in tools
Remove unwanted content focus boxes by hiding objects to the accessibility technology
Outputs (for IE or Firefox)
Use the “Title.html” output for full accessibility
Use the “story.html” output for accessibility
Throughout this presentation, we had examples of both Adobe Captivate and Articulate Storyline. These two programs are very powerful in creating e-Learning but the two programs are very different. This slide contains a chart with the Section 508 related differences.
Screen Reader Notes: In Captivate, the screen reader will read anything that is in the accessibility description found under the slide properties. In Articulate, the screen reader will read the alternative text assigned to an object.
Screen Readers and Buttons: In Captivate, screen readers will read the caption by default unless you add in and accessibility description. In Articulate, screen readers read an objects alternative text.
Navigation Buttons: In captivate, you can create next, continue, and other navigation buttons. Articulate has a built in player with previous and next buttons.
Closed Captioning: Captivate has some built in synchronized options. However, Articulate doesn’t and you will need to create synchronized closed captioning.
Tab Order: Both Captivate and Storyline allow you to organize the tab order in the slide.
Hyperlinks: To have tab-able links, you will need to have a transparent button over the text. The action to the link should be opening an external file/link.
Highlighted Boxes: We need to have a highlighted box over the tab-able images for content focus. However, some widgets in captivate have extra tabbing stops that can be confusing. Yet, Articulate lets us choose which objects we want the users to tab to.
Outputs: For Adobe Captivate, use the file called “title.html” for full accessibility features. In Articulate Storyline, us the “story.html” output for accessibility. These outputs allow for users to tab throughout the module whereas the other outputs do not and include the tab-ability feature.

31. Questions? Please raise your hand!
We are now happy to take any questions from the audience. Please raise your hand.

32. Contact us Amy Bielski abielski@rippleeffect.com Elyse Sullivan