Add ARIA support to menu toggle for improved accessibility

[davidakennedy]

I'd like to propose that we add ARIA to the Primary Menu toggle and the associated ul that gets expanded or collapsed as a result.

Here is a good primer on ARIA.

I'd like to add these attributes:

• aria-controls
• aria-label
• aria-labeledby
• aria-hidden
• aria-expanded

I built a quick prototype on CodePen.

I figured a quick demo was better so we can discuss if need be, and it's probably better to wait on a PR until #540 is sorted.

Explaining the prototype:

• I add the ARIA attributes with JavaScript. Since they need to be changed with JS anyway, this makes sense, plus it keeps the markup in our header.php a bit cleaner. That makes it easier to remove the toggle if a theme author does not need it.
• There is varying support for ARIA depending on the assisitive technology and browser used, but it doesn't hurt to use any of it. It's valid HTML5 and support will only improve.

Markup:

• aria-label="Toggle Primary Menu": Adds a label to the button. Notice it says, toggle, which is more descriptive of what it does than it's visual label. Screen readers with support will announce this rather than text. Helpful, especially if using an icon as the button.
• aria-labelledby="menu-toggle": Maps the button label of element it's label.
• aria-controls="menu": Maps buttons functionality to the thing it's controlling.
• aria-expanded="true": Or false. Is this thing expanded or not? Screen readers with support will announce this, like: "Toggle Primary Menu button expanded"
• aria-hidden="true": Or false. Is this thing hidden or not?

One thing I'm still researching: Whether I need both aria-hidden and aria-expanded. In this case, it may be better to use just aria-expanded.

I'm open to suggestions and improvements, and of course, whether this should be included in _s.

I think it makes sense as long as we're providing a basic toggle. This would improve the accessibility of the toggle functionality, and provide a nice example to theme developers.

[samikeijonen]

Yes please! I assume you have also checked these menus.

http://a11yproject.com/patterns/

String Toggle Primary Menu should also be internationalize using wp_localize_script.

[davidakennedy]

@samikeijonen Great feedback! Yes, I actually took a good bit of inspiration and code from the menu listed on the Accessibility Project. I'm also looking at the toggle on the Paciello Group's recent redesign.

Great reminder on localizing the string – I'll definitely incorporate that into my eventual PR.

I'm also gathering some feedback from other WordPress Accessibility team members.

[davidakennedy]

After talking with other members of the WordPress Accessibility team, I've simplified my prototype a bit.

I've removed the aria-label, relying on the text for the button alone instead. I used the aria-label because the majority of sites I see just have a button that says "Menu" or has an icon with no text alternative. This was my way of helping that to be better, but it is probably too heavy-handed. Also, we don't need aria-hidden, since aria-expanded takes care of things.

New version: http://codepen.io/davidakennedy/pen/aqhys

It's much lighter, which I think is better for a starter theme, like Underscores.

[chrisdc]

I've been doing a little testing in Chrome with the ChromeVox screen reader and this seems to work well. I can provide more specific information on how ChromeVox handles this if it's useful.

[chrisdc]

At the moment aria-expanded is false by default and only changed when the button is pressed. Would we need some kind of event or check to switch this to true (if not on the button then at least on the menu itself) if the menu is displayed in full on larger screens?

[obenland]

Fixed in e142af3.

[davidakennedy]

Just to note: I tested e142af3 and it works well from an accessibility standpoint.