What’s a NGDLE?

I think we’re all interested in what our VLE or LMS will look like, or indeed what it should already look like. Whilst much has been talked and written about it, perhaps this visualisation from Bryan Mathers is the best view of it yet – the “Next- Generation Digital Learning Environment (NGDLE)”. And it incorporates Lego so well – the Lego base is the overall requirement with each building ‘block’ being added as and when they’re required – personalisation, collaboration, accessibility, etc.

According to the Educause report, the emerging needs of a NGDLE are these:
“Its principal functional domains are interoperability; personalization; analytics, advising, and learning assessment; collaboration; and accessibility and universal design. Since no single application can deliver in all those domains, we recommend a “Lego” approach to realizing the NGDLE, where NGDLE-conforming components are built that allow individuals and institutions the opportunity to construct learning environments tailored to their requirements and goals.”

So what will a NGDLE look like?

So what will a NGDLE look like? by @bryanMMathers is licensed under CC-BY-ND

Captivate popup manager with 508 accessibility support

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

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

Maintaining Keyboard Focus Part 2 – Accessibility Tip

screenshot of Script window for Execute Javascript commandAnother aspect of keyboard accessibility when it comes to 508 compliance is not losing the focus on the screen. How can this happen you ask? Well, imagine you have a Captivate course that uses the show/hide commands in Advanced Actions to maneuver multi-state objects on the screen. Say you have something programmed where a user presses a button and it pops up a lightbox with more information about the course. Typically when you select a button, the focus field indicator stays on the button selected. Unless you manually put directions in the accessibility text to tell a blind user with a screen reader to tab to the now opened lightbox on screen, how are they suppose to know more information have come up on the screen? Even worse, imagine that you have a close button for the lightbox once users are finished accessing it. When you use a keyboard to tab to it and select to close it, what do you suppose happens to your focus field? What happens is that the focus field disappears and focuses on the main slide. This is a big issue for 508 compliance because this is akin to pulling the rug out from someone’s feet. One moment they were focused on closing a button from a lightbox and then now its gone. This can be easily fixed when course developers such as ourselves take the reins and dictate to Captivate where the focus field should be when a button is activated (if the button they are now on will be hidden once activated or focus needs to be directed elsewhere). Using the Execute JavaScript command with your Advanced Actions, you can make your Captivate courses even more accessible!

Add Execute JavaScript command to your Advanced Action, select Current Window and in the Script Window paste the following:

var elem = document.getElementbyId(‘Insert exact name for object you want keyboard focus on’);

$(elem).focus();

Now as a course developer, you have even more control over the tab order in your Captivate courses which allows for less room for errors or accessibility failures. Happy developing!

Maintaining Keyboard Focus – Accessibility Tip

screenshot of css file with pasted codeWhen it comes to accessibility, people usually first think of closed captions and alternative text. But a major issue often overlooked is the importance of keyboard focus. There are individuals out there who are unable to use a mouse and rely exclusively on the keyboard to navigate on the computer. When you storyboard and develop your courses in Captivate, ensure that you have a visible keyboard focus indicator in the browser(s) that your organization/company is using!

I had this problem not long ago with Internet Explorer and there being a very faint keyboard focus field when testing a published Captivate course. Firefox and Chrome also, in my opinion, have faint focus indicators. As far as I could tell, Captivate does not have an internal mechanism to change focus field color or size (only an option to hide the focus field). So, us lowly Captivate users have to resort to external code and manipulation to get the desired result.

Using the following HTML code, copy and paste it in your published Captivate course folder -> assets -> css -> CPLibraryAll … by opening it with notepad and select save. Then when you open the index.html of your Course, there should be a bolder red focus field. You can change the color or size by manipulating the code below.

*:focus {outline: #FF0033 solid 3px;
}
.cp-frameset:focus {
opacity: 1 !important;
background-color: transparent !important;
}

Accessibility and the Multiple Choice Quiz Slides

I’ve answered several questions regarding accessibility and the pre-built Captivate quiz slides over the past few months and decided to put the information here for easy access to anyone who needs it. To start with: Tab/Enter is not the default method of navigation for a multiple choice quiz slide. The following will work on Firefox and IE 11 and worked in Chrome when I was building to it last year.

1. None of the slide reads without tabbing in – the entire thing is built in and interactive format so the text doesn’t read without being selected.

2. When you first select “tab” – you will access the Title Area (if you have it on the slide)

tab to title

2. Tab again to access the question stem

tab to stem

3. Use the up and down arrow keys to access the radio button objects that contain the answers. (Some times, once you have accessed the answers, the tab button will work, but don’t use it until step 5) Although only the radio button is highlighted, the text is automatically included and read.

arrow in

4. Once you have chosen the answer, use the space bar to select it (the circle will fill in). Again – don’t use the tab button if you are not certain of the answer – once you tab out of this step , you have locked in the answer and can’t change it, you can only submit it.

space bar

5. Use the tab key to get out of the radio button area – you will go directly to the submit key – select enter to finish the question and record your answer

submit tab

