Bad aria-label values for sidebar nav

[terrill]

Sidebar navigation regions have bad values of the aria-label attribute. For example, as observed on the live Creating Accessible Documents page, there are two sidebar widgets contained within div#sidebar:

• nav#desktop-relative - this contains the navigation menu for the current section of the website (on the example page, "Creating Accessible Documents". It currently has aria-label="mobile menu that is not visible in the desktop version". This is too much information, plus it's incorrect - I'm observing on the desktop version.
• div#nav_menu-2 - this contains the site-wide navigation. It has role="navigation" and aria-label="sidebar_navigation".

In both cases, the navigation menu is preceded by a title. In the first menu the title is tagged as a span; in the second menu it's tagged as an h2. The solution for labeling both navigation regions (or any other like them) involves two steps:

1. Add a unique id attribute to the element that contains the widget title.
2. For the nav element (or div with role="navigation"), replace aria-label with aria-labelledby. The value of aria-labelledby should match the id of its title.

[lcaple]

@terrill thank you for these! I'll get them in our bug list.

nav#desktop-relative is used, but is only populated on pages using WordPress to automatically generate sidebar menus. Here's an example page. Its aria description is actually inaccurate: that menu is visible both on desktop and mobile. I think the label is mixed up with the mobile menu. I'll get this adjusted as well.

[terrill]

Thanks @lcaple - I developed a better understanding of how these are used after I submitted my original issue. I've just edited that with new details, including a proposed solution.

[terrill]

In the new theme, I'm still seeing the first of the original problems I reported, but the second one has changed. Here's the current state:

• The <nav> that contains the main navigation has no aria-label. It should have something like aria-label="Main menu".
• The entire banner (header#masthead) contains a <nav> as its sole child. This creates an extra level that screen reader users need to navigate. Users expect there to be links in a banner, so it doesn't need a <nav>. That should be changed to a <div>. If that's potentially problematic, a simpler solution that will only affect screen reader users is to add role="presentation" to the <nav>, which removes its semantics.
• nav#desktop-relative still has aria-label="mobile menu that is not visible in the desktop version" (observed on a desktop)

[lcaple]

Is this update related to the New theme, or the old theme? I want to make sure to copy it to the correct queue if this is based on the new theme.

[terrill]

The issue I originally documented here was related to the old theme - I just now confirmed that those problems still exist.

My most recent comment applies to the new theme.