Text/number inputs can be tabbed to even if they are on hidden layers or are not active on the timeline.

Sep 22, 2020

I'm trying to find a way to prevent learners from tabbing into a text or number input in a slide. The slide is to progressively reveal more details, depending on what the learner inputs (basically, answering a question correctly will allow the learner to see more slide content). But once the learner progresses, I don't want the learner to be able to access the input they have already entered. Ideally, their input needs to stay visible but would be prepared to display the inputed value via %variable_name%

I have tried:

  • having each of the steps on different layers. However, users on a layer can still tab into an input on a layer that's already been shown. Learners, however, don't seem to be able to tab into an input on a layer that hasn't been shown yet. I have tried not having any inputs on the base layer.
  • having the input only display at a certain time range in the timeline. Learners progress by jumping to certain cue points that are outside the input's time range in the timeline. however, it's still possible to tab into the input even if the timeline has progressed beyond their time range.

Unfortunately I cannot implement multiple slides in this instance since there is an audio track that needs to play as the learner progresses. But I believe this is a bug with tabbing since something that isn't being displayed shouldn't be visible or accessible.

The attached story is the layers version.

(The audio has been replaced with something from youtube audio library lol)

15 Replies
Lauren Connelly

Hello Jhuny!

Thank you for attaching your file! You can control what a screen reader will pick up by unchecking the box next to Object is visible to accessibility tools.

To do this, right-click on an object and choose Accessibility from the drop-down menu. Uncheck the box next to Object is visible to accessibility tools. Here's what this looks like in action.

You can also customize the Tab Order to remove objects as well.

Jhuny Boy Borja

Hi Lauren,

But this is about the input fields, and I need to have them visible to accessibility tools. It's just when I change to another layer (and on the layers I've set 'Hide other slide layers') you can tab back to the input fields on the other layers, even though the layers and hence the objects on those layers shouldn't be visible.

Also notice you can't tab to input fields on layers that you haven't visited yet. I've also attached a new version with a random radio on Part 2 layer. When you get to Part 3, you can't tab to it because it's on a different layer. This is what I think should happen to input fields on that layer.

I'm not concerned with the tables.

Jhuny Boy Borja

And now this is the timeline version. The button jumps the cue point ahead to a point where there isn't an input field or a radio, but you can tab to the input and not the radio.

Maybe it isn't important. But it seems messy and I'm not the only person to notice this.

Lauren Connelly

Hi Jhuny!

Thank you for sharing the extra projects!

When testing your project, I saw that after filling out the first table, the focus shifts from the buttons to the Player Tabs to the browser controls and the table.

There are three reasons for this.

  1. The setting in slide properties to Prevent User from Clicking the Base Layer needs to be checked.
  2. The tables and numeric/text entry fields are below everything else on the timeline. They need to be at the top of the timeline, so the user tabs to them first.
  3.  The Focus Order shows objects on the second layer above the first layer. The Focus Order should represent how the learner will move through the course. 

I've made these changes to Inputs_and_Tabbing_with_radio and attached the updated project. Please let me know if you have any additional questions. 

Jhuny Boy Borja

Hi Lauren,

I'm not concerned about tabbing order right now.

I'm concerned that 'Text/number inputs can be tabbed to even if they are on
hidden layers or are not active on the timeline.'

In any case, it doesn't seem to have changed the fact that the user can
still tab to fields on other slide layers. Keep tabbing (or shift-tab to go
backwards), you will eventually get back to text inputs on slides that
aren't visible. I have set visibility of slide layers to 'hide other slide
layers' so these inputs shouldn't be "visible" (which should also mean
"accessible"). There is a radio button on Part 2 that cannot be tabbed to
unless you're on layer Part 2, which is what I expect should be the
behaviour of text inputs on that layer.

I think at this point it seems that there isn't really a solution here, and
that designers need to just avoid putting text inputs on different layers
so that this anomalous behaviour isn't possible for their projects (or be
okay with it and hope learners don't backwards-tab too far)

Regards,
Jhuny

Jhuny Boy Borja

Hi.

I particularly hate my voice on recordings so sorry for not explaining what's happening in my screen recordings but here's what I'm seeing:

This image shows the Slide Layer Properties for layer Part 2. It shows that the property 'Prevent user from clicking on the base layer' has been set for this layer.

Slide Layer Properties for layer Part 2

This video is of the slide, which I've published in Review https://360.articulate.com/review/content/0cac5714-cbe9-43c8-8335-eb5c64898b54/review 

The same thing also occurs to me when I publish to web. I also tried the Review version on Safari on my Mac.

Once the answers are submitted, the next table appears but tabbing (admittedly a lot of tabs are required) to get all the way back around to the first set of text inputs. I could have gotten there quicker using shift-tab to tab backwards but, either way, the inputs on the previous layer shouldn't be visible or accessible.

This particular activity I'm trying to support the learner to "go back" and change the Additional allocations after they have reflected on their answer. The Core allocations, however are set in stone, they just need to know what they are. The voice over audio explains this, which is why the design of the activity doesn't really allow me to split these up into separate slides, but also why backwards tabbing is important here.

Jhuny Boy Borja

Actually this is still problematic because, on this slide, I do need the base layer to be clickable.

And that doesn't change the fact that the option 'Hide other slide layers' should be the option to set to not allow text input boxes to appear on other slides, not 'Prevent the user from clicking on the case layer'. The label of an option should correspond to its action and, even in this latest version of Storyline, the option 'Hide other slide layers' isn't doing that for tabbing and text input (and your screen recording even demonstrates that, right at the end)

Hopefully the fact that selecting the other option to make the first option work properly means that it can be fixed?

Lauren Connelly

Hello Jhuny!

After looking at the Peek video I recorded, I can see where the numeric entry fields appeared on the Finish Audio Layer. That was one layer where I hadn't changed the settings, so thank you for catching that!

I'm happy to hear that updating Storyline 360 did the trick for the numeric entry fields.

Lastly, Hide Slide Layers will hide all other layers (except the base layer) when the current layer is visible to the learner. Here's a description of each of the options in the Slide Layer Properties. 

Jhuny Boy Borja

NO THIS DOESN'T RESOLVE THE ISSUE!!! You claim that 'Hide Slide Layers will hide all other layers' but, from a tabbing (hence accessibility) point of view, this isn't the case. Your video shows it, and updating Storyline didn't help.

I need the base layer clickable. Please read ALL of my replies.

 

Vincent Scoma

Hi Jhuny,

Happy to share the good news with you! 

We just launched the newest version of Storyline 360 (Build 3.46.23620.0) this morning. This fixed the issue when a layer was set to hide other slide layers, learners could still tab to data-entry fields on the other layers.

The next step is to update Storyline 360 by heading to your Articulate 360 desktop app and clicking "Update" next to Storyline 360.

As always, we are happy to answer any questions you have by posting in this discussion, or you are always welcome to contact Support directly.

This discussion is closed. You can start a new discussion or contact Articulate Support.