Hamburger/Gear Menus Lack Non Visual Markup

Archived Issue

Current Iteration of Issue

Short Description

Hamburger and gear menus are unidentifiable to a screen reader user

Long Description

  • Hamburger menus mostly appear on mobile applications and sites. They are three thick lines stacked on top of each other to look like a menu; they also look like a hamburger between buns. They usually contain navigation options.
  • Gear menus look like gears and usually contain user settings.
  • The images from which the menus receive their names are only available to screen reader software if alt text accompanies the graphic. However, alt text labeling the graphic "hamburger menu" or "gear menu" is inadequate, because it does not communicate the function of the graphic. More meaningful alt text would be along the lines of "navigation menu" or "user settings."
  • It is important to be consistent between the labels of menus and any instructions elsewhere. If other instructions tell a user to go to the hamburger menu or to look for the gears in the upper right hand part of the page, the screen reader user will not be able to identify the menus they know by a different name. Sighted users might recognize the gears or hamburger, so instructions should use both ways of identifying the menu, i.e. "To fill out an application, go to the hamburger or navigation menu."

Example of Issue




Impacted Assistive Technology

Screen Reader

Impacted Type of Device