This page is in response to the article on Drupal Groups Accessibility Do we want to keep using HTML List elements for site navigation?".
Lists are ubiquitus, easy to code, can be flexably styled, and provide visual nesting for free. Via screen reader their presentation can be verbose, but not much more verbose than proper use of div/span navigation with subnav indicated via nav or role="navigation".
Click the button to show how Jaws renders standard list navigation, navigation using divs and spans, and navigation using div/span with additional headings to indicate nesting. In my opinion, all are similarly verbose. WHether to use lists is not the real issue; the issue for me as a screen reader user is how to indicate nesting, and allow easy movement through the structure. Coding real menus using roles menu and menuitem is one way to solve this, however the author is responsible for explicitly creating all keyboard navigation, which is a huge pain and often does not work well. It also requires mode switching on screen readers which use virtual buffers (like both Jaws and NVDA on windows).
You can label with aria-labelledby, but this requires id attributes which must be unique on a page, so if you require two navigation menu structures on the same page, then you need to generate id prefixes as well which quickly becomes burdensome. Also, the aria spec does not allow labels on anything except form fields, so labelling regions in this manner is only supported by Jaws, which is highly unfortunate.
I've posted a demo which shows nested menus using lists with the addition of headings to indicate structure. This scheme has the added advantage of allowing the user to navigate via next/previous heading to easily see where she is in the tree. The subnav trees are collapsible. What I cannot do is properly code the CSS to make this visually appealing, but in my opinion, this would be a good way to code complex deeply nested navigation. Of course an alternative is to never require deeply nested navigation in the first place. All pages should have two navigation lists on them: the site-wide nav, and pages directly reachable from this page. If a deeply nested menu structure is desired for easy visual navigation, then hide it with aria-hidden="true".
Note: in the text which appears below, links are not indicated with the understanding that all navigation items are anchors and would be identified as such by a screen reader. Note also that, although the presentation seems extremely verbose, much of this text is added by the screen reader on the fly, and keyboard commands are generally used to navigate quickly through the presentation. Screen reader users also tend to set speech rate rather high.
Navigation using html lists navigation region list of 3 items Home Admin list of 2 items nesting level 1 Access Control list of 2 items nesting level 2 Manage Users Manage Groups list end nesting level 2 Manage Content list of 2 items nesting level 2 Manage Pages Multimedia list end nesting level 2 list end nesting level 1 About list end navigation region end Navigation using only div and span navigation region Home Admin navigation region Access Control navigation region Manage Users Manage Groups navigation region end Manage Content navigation region Manage Pages Multimedia navigation region end navigation region end About navigation region end Adding headings to indicate nesting navigation region Home heading level 3, Admin navigation region heading level 4, Access Control navigation region Manage Users Manage Groups navigation region end heading level 4, Manage Content navigation region Manage Pages Multimedia navigation region end navigation region end About navigation region end