Opened 11 years ago
Closed 11 years ago
#27147 closed defect (bug) (fixed)
Twenty Fourteen: Menu not keyboard accessible at narrower screen widths
Reported by: | GrahamArmfield | Owned by: | lancewillett |
---|---|---|---|
Milestone: | 3.9 | Priority: | normal |
Severity: | normal | Version: | 3.8.1 |
Component: | Bundled Theme | Keywords: | has-patch |
Focuses: | ui, accessibility | Cc: |
Description
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.
Attachments (3)
Change History (14)
#1
@
11 years ago
- Component changed from Themes to Bundled Theme
- Summary changed from Twenty Fourteen theme menu not keyboard accessibile at narrower screen widths to Twenty Fourteen: Menu not keyboard accessible at narrower screen widths
This ticket was mentioned in IRC in #wordpress-ui by grahamarmfield. View the logs.
11 years ago
#6
@
11 years ago
- Keywords needs-refresh removed
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.
#7
@
11 years ago
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.
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.