Forum Discussion
Screen Reader accessing layers that aren't active
I have an activity that I'm trying to make accessible. In testing with a screen reader, the up and down arrow keys are accessing layers that aren't active.
On the base layer I have a few buttons that open up other layers. The layers all have the "Prevent the user from clicking on the other layers" checked. This prevents the user from tabbing to inactive layers, but the screen reader will still cycle through the elements of some other layers (not all) with the arrow keys.
This is the activity and the slide I've done the focus order for is Experiment>Experiment Introduction https://360.articulate.com/review/content/1e0465d4-374c-4c8e-9425-54c09e55d602/review
I attached the Focus Order as well. The Data & Observations slide layer seems to be the main problem.
Hi BryanVarner this is a Storyline bug and will hopefully be fixed quickly, as it is a serious accessibility bug. The table element should behave as all other elements do. I'm not sure why it is missing the aria-hidden attribute.
A hotfix solution for this would require JavaScript. I might be able to help you out if you are potentially delivering this before a proper fix comes through.
If you are interested, here's some script.
Add this to the main timeline and execute JavaScript on timeline start:
rmLocalHideTable = function(hidden, attempt) { let tries = attempt || 0; const observations = document.querySelector('table[aria-label="Table with 3 columns and 12 rows"]'); // table not found, try again if(observations === null) { if(tries !== 10) { tries += 1; setTimeout(function(){ rmLocalHideTable(hidden, tries); },100); } }else{ // table found, set aria-hidden attribute observations.setAttribute('aria-hidden',hidden); } } window.rmHideTable = function(hidden, attempt) { // add delay before running to ensure any // conflicting scripts have time to run first setTimeout(function(){ rmLocalHideTable(hidden, attempt); },500); }
You can then call the following JavaScript functions to show/hide the table for screen readers:
Whenever the Data & Observations Layer layer opens, run this function:
// Make available for screen readers window.rmHideTable(false);
Whenever the Data & Observations Layer layer is hidden, run this function:
// Hide from screen readers window.rmHideTable(true);
I have added to your file as an example.
- SamHillSuper Hero
Hi BryanVarner are you able to share the *.story file (just the single slide) so that I can check the settings on it. Also, can you confirm which screen reader you are using?
- BryanVarnerCommunity Member
Attached. I've tested with NVDA and JAWS. Thanks for taking a look!
Hi BryanVarner!
Glad to see Sam has been helping you!
Thank you for sharing your file. This is a very impressive design! I would like our support engineers to have a closer look at the behavior you described, so I've opened a support case on your behalf. You're in excellent hands troubleshooting with them, and they should be connecting with you via e-mail shortly!
Let's continue the conversation through your case to keep all information in one spot.
- SamHillSuper Hero
Hi StevenBenassi and BryanVarner
I can confirm I have been able to replicate the behaviour and have identified the issue.
The layer that appears to be the problem is labelled Data & Observations Layer.
After inspecting the HTML I can see that all elements within the layer, when the layer is hidden, correctly have the aria-hidden=true attribute applied, apart from the table.
The table does not have the aria-hidden attribute defined at all, therefore this element remains visible to screen readers even when visually hidden.
- BryanVarnerCommunity Member
Interesting, thanks for figuring that out. Is there a solution for this or is that how tables typically behave in Articulate?