Twenty Fourteen: Menu not keyboard accessible at narrower screen widths

[GrahamArmfield]

Using the Twenty Fourteen theme on full width screens is fine and the primary menu/submenus are all keyboard operable.

However, at screen widths less than 783 pixels, the main navigation disappears to be replaced with a 'Hamburger menu' icon. This icon cannot get focus so the main site navigation becomes inaccessible to keyboard users and thus screen reader users also.

To fix this, the menu toggle needs to become a button or a link - something that can receive focus and announce what it's for.

[jartes]

Changed <h1> tag to <button> tag to make it focusable. Also added some styles to overwrite the button styles that are inherited from generic css rules.

Maybe an aria-label attribute with some text, such as "Show Primary Menu", will help to know what this button does.

[GrahamArmfield]

Believe patch needs refresh - unable to test.

[joedolson]

This seems to work fine, but it was impossible to tell whether the button was focused using a keyboard-driven small device, to I also added :hover/:focus styles for the button.

:hover/:focus background of #444 + a dotted outline on :focus.

[joedolson]

Update to previous patch; add :focus

[joedolson]

Update to 27147.2; this time actually having been saved.

[GrahamArmfield]

Have tested this using NVDA 2013.3 on Firefox 27 and it works for me. I can tab to the Menu button and it shows a nice visible focus indication. NVDA also voices appropriate words so that a user understands what the button is for.

[lancewillett]

Thanks GrahamArmfield for your first bug report! This is great.

[lancewillett]

In 27594:

Twenty Fourteen: make small-screen menu accessible to keyboard commands and voice-driven software by using a focusable button element rather than h1 for the toggle element. Fixes #27147, props jartes and joedolson.