WordPress.org

Making WordPress.org

Opened 20 months ago

Closed 20 months ago

Last modified 20 months ago

#3365 closed defect (fixed)

Fix the .org site hamburger menu button

Reported by: afercia Owned by:
Milestone: Priority: normal
Component: General Keywords: has-screenshots
Cc:

Description

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.

https://cldup.com/FanXxQrsQF.png

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.


20 months ago

#2 @obenland
20 months ago

In 6331:

WP4: Don't restrict tap space on toggle

See #3365.

#3 @obenland
20 months ago

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

#4 @obenland
20 months 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 https://wordpress.slack.com/archives/C02QB8GMM/p1515602691000872
See #3365.

Note: See TracTickets for help on using tickets.