A common e-learning interaction is a set of buttons that activate the display of a particular set of images and text. Often, the items are displayed as an overlay on top of the button set, and a semitransparent grey background is added to de-emphasize the selection buttons. When the learner is done with the displayed information, they click on either the background or a specific “close” button. This is commonly referred to as a “Lightbox.”

Captivate has all of the functionality needed to implement these kinds of interactions through the use of Advanced Actions but the process used to create and manage the popup can be cumbersome and brittle. As an alternative, we have developed a JavaScript popup manger that simplifies the process of display, and state management given certain shape naming conventions. Our popup manager also addresses a key navigation issue for the visually impaired, which is discussed at the end of the article.

The complete Captivate 10 source and the published version of this interaction are available here.

Creating a popup: Naming conventions

The Captivate timeline gives a very compact way of describing all of the elements on the page.

• The buttons are specifically named to help with tab ordering (discussed later)
• All elements associated with the popup are given ID names that start with a prefix that identifies the particular popup interaction, in this case “animal”. Elements that are part of the popup start out hidden, which is done for each element in the property tab by clicking on the eye next to the element name to add the red strikeout:

The popup manager

Our popup manager is added to the slide using the “on enter, execute Javascript” function. The code is provided below:

var currentButton
function popupManager(popupID, stateName) {
console.log(popupID, stateName);
let clearMarker = (stateName == "clear") || 
                  (stateName == "close") || 
                  (stateName == "hide")
if (!clearMarker) {
  currentButton = document.activeElement
 }
// get elements
popupElements = $("[id^='" + popupID + "'].cp-frameset").map(function (i, j) {
   return j.id
  }).get();
// hide all popup elements to start
for (element in popupElements) {
  elemID = popupElements[element]
   cp.hide(elemID);
 };
// set popup state
 if (clearMarker) {
  currentButton.focus()
  return;
 }
for (element in popupElements) {
  elemID = popupElements[element]
  cp.changeState(elemID, stateName);
  cp.show(elemID);
 };
$("[id^='" + popupID + "_Text']").focus()
}

The popup manager is called using the function:

function(popup_ID, desired_state) 

where the popup_ID is the prefix used on each popup element’s ID (in this case “animal”) and the “desired state” is the state name you have used when creating each element’s visual states.

The popup manager performs the following:

• Show all elements that are associated with the popup
• Set the element state
• Set focus to the popup element designated as “Text” (discussed later)

When called with “hide”, “close”, or “clear” as the desired state:

• Close the popup and set focus back to the button that initiated the interaction (discussed later)

Opening a popup

The buttons use the following JavaScript to open the popup:

popupManager("animal","dog")

where “animal” is the popup shape prefix as seen in the timeline and “dog” is the desired state of shapes in the popup. This is added to the button as the action “on success, execute Javascript”. We typically disable the “continue playing project” option on our buttons.

Configuring popup shapes

In our case, we have five shapes associated with the popup. All will be shown and hidden together since they all have the same prefix on their name.

After we construct these shapes, they are hidden and locked.

Two of the shapes have visual states, the “animal_Text” and “animal_image” shapes. We name the states so that the image of the dog and text associated with the dog have the same state name ( um, “dog” ).

Any shape with the popup name prefix and the designated state name will be set before being displayed.

Two other shapes, animal_exit and animal_grey will enable the learner to close the popup. They are both smartshapes that are set to be buttons.

• The animal_grey shape is really just a black rectangle that covers the entire screen. It is set with an opacity of 70% to create the grey transparency effect. Since it is also a button, it initially is created with to other states, “Rollover” and “Down”. We set these states to have the same image as the Normal state: Black with 70% opacity. It is also set to display behind the other elements in the popup.
• The animal_exit shape is always set to display on top of all other elements. You can place this anywhere on the page, but it will be required to have such a shape to support our 508 accessibility needs (discussed below)

Both of these shapes use the following JavaScript to close the popup, added under the action “on success, execute JavaScript”:

popupManager("animals","hide")

In both cases, we disable the “continue playing the project” option.

The use of JavaScript and the popup manger gives a lot of flexibility when developing popups. Adding additional elements to the popup, and adding/removing additional buttons is very simple. Entire popup interactions can be copied with a few modifications to prefixes.

Accessibility and 508 compliance

Designing courses that are accessible to individuals with disabilities is a complex topic, and a complete explanation is beyond the scope of this article. The fundamental needs for folks that visually impaired include the ability to use a text-to-voice screen reader to understand what is on the page, and a rational structure to the page so that keyboard-based navigation can be used to tab through the elements on the page.

As you might imagine, popups are really a problem when it comes to keyboard navigation, as there is a natural concept of navigating through buttons in a menu, but the jump to and back from the popup is not “linear” and there is no inherent support in Captivate for this capability.

There are a set of Internet standards that have been developed to help screen readers deal with these concepts, called the “ARIA” standards. However, Captivate does not provide any support for these, and there is no simple way to post-process the captivate published file to integrate ARIA tagging.

We have addressed the issue of 508 compliance in popups by controlling “focus”. One element in the popup has a special designation as “Text”. When the popup is opened, the browser’s focus is shifted to this element. Screen readers will then read the text within that element.

The Text element is designated by creating a shape that has the popup prefix followed by the characters “_Text”. In the above case, the shape is “animal_Text”. If for some reason additional characters are added to the end of this ID, it doesn’t matter. We tend to avoid using text caption elements, as we have found that screen readers seem to have problems with those. Smartshapes with text seem to work best.

The “exit” element in the popup is always defined last, and is set to display on top of all other elements in the popup. After the screen reader is done with the text element, the next element in the tab order will be the exit element. The popup manger is designed such that when the popup is closed, focus then shifts back to the button that initiated the action, enabling further navigation though the buttons.

Building for 508

Building for accessibility can tremendously complicate the creation of course material, nearly doubling the development time in some cases. The following are key steps needed to make the popup interaction more 508 friendly:

• Tab order: Once the buttons are built, it is necessary to select the entire slide and set the tab order for the buttons. Giving the buttons named IDs makes this a lot easier!
• Exit button accessibility text: The popup exit button is typically just a symbol, like an “X”. Accessibility text will be read when the shape is in focus. Something like “Return to list” is used.

Testing Accessibility Compliance

For folks that do not do accessibility-enabled projects very often, it is possible to get a relatively good assessment of the basic compliance with tab-order and accessibility text availability using just Microsoft Windows 10. The built-in browser, Microsoft “Edge” is actually excellent at displaying the tab focus information, and Microsoft’s built-in screen reader “Narrator” can be used to test pages in Edge for accessibility text.

For more information on Narrator, you can see

• Windows 10 narrator get started
• Windows 10 narrator keyboard commands touch gestures

Using Narrator is easier than you think. The most important commands are:

• ctrl-win-enter start and stop narrator
• caps lock + F1 narrator help
• caps lock + left/right arrow keys move between items and read

In Edge, the current tab location will be visible with dashed lines around the item.

 —

For more information, contact sdwarwick <at> eLearningOcean <dot> com