Screen reader to read list information in toggled content

Question

I have this menu whose items toggle a dropdown under it. These dropdowns are initially hidden and can contain anything, sub-menus mostly. Being initially hidden, the contents of the dropdowns aren't read during the screen reader's initial pass on page load - this is fine.

During page load, the screen reader reads the entire page. It reads when you enter and exit regions, lists, etc. Visible menus on other regions of the page are read like:

Navigation region, List of N items...

followed by every item in the list.

The problem: When I open the dropdowns and tab through the menus within them, the screen reader does not read the dropdown content the same way as during page load. When tabbing in, it simply reads the focused item. When aria-live is set and the dropdown is toggled, it reads the entire dropdown like one long concatenated string.

How do I do it so that upon toggling of the dropdown, the screen reader reads all the content of the dropdown in the same way as it did during pageload?

Answer 1

Reading an entire page when it's loaded is a screen reader option. Not all screen readers do it, and those that do might not have the option on by default. The user might have to turn it on.

When a menu is expanded/displayed, it shouldn't read all the items. The screen reader user would not expect that so you shouldn't force it.

As long as your menu is coded semantically, the screen reader user will be fine. Note that if your menu is for navigation (ie, the items in the menu take you to other pages), the role="menu" should not be used. The "menu" role is more for application-type menus (like old school File, Edit, View, Help, etc) and if you use that role, then you also have to implement keyboard navigation using the arrow keys (just like application menus work).

For navigation menus, having your submenu items in a list (<ul>) is usually sufficent. See the W3 tutorial on accessible navigation menus.