Screen readers and layers

Jun 22, 2020

I am working on a project that we are testing for accessibility using NVDA and JAWS.
A lot of the information we are providing is using buttons that reveal layers. 

The problem we are having is that there doesn't seem to be any way for the screen reader to automatically read the information on these layers. With the latest updates to Storyline, navigation using a screen reader is with the standard keyboard navigation, the down arrow or insert down arrow to read all text on a page.

When someone activates a button and a new layer appears there is no indicator that there is new information on the page that needs to be read by the screen reader. 

As a sighted person I can see that the screen has changed, and I am able to select insert down arrow to hear the new information - someone who requires this software cannot do this.

Is there something I am missing from the build process or are layers not usable with screen readers?

19 Replies
Sam Hill

Hi Emma, the only way to force the screen reader to read new layers is to select the slide property that prevents the user from clicking on the base layer. This exclusivity seems to trigger the content to be read. You then have a new problem to overcome in that the base cannot be selected, and so you might have to add some duplicated items to the layer (navigation etc).

I agree that this is a little annoying. Coming from a hand coding background, we could add directive to content to force it to be read such as aria-live="assertive". The only other suggestion would be to add screen reader only instructions to let users know they must navigate down with their arrow keys to read the content. 

Diane Bullock

This post is 2 years old. I still have this problem (screenreader not reading layers, or if it does the base layer buttons can't be used). Has the new version not addressed this?

The templates you have available are not accessible. If they are not taken down or modified to be so, they just create problems, especially new users. They create all of us lots of extra work. As least they could come with a warning!

Diane Bullock

still not resolved, so some input here if anyone knows anything would be helpful. It seems, that the layer 'fault' is still there as per the first post. I can't get NVDA screenreader to read a layer at all (unless it's Dialogue - which I can't use as the buttons on the base layer aren't active). 
I'm wondering if a cheat would work? My layer text is short, if I added this as alt text to the button, or a hidden graphic, could that be a solution?

Or, should layers be avoided for this reason altogether and instead we jump to another slide, or work with text blocks with state of hidden/normal? All seems to be getting very complicated

 

Sam Hill

Hi Diane, the screen reader should still be able to access layer content even if it is not a dialogue box or the user can't interact with the base layer.

Can you confirm that you have the layer contents in the correct order in the focus order or the slide. For example, if you have a button that is selected that reveals the layer, is the layer contents directly after the button that is selected?

Also, I have found animating text in on a layer can be problematic, and so if you are fading text in or introducing the text later on in the timeline of a layer, try removing any animation and have the content at the start of the timeline.

Let me know.

Tanudja Gibson

Hi Sam,

What do you mean by "Screen-reader only instructions"? Is this some special way of interacting with a screen reader or do you mean just add a text box that says "navigate down with arrow keys to read the content that just appeared on the layer"? Won't all learners see this though? That's a lot of real estate if you have multiple layers. Thanks

Sam Hill

Hi Tanudja,

You can add instructions that only a screen reader can access. This could be a text field with instructions that is off screen, but still within the correct order in the focus order. The text can also be hidden behind elements on screen so as not to be seen by people who do not need the instruction.

Cheers,
Sam

Nicole Edwards

Hello everyone,

I am working on a project that has a button function that directs learners through a scenario. Some of the pages have multiple layers that should only be "visible" based on the role selected at the beginning of the scenario. My question is will a screen reader read all of the layers on the page or only the layer that is associated with the role selected? I hope that makes sense.

Steven Benassi

Hi Nicole!

Sounds like a fun project!

The screen reader will only read what’s active on the screen. If a layer is currently “hidden”, then the screen reader will not read the content.

We have a resource that explains how to create and test an accessible course with a screen reader! You can find it here: Accessible E-Learning & Screen Readers: What You Need to Know

 Please let me know if you have any further questions.

Brandy Sims

Seem a lot of us are still having this same issue (3yrs and counting) in that screen readers are not reading the triggered slide layer when selected. I've been searching for a solution for several days now and have yet to find a fix or solution. 


I have a simple slide with 6 buttons. When a button is selected, it shows the corresponding layer item from the slide layer. Yes, focus order is good and shows the proper slide layer visible but JAWS and even built-in browser readers will not read it. 

Steven Benassi

Hi Brandy!

Sorry to hear the JAWS screen reader is not announcing your triggered slide layers!

Just to clarify, are you interacting with the button layers via the keyboard and yet the screen reader is not announcing the text? Or were you expecting the layer to be automatically read by the screen reader as soon as the trigger activates? 

It would be helpful to see a screen recording of the behavior, or the .story file itself so we can test the behavior on our end. Feel free to upload a copy here in the discussion or privately through a support case.

Looking forward to hearing from you!

Brandy Sims

I have a course that is about to go live and at the moment will not pass 508 compliance.
Background: I have a course in Rise360 with 1-storyline block. 
Issue: For starters, the screen reader skips past my storyline block altogether.
Additionally, once inside the storyline block, and you select the button, the slide layer is not accessible to screen readers when button is clicked.

Any help on this is greatly appreciated.

Leslie McKerchie

Hi Brandy,

I appreciate you sharing what you are currently experiencing in your course and for the link to the course in Review 360. 

I could locate a Storyline block in Lesson 3, so I looked at this one using NVDA in Chrome.

I am able to see the layer content change on the mobile device screen on the right and the content is read to me by the screen reader.

Here's a snippet of the text viewer (ignore where I went to the toxic button a couple of times to get my bearings):

So, I have a few questions:

  • What screen reader and browser are you using to test?
  • How are you navigating the content?
    • You mentioned the screen reader skips past my storyline block altogether, but I cannot replicate this behavior by using tab navigation or the down arrow.
    • You also mentioned, that once inside the storyline block, and you select the button, the slide layer is not accessible to screen readers when the button is clicked.
      • Is the content changing, or is the layer not being activated? If the content changes, use the down arrow to listen to the layer content.

I also wanted to mention that your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.