Tab Order does not focus on first item on next layer, but DOES on previous layer

Oct 12, 2019

My Set Up and Desired Behavior: I have a slide with a base layer and five additional layers. Tab Order is custom within each layer, but still has the basic set up of base layer stuff at the bottom, first extra layer above that, second above that, etc.

Problem: When I tab to the next layer using a custom navigation button, the tab order does not focus on the first item in the tab order of the new layer. Instead, when the new layer loads, the screen reader says "button" and I can't see where the focus is. Then if I tab one time, it says "Skip navigation. Press Enter to return to the slide." If I Press Enter, only then does it focus on the first item of the next, newly-loaded layer in the Tab Order. When I tab to the previous layer using a custom navigation button, it works just fine. 

What I Think Is Happening: I believe for some reason, when the Tab Order moves to the next layer (above the current layer items), it is not jumping to the first item in the Tab Order, but just moves up one "notch," so it thinks it's actually right after the last tab item of the next slide. Clearly that's not what it should be doing. It works fine moving to previous slides because the previous slide items are directly below the current layer in the tab order. 

Current Layer Properties:

8 Replies
Lauren Connelly

Hi Robert!

Thank you for including all those details! I can see that our team has logged this as a bug. It seems like when "Prevent the user from clicking the base layer" is checked the tab order isn't followed in a slide layer. Are you able to uncheck that for your course?

When we hear of a fix to this bug, we'll let you know in this discussion.

Leah Dominguez

Has this bug been fixed? I'm finding the same issue with my module. I have 5 layers and no matter how I've set up the tab order, or slide properties, the first object tabbed to on a layer, is the "skip navigation" button, instead of the first button on that layer.

That being said, the keyboard only learner would either have to activate the skip nav button, or tab through all the player objects in order to get to the slide buttons. Frustrating that I can't get this to work and may have to bag the entire design. 

Leah Dominguez

I was actually (finally) able to figure out how to get the layers to flow correctly. I’m not sure why I didn’t think of this before, but the default focus (tab) order is listed from the top layer down to the base layer. If you reverse the order (base layer at the top of the focus order) the tab order works correctly.

 When you show a layer, it will tab to the first button on that layer, rather than to the skip nav. 

Katie Riggio

Hi Leah!

I appreciate you sharing your insight!

We're still looking into this behavior, so I'll share your notes with the team for review and circle back with any new info.

Related Resources:

Becca Levan

Hello Everyone!

I'm happy to return to this discussion with an update!

Today, we released Storyline 360 Update 50! Here are the features and fixes released in this update. You’ll see that the update includes a fix for the bug you reported:

  • Keyboard tabbing does not follow Tab Order in a Layer when Slide Layer Property "Prevent the user from clicking on the base layer" is Checked.

Now all you need to do is update Storyline 360 in your Articulate 360 desktop app! Thank you for taking the time to report this bug to us.

Alain Dumais

Moi aussi je rencontre présentement ce problème avec certains modules qui sautent parfois le premier élément dans le focus order du layer pour aller directement au deuxième. Mais j'ai peut-être trouvé un début de solution qui pourrait aider. 

Je crois comprendre que la navigation par TAB cherche principalement les éléments cliquables. Alors, si le focus order dans nos layers débute par une zone de texte suivie d'un bouton; c'en est foutu pour l'arrêt sur la zone de texte numéro 1... Mais on peut contourner cette impasse si: 

  • Dans la chronologie (timeline), placer l'élément à lire en premier en haut de la liste. Au besoin, mettre aussi les autres éléments de la liste en ordre de "lecture" (haut > bas).
  • Si on ne peut pas (par exemple l'objet en masquerait un autre), ou que ça ne fonctionne pas mieux, dessiner une forme à placer sur l'élément ignoré, la mettre transparente (mettre "Aucun remplissage" ne fonctionnera pas) ; au besoin lui ajouter le Alt text de l'élément ignoré, et la placer dans le haut de la chronologie (évidemment, ne pas oublier de la placer aussi comme premier focus du layer ;-). 

    J'ai aussi alterné l'ordre des calques de diapositives, mais ça n'a eu aucun impact pour le moment.

Sans être l'idéal - mes premiers essais me semblent prometteurs pour régler provisoirement la situation de certains de ces cas problématiques. 

Anyways, si vous avez d'autres solutions plus élégantes, je suis preneur :-)