Tips & Best Practices for Creating ADA/508 Compliant Modules?

Hi Chrisanna!

Great topic! I personally don't have any experience designing accessible or compliant e-learning, but I found these past forum discussions related to the topic that might hold some helpful information and best practices for you!

• Top 5 Things to Make a Course Accessible
• Section 508
• Storyline Tab Order for Accessibility

Looking forward to hearing from other community members who have experience in this area about what best practices and recommendations they've learned from their experiences. 

Hey Chrisanna,

We just finished having an external audit of one of our courses for 508 compliance. Even after we added everything we could and made alternatives to drag and drops, it still fell a little short of the requirements that the new standards are imposing.  Mostly it was due because when we started it out, we didn't design the course for 508 compliance. We wanted to make it as engaging and interactive as we could and a lot of these slides were too busy for screen readers and tabbing through properly. Currently we are providing an alternate document that will meet our requirements. It's not our preferred option.

So before you start on a course, you really have to keep in mind the requirements for 508 compliance and design your slides around that. You could also create two versions of the course. Here are a couple of things to keep in mind when developing a 508 compliant course in storyline.

Alt Tags:  Every image, object, captions, and text box on your slide is automatically set up for alt text. Any reader will read the object name (timeline). You will have to disable or modify the alt text for every object so the reader isn't overwhelmed. 

Tabbing: you don't have control over the tabbing order so you'll have to design any interactive elements accordingly.  One thing I did was make most of the buttons key accessible. I underlined a letter in the button text to signal to the user if they press that key the content will show. 

Keyboard accessible:  The great thing about storyline is that buttons (or anything) can easily be made keyboard accessible. Use one common button to close out information buttons. I used the ESC key (note: this will cause the preview window to close when testing it out). I also made all the quiz question key accessible by assigning them letters (A), (B), (C), etc. You'll have to take shuffle answers off. You can then change the state of them to selected when the user presses the assigned key. It does glitch 1 out 15 times, but I have been able to go through an entire course with just my keyboard.

Menu: the built in menu items are two small to byecompliant (you can modify this in html5 only). You may have to come up with a custom menu solution.  

Drag and Drops:  I added an option in the beginning of the course that a user can check if he required the accessible version of the course. This would trigger the course to switch to alternate versions when it came to drag and drop questions. This way I didn't have to create the entire course twice. 

There are also a lot of other things to consider with 508 compliance. I'm not an expert, but we've been working with an external expert to help us on this. 

I hope this helps

Jerson

As important as the technical aspect is the main idea behind 508 compliance.

The main idea is that you provide the content in a manner that allows everybody to get the full information.

If sb. has a  problem with his/her eyes you must use audio.

If sb. has a  problem with his/her ears you must use optical information.

If sb. has a problem with the usability you must provide the content as accessible as possible.

If sb. has a problem with the language you should provide the content additionally in simple language. (e.g. Simple English)

But you should keep sth. in mind. It is almost impossible to satisfy all these expectations in a normal training without restricting the possibilities of the output. In this case I normally recommend to produce the training in a way that provides the information as good as possible. Of course you should think about some useful standards of easy navigation and colors (like avoiding tranparencies).

Next step could be to insert the speaker notes in the player tab. (This is also very helpful for people who watch a training in their mother tongue - like me.)

Then you can insert additional files with the complete speaker notes as a ressource . In this case you can publish the word file and edit the text. It should not be a 1:1 content copy of the training. (e.g. 7 layers of a slide and the screenshots can be grouped)

This additional document must also be readable by screenreaders.

Conclusion: It is not always very helpful if you try to adjust the elements on stage too much. Sometimes it is better if you add these further information to the ressource tab.

Awesome, guys! Thanks for the tips and resources! I appreciate your response and helpful advice.

Hey again Nicole, Jerson, and Ralf...

After reading through your responses again in more detail, I'm coming across some things that as a relatively new eLearning designer, I haven't gained experience with yet. For instance:

1. I've read several posts stating Storyline is keyboard accessible, but no one's explaining exactly HOW to do this... is this some kind of function or option I select in player properties, or on the slide or image itself?

