Accessibility and states

Hi JonathanLove-fd you will run into problems as Storyline doesn't provide a way to control the focus, only the focus order. When changing states of an element with text, you are not necessarily going "focus" on the new state.

Rather than using states of an element, you might be better of relying on changing visibility of different elements, and then managing the focus order of those elements.

The only reliable way I have been able to do this in the past, where the interaction has gone beyond the capability of Storyline, is to use a JavaScript solution which I'll share with you.

The following function would be defined in your Master Template so that it is available globally (trigger would be timeline start).

// Check if function has been defined already
if (typeof window.setFocus === "undefined") {
    // Get reference to the Storyline Player
    var $player = GetPlayer();
    // Set the amount of time to delay before attempting to send focus to the target element (milliseconds) 1000 = 1 second.
    var $interval = 100; // 
    window.setFocus = function ($target) {
        // Get the target element, based on the passed argument
        var $target = document.querySelector('[data-acc-text^="' + $target + '"]');
        var $id = "acc-" + $target.dataset.modelId
        $target = document.getElementById($id);
        // Send focus to target, after defined $interval
        setTimeout(function () {
            $target.focus();
        }, $interval);
    }
}

Once the function is defined in your Master Template, you can then call the function on the page using a JavaScript function, which can be triggered by a button.

The argument, which is passed in the "" quotes, is the text contents of the text field you are targeting. You do not have to include all the text, just enough to ensure it is unique.

For example, if you have two text fields:

1. "Customer in the queue talking on their phone."
2. "Customer in the shop staring into space."

Passing the words "Customer in the" would not be specific enough, as there would be two text fields found. However, passing "Customer in the queue" would send the focus to the text field "Customer in the queue talking on their phone."

window.setFocus("Customer in the queue");

If you do not want to use Java Script, you could use two buttons instead of one which are in the same position and size. You would control the visibility of the buttons in the same way that you would control the states. In the focus order, you can have the order arranged however you would like.