6. The weirdest part – after the feedback is presented and you have selected the correct answer or completed the number of attempts allowed, you have to select enter an gain to get off the slide. It doesn’t matter where your highlight box is or your cursor is, but you have to be on the slide and select enter again to continue.

 

These directions will need to be clearly stated and should be available for users as needed – check with your accessibility office to determine the format and placement of the directions.

Accessibility – Lessons Learned

OK, folks, here goes nothing.

Let me start this by providing my bit about my background. I’ve been designing, developing and certifying 508 complaint web based trainings for the government departments for the past several years in multiple positions with multiple departments and agencies. This post will not give you a checklist that ensures your project will pass testing – it’s simply an attempt to share what I have learned.

Lesson #1: 508 compliant and 508 certified are not equal statements. 508 complaint indicates the software includes the tools and fields necessary for the developer to create a project that can be certified through a testing protocol. For example if all you do is check the “make accessible” box on a Captivate project, it just turns on all the functionality without creating the correct alt text or names. roles, and states for your interactive objects. It does automatically assign all possibly interactive or accessible objects with alt text – machine generated identifiers that have nothing to do with the content. (More on how to change the gibberish into content in a later entry, perhaps?)

Lesson#2: If you can get a screen reader installed, do it. JAWS is the best answer if you’re designing for the Feds (it’s their default system) but the NVDA screen reader is a close enough approximation if you want a free one instead. If you’ve never used a screen reader, it’s an epiphany when you do. It will also help you understand what is being read and how it sounds to the learner. While using a screen reader is not part of the testing protocol to certify 508 content (at least – not with any group I’ve designed for), it is a tremendous asset in creating truly accessible materials.

Lesson #3: Pre-built interactives are rarely “accessible.” First off, most of the Adobe supplied interactives are built using Flash – and Flash is, by definition, not accessible. You might get away with putting the information into an alt text description, but chances are when the functionality check is being run, two things will happen – tabbing to the object will either skip the object completely (no alt text is read) or the tabbing will highlight the object, then tab into the object and not be able to escape – creating a loop and causing your project to fail testing. If you want interactivity and want accessibility – build your own interactives and set the order and descriptions yourself.

Lesson #4: All 508 testing protocols and checklists are not created equal (and neither are the testers). The testing checklist I am currently using has over 80 possible tests to apply to determine if any multimedia, documents, videos, audio, or software is certifiable. The last departmental checklist I used prior to this one had 115 tests for documents alone. Know what the standard is you are building to and build to it. Find out what tools are being used to test the programs. The Web Accessibility Toolbar (WAT) is a free add on that combines several of the most used and highly regarded accessibility testing programs in one easy to access package. Inspect (part of the Windows SDK package) is another tool I’ve used extensively. You need to know what’s being tested and how it’s being evaluated – otherwise, you can get stuck in a continuous loop of edits and re-edits.

Lesson #5: Text alternatives are losing favor as the “go-to” solution for online courses in many agencies. A well designed and formatted pdf can be a godsend to a visually impaired learner, but two of the last three departments I’ve worked with would not accept these to certify the project – they were viewed as supplemental or flat out unacceptable. In most cases, agency policy has made these the “last resort” for developers. It’s a shame, because if you take the time to create them in a compliant format, they are amazing when you use them with a screen reader.

Lesson #6: Think outside the box. Don’t just “dumb it down” and create a text heavy page turner – that’s not training – that’s surrender. It is not only possible to create interactive training that meets 508 requirements, it can be a rewarding challenge. Designing for 508  requires you to look at the lesson from alternate points of view and find a way to reach learners where they are. In spite of all the warnings I posted in lessons 1-5, there’s a way to move great projects forward without losing the impact you’ve built in for fully able users.

I think that’s a decent start – let me know what kind of follow ups you’d like to see here (if any) and feel free to share your lessons learned as well. The more we share as a community, the better we meet the needs of all of our learners (just like the eLearning Guild says – Together We Are Better, right?) If there’s enough interest, I’ll contuinue this conversation here.

What I’ve learned from my kids: Lego

I used to have a lot of Lego as a child. I don’t remember Lego as being about themes and sets or kits, as it is these days, but there was always a brick or two lying on the floor, just ready to ruin your day when you trod on it.

From the age of about 4 up until 10 or 11 Lego featured highly on my birthday and christmas list, right up until my Dad surprised me with a ZX81 computer, and a book (or was it a magazine) that would teach me to code with 20 games to ‘load’ (type) in.

As with nearly everyone who played with Lego as a child I have very fond memories, and now I’ve got two boys of my own I’ve been enjoying the experience of Lego again. And my, how it’s changed!

It’s no longer a couple of boxes on the shelf in a toy shop, it’s now a whole section with Lego monsters, Lego buildings, Lego superheroes, Lego Star Wars, Lego Technic, Lego Creator, Lego Pirates, Lego Bionicle, Lego City, Lego Friends, etc.

Lego ToysMy boys (aged 4 and 5) love the building of cars, planes, bikes, helicopters, trucks, etc. from the kit and instructions, and then they love playing with them. The fact the scales are different and the plane is smaller than the motorbike doesn’t phase them or make a difference; the journey and the play is all important and all encompassing.

