Forum Discussion

JonathanLove-fd's avatar
JonathanLove-fd
Community Member
5 days ago

Accessibility and states

Hello! hoping someone can help or point me in the right direction.

I have a colleague that has created text that changes depending on the state. How can the text box appear again in the focus order? 

For example:
'Button one' changes 'text box' state to 'hello'; 'button two' changes 'text box' state to 'goodbye'.

I want the focus order to be Button one, text box, button two, text box. Is this possible for screen readers to hear both 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");

     

  • DonnaEMulder's avatar
    DonnaEMulder
    Community Member

    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.