Make WordPress Core

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's profile GrahamArmfield Owned by: lancewillett's profile 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 11 years ago.
27147.2.diff (1.5 KB) - added by joedolson 11 years ago.
Update to previous patch; add :focus
27147.2.2.diff (1.6 KB) - added by joedolson 11 years ago.
Update to 27147.2; this time actually having been saved.

Download all attachments as: .zip

Change History (14)

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

#2 @lancewillett
11 years ago

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

#3 @jartes
11 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
11 years ago

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


11 years ago

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

@joedolson
11 years ago

Update to previous patch; add :focus

@joedolson
11 years ago

Update to 27147.2; this time actually having been saved.

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

#8 @lancewillett
11 years ago

  • Keywords needs-testing added

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


11 years ago

#10 @lancewillett
11 years ago

  • Keywords needs-testing removed

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

#11 @lancewillett
11 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.