Dropdown switcher for large tables - accessibility for screen reader users

Question

We've implemented a content switcher using a native dropdown select element, which switches between HTML tables directly underneath. This is to be used inside blog posts, with various table content relevant to the post. The table will be switched out immediately using JavaScript upon selecting an option from the dropdown. Simplified code below for illustration. We're using React but I don't think that affects the question.

 <div className={styles.csvList}> <label for="csv-table-selector">{label}</label> <Dropdown {...}/> {selectedTable && ( <div id="selected-csv-table" role="region" aria-live="polite"> <h2> {selectedTable.name} <h2> <Table {...}/> </div> )} </div>

Right now we're using a 'polite' aria live region containing the table, which will start to read the whole table out when the table changes. This is very similar to the Mozilla Docs implementation example for live regions.

Is there a limit for the amount of content which is sensible to keep in a live region? I couldn't find any resources anywhere online with guidance for when content is 'too much'. With tables, my assumption was that the screen reader user would prefer to navigate them manually rather than have the whole thing read out.

I also considered having a visually hidden live region, which will read out something like 'Table was updated below' when the table is changed. Is this more desirable than the whole table being in a live region?

Is this design doomed to be confusing for screen reader users? I'm aware that the 'tabs' design pattern is more usually used for this kind of scenario, so was wondering if we should abandon the dropdown switcher idea and go with that instead.

Answer 1

Yes, I would definitely recommend applying the Tabpanel Pattern as this will simplify work for you, and the users.

Because expectation is simply that when the active tab changes, the immediately following content changed. No additional announcement is necessary.

Solution with Dropdown, Without Live Region

If you still would like to use the dropdown, the expected behaviour would still be somewhat similar.

Instead of announcing that content change somewhere on the page, you would guide the user directly to the switched table by setting focus on it. Of course the table has an accessible name.

This way you wont ask the user to navigate themselves, after the announcement, but it's already done.