Both my boys are like me in that they are kinesthetic learners … they learn by doing and trying. It’s no use telling them which piece goes where, they need to try for themselves. Here’s what I see in their play and their use of Lego:

  • Instructions – not the be-all and end-all of Lego. Enjoy the kit and instructions, then put them to one side and build something out of nothing. Mix the pieces and kits together, aim for an idea or shape, and see what you get. Learn to be creative, make mistakes, make something that looks like nothing you’ve ever seen before.
  • Dream big – Don’t limit yourself or them to something you’ve already seen: create and develop ideas around shapes, colours, symmetry / asymmetry, practicality (and impracticality), the recognisable and purely outlandish. Their imagination knows no boundary, so why should yours be limited as an adult?
  • Play – Don’t make something and put it on the window sill or shelf, play with it. For some the enjoyment is the making, for others it’s seeing what they’ve made. But unless you start the process of making something, there’s nothing to play with, nothing to gaze over, nothing to show or talk about. In kids it’s important that play can introduce different elements of social behaviour and interaction, and Lego can do this at the same time as helping with coordination, management, problem solving, etc.
  • Patience – They love to build and, like me, get frustrated when it doesn’t go according to plan. Show them how to overcome this and build it into the game: the plane, the truck, the monster, or whatever they were trying to build will be different to how the first envisaged it, but it’s still their imagination, it’s just a little further on and more developed than it was before.
  • Accessible – If everyone has Lego (and at their ages, all their friends do), then there’s something they have in common. Lego is a great builder (excuse the pun) of friendships and a good way to break down communication or social barriers.
  • Community – All their friends have Lego, in a greater or lesser volume that them. New Lego is talked about and shown off at school and on play-dates. Photos are shared between parents of the latest build. Kids want to take the finished structure to their friends house to play with whatever they’ve just built (you just try and keep track of the pieces as they come flying off!). We haven’t been asked to share Lego yet, but I’m sure it’s coming.
  • Structure – Games often have structure, just as a building will need one too. Lego has the ability to remove all known structural elements and get children to try it for themselves – we know larger bricks should be at the bottom not the top, but through their play and mistakes, what if they find a new mechanism they can take through their studies and play? The fact that they can try something different and learn from it (if it works or not) means they can think creatively and critically for themselves.
  • Flexibility – If the same bricks can build a horse one day and a truck the next, just think what my boys are learning about flexibility. Games are no longer limited to  the toy that come in the box, but any toy they can dream and build (even if it looks nothing like what they say it is to you or I). Their minds are open to change and differences, and Lego can instil a form of flexibility that is a powerful tool when during their growth into small adults, and eventually workers, colleagues, managers, business leaders, friends, mentors, etc.
  • Resources – How wonderful Lego is at teaching you to manage the resources you have! If you run out of 2×4 bricks you can easily use 1x4s or 2x2s as a replacement and still have the same results.
  • Engineering –  It’s easy to see how Lego can encourage and nurture a sense of structure and engineering, but being able to build with Lego is less about that and more about creativity and imagination. Very little that gets built by most of us is exactly the same as the shape it’s supposed to be (truck, car, house, spaceship, etc.) but we’re happy with it as it’s our own creation and it works just how we wanted it to.
  • Respect -Just because you wouldn’t build or design something like that doesn’t make it wrong. A different approach may end in a different result but it’s still valid and a worthwhile effort, and maybe something you could learn from too? Respect what others create.
  • Tidy up – Remember, standing on a Lego brick in the dark is worse than any known pain to mankind. Clear a path through the rubble of the fallen Lego sculptures and protect your feet.

“Lego reminds me that I don’t have to worry about where to start—that what I create will eventually fit somewhere, so I might as well just enjoy the process and play—after all, the word Lego comes from a contraction of phrase ‘leg godt’, which means ‘play well’ in Danish.”
Rabbit Hole, November 2014

Lego is so much more than the toy, it can teach (informally) so many of the skills kids need (and some adults too!) in day-to-day lives. We should all have some Lego around!

But what about my Lego journey?

I’ve also been able to get my Lego mojo back … I  like the complicated sets from the Lego Technic and Lego Creator ranges and have started collecting some of the ‘better’ ones – Lego Mini Cooper (20242), the Lego Camper Van (10220), and the Lego Supercar (8070). And what’s more, my boys both like to sit and help (they’re not allowed to build themselves yet, but that can play with them afterwards!), passing me pieces and telling me where it goes, and what I’ve done wrong, or I’m taking too long!

Lego Camper Van

What I really want, though, is the Millennium Falcon (10179), as showcased in this 3D build video, but at over £4k it’s a bit out of my price range:

Header image source: DonSolo (CC BY-NC-SA 2.0)

Adding Closed Captions for your Videos in Adobe Captivate 7

Adding closed captions to your eLearning courses is a basic requirement to meet accessibility standards like Section 508 and Web Content Accessibility Guidelines 2.0. You can easily do so for your audio-based courses by adding narration to your screen, adding slide notes, and then converting those slide notes to closed captions. But a little known […]