Forum Discussion

SamHill's avatar
SamHill
Super Hero
7 months ago

[REDUNDANT] Storyline custom focus control

=========================================================================

Update 18 March 2025

This functionality is now redundant. Please use the native focus trigger in Storyline 360 64 bit March 18, 2025 (Build 3.98.34222.0)

=========================================================================

There have many been times, when using Storyline to develop content, it has not been possible to get the kind of screen reader focus control that I have needed. Using layers for this can only get you so far.

I developed a JavaScript function that allows you to send the screen reader focus to the text field that you want, via any trigger.

Adding the following JavaScript to your projects Slide Master will make it available throughout your module:


// 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 = 200; // 
    window.setFocus = function ($target, $announce = false) {
        // Get the target element, based on the passed argument
        setTimeout(function () {
	        var $div = document.querySelector('[data-acc-text^="' + $target + '"]');
	        var $id = "acc-" + $div.dataset.modelId
	        $div = document.getElementById($id);
	        if($announce) 
	        {
	            $div.setAttribute("aria-atomic", "true");
	            $div.setAttribute("aria-live", "assertive");
	        }
        	// Send focus to target, after defined $interval
            $div.focus();
        }, $interval);
    }
}

Once the function is defined in your Slide Master, you can then call the function on the page using a JavaScript function, which can be triggered by any Storyline trigger such as timeline start, timeline end, button click etc.

// The second argument will determine if the content should
// be announced to assistive technology using aria-live=assertive
// This will announce the text contents to the screen reader
window.setFocus("Customer in the queue", true);
// This will just send focus to the element.
window.setFocus("Customer in the queue", false);

The first 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 that contains the text "Customer in the queue talking on their phone."

The second argument (true or false) determines if the target elements contents should be announced to the screen reader when it receives focus.

9 Replies

  • Amazing... 🤩 - we have wanted this for some time, what a great solution. I wish 'set focus' was a trigger in SL.

    • SamHill's avatar
      SamHill
      Super Hero

      "I wish 'set focus' was a trigger in SL." - yes, I came from Lectora, years ago, and this was something that Lectora did well. Definitely something I've missed as the implementation wouldn't be a big stretch for them.

  • KevWhite's avatar
    KevWhite
    Community Member

    Hey Sam, Good show!

    How can we amend this script to work with any "button." 

    • SamHill's avatar
      SamHill
      Super Hero

      Hi KevWhite as long as you can specify a unique target, it will work for any element.

    • SamHill's avatar
      SamHill
      Super Hero

      Yes, if you target an element on the layer. You can add the window.setFocus call to timeline start on the layer.