Forum Discussion

BryanVarner's avatar
BryanVarner
Community Member
25 days ago
Solved

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.

  • SamHill's avatar
    SamHill
    21 days ago

    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.

  • 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?

  • BryanVarner's avatar
    BryanVarner
    Community Member

    Attached. I've tested with NVDA and JAWS. Thanks for taking a look!

    • StevenBenassi's avatar
      StevenBenassi
      Staff

      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.

    • SamHill's avatar
      SamHill
      Super 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.

      • BryanVarner's avatar
        BryanVarner
        Community Member

        Interesting, thanks for figuring that out. Is there a solution for this or is that how tables typically behave in Articulate?