Forum Discussion

BryanVarner's avatar
BryanVarner
Community Member
7 months 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 th...
  • SamHill's avatar
    SamHill
    7 months 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.