Tips and Tricks to Making Accessible Content More Interactive

blog_LS_Access

While following accessibility guidelines and requirements may have you focusing on features and functionality that you need to avoid, there’s no reason that an accessible course can’t also be engaging and interactive. In this post, we’ll provide some creative ways to include Lectora® features that you may have thought were “off limits” in accessible eLearning. 

Initially Hidden Objects

Remember that any object that is Initially Hidden when a page loads will not be read by a screen reader. However, you can still use alternative methods and hidden text to simulate many interactive elements, including rollover text and tool tips as well as pop-up messages on the page.

The key is to always ensure that a copy of accessible text is available on the page, even if it is not technically visible to a sighted user. Further, always ensure that the layering order is correct in the Title Explorer, which effects the tabbing order on the page and the reading order that assistive technology like screen readers use to announce the objects.

Rollover Text and Tool Tips

An easy way to create accessible tool tips and rollover text is to continue to use Mouse Enter/Exit actions to show initially hidden text, but ensure that a hidden copy of the text is also on the page as alternative content.

For example, to add rollover text to a page, make a copy of the text block and set that to be initially visible (clear the Initially Hidden checkbox) and then consider reducing the font size, matching the font color to the background color of the page, and layering it behind an image. In this way, a learner who is sighted or not using assistive technology will interact with the rollover text, and a learner who is using assistive technology will encounter the accessible version of the text.

The accessible text is layered behind the rollover text and is initially visible on the page.

The accessible text is layered behind the rollover text and is initially visible on the page.

Pop-Ups

Rather than always asking your learner to open physical pop-ups that open in a new window, you can layer additional content on the page that is only shown when triggered by the learner (for example, when the learner selects a button or hyperlink). You can accomplish this by layering the “pop-up” underneath a shape or image that matches the background of the page, and the hiding the shape/image.

  • To “display” the pop-up, trigger an action to Hide the image or shape.
  • To “close” the pop-up, trigger an action to Show the image or shape.

Because the text is initially loaded on the page, a learner using assistive technology can access the “pop-up” message. Just be sure to layer it appropriately in the Title Explorer.

The white rectangle is layered over the pop-up. The Learn More button hides the rectangle and the Close button shows it.

The white rectangle is layered over the pop-up. The Learn More button hides the rectangle and the Close button shows it.

Take Advantage of Branching

Finally, remember that you can always make use of Lectora’s variables to create a branching scenario. Branching allows you to provide alternate content when necessary. For example, you may want to use a non-accessible question type like a Drag and Drop question, and branch learners using assistive technology to an alternate page that uses a Multiple Response question instead. You can accomplish this using variables and conditional actions:

  • On the first page of your course, provide a way for your learner to indicate if he or she is using assistive technology (either with a button, hyperlink or keyboard shortcut). For example, you can provide some text that states: “If you are using assistive technology/software please select the Shift+A key now.”
  • Trigger an action to modify a user-defined variable, and set it equal to “true.”
  • Add conditional actions to the navigation buttons, links, and keystroke actions in your title to go to a page with alternative and accessible content if the variable is equal to true.

Ask the learner to trigger an action that modifies a variable so that you can track if he or she is using assistive technology.

Ask the learner to trigger an action that modifies a variable so that you can track if he or she is using assistive technology.

Use the value of the variable to conditionally navigate the learner to accessible pages when necessary.  

Use the value of the variable to conditionally navigate the learner to accessible pages when necessary. 

By using these tips in your eLearning course, you can ensure that your course is accessible AND interactive for all learners. Want to try creating accessible courses yourself in Lectora? Sign up for a free 30-day trial today.

For more accessibility reading, check out these posts: