WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 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)

27147.diff (1.5 KB) - added by jartes 7 years ago.
27147.2.diff (1.5 KB) - added by joedolson 7 years ago.
Update to previous patch; add :focus
27147.2.2.diff (1.6 KB) - added by joedolson 7 years ago.
Update to 27147.2; this time actually having been saved.

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
7 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

#2 @lancewillett
7 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.9

#3 @jartes
7 years ago

  • Keywords has-patch added; needs-patch removed

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.

@jartes
7 years ago

#4 @GrahamArmfield
7 years ago

  • Keywords needs-refresh added

Believe patch needs refresh - unable to test.

This ticket was mentioned in IRC in #wordpress-ui by grahamarmfield. View the logs.


7 years ago

#6 @joedolson
7 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.

@joedolson
7 years ago

Update to previous patch; add :focus

@joedolson
7 years ago

Update to 27147.2; this time actually having been saved.

#7 @GrahamArmfield
7 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.

#8 @lancewillett
7 years ago

  • Keywords needs-testing added

This ticket was mentioned in IRC in #wordpress-themes by lancewillett. View the logs.


7 years ago

#10 @lancewillett
7 years ago

  • Keywords needs-testing removed

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

#11 @lancewillett
7 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.