Tab order focus is not working on objects on layers

Jun 25, 2020

Sudipta De
By Sudipta De

I am facing an accessibility compliant issue - tab focus is not working for objects on layers. I have click-to-reveal interactivities in my project, where my buttons are on the base layer and the texts to be revealed are on different layers on top of the base layer. I can tab through my base layer objects and activate the button (by hitting Enter/Spacebar) and the object on the layer pops up, but without the focus (the yellow border) and as a result, the screen reader doesn't read the revealed text. 

I have attached a sample file of this issue, where I need the text "abc" which is on a layer, to be in focus after it is revealed so that the screen reader can read the information. Looking forward to suggestions to make this work.

Thank you!

5 Replies
Sam Hill
almost 4 years ago06/26/20 at 12:30 am (UTC)

Hi Sudipta, layers can be a little confusing when it comes to accessibility.

I can see the reason you are having trouble with the layer in this instance, is simply the Tab Order.

The Layer in its current configuration, is simply adding to the slide, and because the content is above the the Show Layer button, the content actually is accessed before the Show Layer button in terms of accessing the content with the Screen Reader.

To address the issue, go to the Tab Order configuration, and shift the button that triggers the layer, above the two items in the layer that is to be shown. The content can then be accessed in the order you want, using the arrow keys.

If you want the layer to behave more like a Modal window, you need to select the Layer property "Prevent the user from clicking the base layer". Not only does this prevent the user from clicking on anything but the current layer, it means that screen readers will only see what is in the current layer. In this instance, the Tab Order is not as important, and you only need to be concerned about the order of elements within the current Layer, as objects in the base (and other layers) are excluded.

Sudipta De
almost 4 years ago06/26/20 at 1:36 am (UTC)

Thanks, Sam for taking the time to look at the file and for the suggestions. Yes, my primary concern is to make the screen reader read the information on the layer. I tried reordering the objects in the tab order configuration but that didn't work for me. I also tried unchecking the option 'Prevent user from clicking base layer' even so couldn't get the screenreader read my content on that layer.

At present, I can only get my layer texts read out if they are a part of any interaction like buttons. 

Sam Hill
almost 4 years ago06/26/20 at 2:08 am (UTC)

Hi Sudipta, which screen reader are you using? I tested with JAWS and NVDA and have good results. Can I also confirm that you are using the Arrow keys to navigate text content and not the Tab key. The Tab key is not only reserved for accessing interactive content and the arrow keys are used for navigating all other content.

Sudipta De
almost 4 years ago06/30/20 at 2:42 pm (UTC)

Thanks, Sam! I am using JAWS. I re-tested using arrow keys after your suggestion and it readout the text on the layer. Though it would have been ideal for our project to have the text read upon activating (clicking) the reveal button, but, it's good to have it some way than nothing at all!!  

I appreciate your help! Thanks, again!

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