This post is a challenge. I’ll get to the challenge at the end.

For now, let’s look at this fictitious company called, Dundeal Mifflearn. Good news is, you’re hired! Bad news is, they’re rebranding. Anyway, in this example, you’ll get to read their new, rebranded memo about the company. However, it has several fill-in-the-blanks. You can decide what the company is about by selecting the appropriate content.

If you want to play with the example first, you can launch the Dundeal Mifflearn prototype.

Below is a play-by-play walk-through:

The landing screen introduces to the theme. I have to mention that awesome Marisa Livingston, all credit for The Office characters go to her site.

The next screen welcomes you to the company, and explains the activity. Basically, based on your fill-in-the-blank answers, you’ll be assigned to one of the characters.

The main activity is on the next slide. Read the company memo to understand what the rebranding is about. Now, the memo doesn’t make sense without the [blanks] filled out. Click or tap each of the orange down arrows to see a list of items select from…

When you click or tap the arrow, a choice of items show. These are always the same. You need to select one of the items to fill in the current blank. Don’t worry, you can change your mind as many times as you want. Also, you may not need to use all items, and you can use an item as many times you want.

Once you select an item from the list, it will be integrated into the memo. As you go through each blanks, the end result is the full memo as readable text.

Once you filled out all blanks, you can continue to see what character you are, your points, and the average point across participants. The prototype is connected to a database and shows real-time data. Your choices are listed as well for the memo.

If you’re curious about what characters others got, click or tap the See the office! button.

All your answers (fill in the blank choices are recorded), as well as the character you were given based on the number of points. The numbers show how many other people got each character. I restarted the database, so right now there’s only one. But it will grow!

6-slide solution

All this is done in 6 slides in Storyline (with some additional JavaScript help and Stencil by ClueLabs for collecting data).

I’ll include some of the tricks involved in the making at the bottom of the blog. But we’re talking about a challenge…

Your challenge: accessibility

This works great except for one thing: it is not accessible. Unfortunately, it lacks the basics of accessibility to be able to tab through and make choices without using a mouse.

Here’s the challenge:

How would you redesign the core interaction to be accessible?

Core interaction criteria:

1. There is a memo users need to read.
2. The memo contains blank statements.
3. The choices for each blank statement are the same.
4. Users must select one of these choices for each blank in the memo.
5. The system must be able to remember each choice so they can be scored and stored later.
6. This interaction must be accessible: in the minimum, users must be able to complete it using keyboard only. If the solution also supports screen readers, it is a big plus.

You don’t need to build the prototype but I’d be curious how you approach the challenge.

How was it made?

The core interaction in this example has a couple tricks.

The memo text includes variables. As you can see, each fill-in-the-blank is a separate variable. The default is [Blank]. As the user selects an option, the right variable is set to the selection.

How does the drop-down selection work? The text includes [ v ] characters. The “v” is actually a Webdings character. So, basically, we designate a couple of characters to be link. Then you select those characters to insert a weblink.

But, instead of opening a URL, we execute a JavaScript trigger. After adding multiple of these in the text, you see it’s not too easy to figure out what’s going on in the trigger panel:

([6] is the text we highlighted, and 6 is the code in Webdings for the arrow). Each of these triggers include some JavaScript code:

GetPlayer().SetVar(“click”,-1);
GetPlayer().SetVar(“click”,1);

Two things are happening here. We set the “click” variable to -1 first, and then to 1. This code belongs to the first drop-down. There’s another trigger watching the variable change on “click” on the slide. When the “click” variable changes, the slides opens up a lightbox to show the drop-down selection. The click variable will be used to determine what text variable we ‘re setting. If it’s 1, like in this example, we’ll set the %variable1% in the memo.

The lightbox has the selection for the drop-down. Instead of hardcoding the names of the choices, we’re using a variable for each. Why? Because you could use this method to change up the selection choices if you wanted to. This means the same code and same slide can function as a drop-down for different lists of choices. Smaller build, less debug, more efficiency.

Once you select one of these buttons, then we assign the selected choice to the right variable in the memo text based on the click.

var p = GetPlayer();
var slvar = p.GetVar(“click”);
p.SetVar(“LastChoice”,1);
p.SetVar(“variable”+slvar,p.GetVar(“choice1”))

This happens in a JavaScript trigger on each button. This code above is the one for choice1. We retrieve the value of “click” first so JavaScript knows which memo text to update. Then we update the “variable”+slvar Storyline variable to whatever choice1 is.

Let’s say slvar is 4. That means the user clicked on the 4th drop-down in the text, and we have a variable4 text variable in the memo.

“variable”+slvar executed in JavaScript creates “variable4” and then sets “variable4” to the current value of choice1.

You can probably do all this without JavaScript using conditions and lots of triggers in Storyline. The power of Storyline is that you can manipulate variables easier.

There is also a LastChoice variable set to 1, as the user picked the first choice.

Why not just using hotspots?

Good question. Using hotspots over the drop-down text elements [v] looks like a good idea since hotspots are part of the tab order. The problem is if you replace [blank] in the text with actual content, the text obviously moves but the hotspot does not:

The yellow hotspot rectangle was originally on top of the second [v] but the moment we replaced the first [blank] with “performance objectives,” the text got shuffled but the hotspot did not.

The challenge, again

How would you make the core interaction accessible?