Forum Discussion

IanDunin-Mar358's avatar
IanDunin-Mar358
Community Member
2 months ago

Storyline Set Focus feature and accessibility

I'm creating green screen system simulations that require the learner to input text into a field.

For learners not using a screen reader:

Ideally, upon entering the slide I want the cursor to be active within the input field (learner doesn't have to click in it). I achieved this in the past by having the input field the lowest object on the timeline.

With the 3/18/2025 update, these simulation no longer work. The learner has to click the field for the cursor to become active.

With this update, if I don't manually set the focus order, how is the focus order determined?

For learners using a screen reader:

If I manually set the focus to the input field, the screen reader focus order flow is overridden (the reader reads the the input field first, before any learner instructions that reside high in the focus order).

Is there a way to accommodate both types of learners? 

3 Replies

  • Hi IanDunin-Mar358 it is not possible to detect if a user is using assistive technology such as a screen reader. 

    If you do not customise the focus/reading order, it is determined by the position of the elements on the slide moving from top left to bottom right. Firs the Y axis is used. Elements closest to zero are read/focussed first. Then X axis is then used to determine which element is read before the next (left to right).

     

  • Nedim's avatar
    Nedim
    Community Member

    There have been some changes in the latest Storyline update, particularly with the newly introduced "Set focus" trigger. Without going into too much detail, you can read more about it in the official Storyline support article.

    I also confirm that the workaround you mentioned in your post is no longer working. However, a small JavaScript snippet can replicate the same functionality without using the "Set focus" trigger.

    Try executing the following JavaScript code when the timeline starts on a slide.

    var input = document.querySelector('.acc-textinput');
    setTimeout(() => {
      input.focus();
    }, 100);

     

    • IanDunin-Mar358's avatar
      IanDunin-Mar358
      Community Member

      That doesn't seem to work. While the cursor does appear in the text field, for those using a screen reader the instructions in the focus order are skipped.