Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#3365 closed defect (bug) (fixed)

Fix the .org site hamburger menu button

Reported by: afercia's profile afercia Owned by:
Milestone: Priority: normal
Component: General Keywords: has-screenshots


Empty buttons or links should always be avoided, as they're interactive UI controls and can't be empty. Buttons are expected to have a text, as well as links. If they're empty, while visually they may work, there's really nothing assistive technologies can announce to users. Just resounding silence.

In the responsive view, the navigation menu has a "hamburger button" to toggle the menu visibility.

Actually, this button is a link:
<a id="mobile-menu-button" class="" href="#" onclick="toggleMenu();"></a>

  • it should be a button in the first place: it's not a link because it doesn't point to a new resource and clicking it doesn't trigger navigation. It "does something" on the page, and should be a button
  • aside: href="#" is a very old practice, and technically is just an incomplete URL fragment identifier
  • the new button should have a meaningful text or aria-label attribute; right now it's empty and announced just as "link"
  • the button should have an aria-expanded attribute to communicate the state of the menu

Change History (4)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

7 years ago

#2 @obenland
7 years ago

In 6331:

WP4: Don't restrict tap space on toggle

See #3365.

#3 @obenland
7 years ago

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

#4 @obenland
7 years ago

In 6336:

WP4: Account for browser button styles.

Fixes an appearance bug in Safari browsers after the switch to an actual button element.

See #3365.

Note: See TracTickets for help on using tickets.