javascript - NVDA reads aria-hidden content after dynamic update -

javascript - NVDA reads aria-hidden content after dynamic update -

i'm working on making single page html5 application more screen reader friendly. basic construction of app features static headerbar , navigation menu, , "main" div element displays big chunks of dynamically changed "page" data.

currently i've added aria-live="assertive" attribute main div that, when user triggers event changes content of page, screen reader stop reading old content , begin reading new content.

some of "pages" feature heavy usage of visual info (charts, graphs, tables), relay info screen readers more i've used pattern of hiding visual element, , instead relaying info via off screen text.

this works fine when open browser , navigate straight state these elements displayed in. however, if start elsewhere in application , navigate content, nvda read content should 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 aria-live taking precedence on aria-hidden somehow, hoping have more experience, or improve pattern achieving desired behavior. have tried mutual technique involves focusing on page's heading element after content rendered, when doing nvda reads only header, rather entirety of live page content.

(note: i'm testing using nvda , firefox.)

do not utilize aria-live on main div. screen readers have own ways users command read , doing equivalent of placing sign on content of app until user has "read it" (whatever might mean) before allowing them utilize more of app.

focusing on header right way this. can utilize downwards arrow key nvda read more , more of page. there bunch of other shortcut keys utilize navigate around illustration hitting h key take next header. t take next table etc.

javascript html5 accessibility single-page-application wai-aria