2. What exactly is "alt-text?" Logically, I assume it means there is an alternative to have text showing instead of an image, or that is "clickable" to explain or describe the image, but how do you create that?

3. I've seen several people post about "lightboxes," but that's something I haven't created before, either.

4. It seems regarding visually impaired users, our company may need to purchase a screen reader, such as JAWS, but this software is nearly $1,000 and I doubt that would be approved by our purchasing department. Any other tools out there more affordable?

Thanks again for your help.

Hey Chrisanna,

1.  You can make the module keyboard accessible by creating triggers when a user presses a certain keys.  Example. if they press the left and right arrow they can move forward or back in the module. If the press a certain letter button, it would make a piece of information appear that is on the screen instead of clicking on the button. You'll have to create these triggers yourself.

2. The idea of alternative text is to provide a textual replacement for pictures (images), a replacement that conveys the same thing as is communicated to a sighted user seeing the image. If you right mouse click on any object, go to Size and Position, there is a tab there that say Alt Text. In that tab you can uncheck the box and any screen reader will ignore this object. This is good for background images, banners and any other static image that will be constant through the course. In the Alt text area you can type in what you want the screen reader to read. For example if you have an image of two people shaking hands, you can type something like that in the alt text. There might be some posts on writing good. Don't just write a description of the image. If it's a button then describe what it does.  Example instead of just  'Menu Button",  you could write, "Press enter to go to the menu".

3. You can use the lighbox feature that is built in with storyline. When you create this trigger and choose to lightbox another slide, it's like looking at a slide withing a slide. It's great if you don't want to leave the main timeline of the course.  Just give it a try and see what you think.

4. There is a free alternative, its called NVDA. Here is a link. http://www.nvaccess.org/   Be careful though, it is kind of overwhelming at first. It is hard to get used to and a little tricky to use.

Thank you so much, Jerson, this is really helpful. I will definitely look into your suggestions!

Hi Chrisanna, 

I am in the same spot as you were back in May and benefit a lot from the conversation above. I assume that you went through the modification to your course. Would you mind sharing some of the tricks with a newbie like me? 

I am interested to find out how much more work is there to make a course ADA complaint.

Thanks in advance, 

Hanna 

Hi Jerson, 

You mentioned about having an external expert that you hired to review the course and give you some suggestions. Is there an organization that I can contact to find such individual? Is having an expert review a course for ADA compliance  a mandatory step in developing courses that are ADA complaint?

Thanks, 

Hanna 

@Hanna

Don't know if it's a required step, the client I worked for hired them as a consultant to help them out on this.

@All

Also, here is a helpful little browser app that works on Chrome to help simulate vision problems. 

Another thing. It may be a good idea to start a checklist of requirements. I searched online for "accessibility checklist for online courses" and found some pretty helpful stuff, but nothing that was a complete checklist I might need. You'll just have to pull and piece together what will apply to your organization.

Hi Jerson,

Could you explain how you implemented the checkbox to have it switch to an alternate version of the drag and drop questions?  Sounds intriguing.

Thanks!

Mike

Hi Mike,

Its a simple checkbox that I setup in the beginning of the course for those that require keyboard accessibility. They enable it using a key press. When it is enabled, it set a variable to "true". I then designed two versions of any questions that had drag and drop activities. One was the drag and drop, the other was a key accessible version. In the beginning of the drag and drop, I had a trigger that would check the accessibility variable. If it was "true" it would jump the user to the accessible version.  

Great, thanks for the tip, Jerson!  Nice work!

These are all great points, but the client doesn't want audio either.  It must be 508 compliant too.  I feel like I'm making a PowerPoint... UGH!!!!!

I have a few drag and drops in my current course and I wonder how can I make that 508 compliant. 

Hi Jerson,

I know this an old post but could you possibly post a sample of what you set up for this:

"Its a simple checkbox that I setup in the beginning of the course for those that require keyboard accessibility. They enable it using a key press. When it is enabled, it set a variable to "true". I then designed two versions of any questions that had drag and drop activities. One was the drag and drop, the other was a key accessible version. In the beginning of the drag and drop, I had a trigger that would check the accessibility variable. If it was "true" it would jump the user to the accessible version."

Thanks