NVDA reads aria-hidden content after dynamic update

Question

I'm working on making my single page HTML5 application more screen reader friendly. The basic structure of the app features static headerbar and navigation menu, and a "main" div element that displays large chunks of dynamically changed "page" data.

Currently I've added the aria-live="assertive" attribute to the main div so that, when the user triggers an event that changes the content of the page, the screen reader will stop reading old content and begin reading new content.

Some of the "pages" feature heavy usage of visual data (charts, graphs, tables), so to relay the data to screen readers more effectively I've used the pattern of hiding a visual element, and instead relaying the info via off screen text.

This works fine when I open the browser and navigate straight to the state these elements are displayed in. However, if I start elsewhere in the application and navigate to this content, NVDA will read the content which should be hidden.

<div id="main" aria-live="assertive"> 
    ...
    <div class="offscreen"> Text describing chart </div>
    <div class="chart" aria-hidden="true"> Graphically drawn chart data... </div>
    ...
</div>

My current best guess is that aria-live is taking precedence over aria-hidden somehow, but was hoping someone would have some more experience, or a better pattern for achieving the desired behavior. I have tried another common technique which involves focusing on the page's heading element after content is rendered, but when doing so NVDA reads only that header, rather than the entirety of the live page content.

(Note: I'm testing using NVDA and FireFox.)

Are you using the latest version of NVDA (2014.something)? Firefox 29+ (current: 30) or a pre-Australis version like 28 or 24 Extended Support Release (ESR)? — FelipeAls

unobf unobf · Accepted Answer · 2014-12-15T00:23:30

Do not use aria-live on your main div. Screen readers have their own ways for users to control what is read and what you are doing is essentially the equivalent of placing a sign over all the content of the app until the user has "read it" (whatever that might mean) before allowing them to use any more of the app.

Focusing on the header IS the right way to do this. You can then use your down arrow key to get NVDA to read more and more of the page. There are also a bunch of other shortcut keys you could use to navigate around for example hitting the h key will take you to the next header. t will take you to the next table etc.

NVDA reads aria-hidden content after dynamic update

1 Answers