Focus Order in Storyline

Last updated: 5/26/2025

Focus order — a.k.a., "tab order" if you're just talking about the order of interactive elements or "reading order" if you're talking about the order of all elements — is controlled in Storyline through the Focus Order panel, available through the Focus Order button in the Home ribbon.

By default, slide elements are arranged in the focus order by layer — that is, layer elements before base layer elements — then Y positional value — lower Y values before higher Y values — then X value — that is, if multiple elements have the same Y value, elements with lower X positional values will be ordered before elements with higher X values.

Storyline also allows you to customize the focus order* and to manipulate focus using techniques like those described below, so you can create the ideal experience for your learners.

*Note: Storyline's Focus Order panel now allows you to select and move multiple elements at once — a major time saver!

Techniques for manipulating focus in Storyline

Now that Storyline provides a trigger action to set focus on a particular slide element, most of the long-standing methods for manipulating focus are no longer necessary; instead, you can just use that set focus trigger action, tied to appropriate When events, to make focus land where it should.

However, these techniques are still worth knowing, as they may be simpler to implement in certain situations, they may lend themselves to other behavior you're trying to achieve or they may serve as alternatives when bugs occur with certain set focus triggers (such as the example described in the next section).

Keep in mind that much of this behavior depends on the Storyline version, the screen reader used and, in less common cases, how the screen reader is used. Make sure to test thoroughly, and try to test representative samples with as many different screen readers and screen reader methods as possible (e.g., reading linearly to a button, tabbing to a button, and using the button menu or jump-to-button command).

If you find a technique is not producing the results you desire, try integrating a set focus trigger, try using a different When event that occurs at essentially the same time (example below) and/or try some of the techniques described ion the Implementing screen reader alerts in Storyline page.

Set focus bugs

At least one bug, described below, has been observed with set focus triggers. If you encounter other bugs with these triggers, try using a different When event that will fire the set focus trigger at essentially the same time but in a way that might bypass the bug. For instance, the example described below uses a "When timeline of layer reaches 0.05 seconds" event instead of a "When layer timeline starts" event, since it essentially occurs at the same time but doesn't instigate the bug. Or, you could try using a "When animation completes" event, similar to what you'll find used in the Technique for forcing the appropriate state to be announced on the Implementing screen reader alerts in Storyline page.

When layer timeline starts not working for set focus triggers

It's been observed that set focus will not work when used in a "When timeline of this layer starts" trigger. This has been observed with both NVDA and JAWS, and when reading linearly to buttons that open layers as well as when tabbing to those buttons.

If you encounter this issue, try using a different When event that will cause the set focus trigger to be fired near the start of a layer's timeline. For instance, iterative testing has found "Set focus when timeline reaches 0.05 seconds" triggers to produce the desired results in most situations.

Prevent the user from clicking on the other layers

This layer property produces a few different behaviors:

  1. It prevents screen readers from being able to read content in other layers, including the base layer
    • Because of this, it's strongly recommended that any layer that uses this property also take measures to ensure non-screen reader users cannot reliably see content in other layers, including the base layer, since non-screen reader users having that ability would then create an inequivalent experience for screen reader users
    • A semi-transparent rectangle, hidden from accessibility tools and employed as the layer's background, is a commonly-used method for ensuring non-screen reader users cannot reliably perceive content in other layers; just make sure no content beneath the rectangle achieves its WCAG color contrast requirement, otherwise it would technically be considered visually perceivable
  2. It prevents all users from being able to click or otherwise engage with content in other layers
  3. It moves focus to the layer element that is highest within the slide's focus order, regardless of where that element is in the focus order relative to other elements
  4. It causes screen readers to automatically read that first element (as a byproduct of focus being moved onto it)
    • This is typically the behavior you want screen reader users to encounter when a layer opens, as it informs them:
      1. That an event has occurred
      2. What element currently has focus

Layers closing

With Prevent the user from clicking on other layers

If a layer has the "Prevent the user from clicking on other layers" layer property assigned to it, when the layer is closed, screen reader focus tends to return to the button used to open the layer; this has been regularly observed with both JAWS and NVDA.

Without Prevent the user from clicking on other layers

If a layer does not have the "Prevent the user from clicking on the other layers" layer property assigned to it, when the layer is closed, screen reader focus tends to return to the top of the slide region; this has been regularly observed with both JAWS and NVDA.

Since that behavior may disrupt the screen reader user experience, forcing those learners to re-read or re-navigate through content they've already encountered, it may be appropriate to utilize a set focus trigger to send focus to an appropriate spot within the focus order when one of these layers is closed.

Disappearing elements

The behavior experienced with disappearing elements has been known to vary based on Storyline version, screen reader and how the screen reader is used, so again, make sure to test thoroughly and adjust your approach accordingly.

All of the behavior described in this section revolves around having a button that has a "Change state of this button to hidden when user clicks this button" trigger, referred to as a "hide self button" in these descriptions.

Example of a button opening a layer and hiding itself, with the layer's first element immediately after the button in the focus order

Disappearing element and layer opening

With both JAWS and NVDA, it's been observed that if a hide self button opens a layer that does not use the "Prevent the user from clicking on other layers" layer property, focus will automatically jump to the next element in the focus order (though, NVDA has been known to occasionally make another announcement first).

Disappearing element with no layer open

If a hide self button does not open a layer, NVDA has still been observed to jump focus to the next element in the focus order when the hide self button is clicked. JAWS, however, has been observed to return focus back to the top of the slide region.

See also within the Checklist