What’s on the Menu or Submenu? Hamburgers (☰) or Kebabs (⋮)?

by Kimberly Spriggs June 2, 2022

On this 4^th of July weekend, as we sit down to grilled Hamburgers, Cheeseburger, Kebabs, Hotdog, Veggie Burger, and for dessert maybe Strawberries, Chocolates, and Cake. It would be interesting to know these names also mean digital menu and submenu icons. Now let’s talk about A11y menus, submenus, and web accessibility challenges.

Mmmm…  A11y Food!

So, what does web ACCESSIBILTY really mean?  Web accessibility, or sometimes referred to as eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. [Wiki] Yet, accessibility is more than just compliance with standards, it is about creating a digital environment optimized for and array of people, across varying digital platforms and coming together to develop solutions to meet the needs of all users, with and without disabilities. While accessibility most commonly benefits those with disabilities and those who use assistive devices to navigate websites, it actually creates a better experience for everyone simply by taking people and situations into account.

Websites have been created as a landing place for businesses, government entities, educational platforms, and more. They were created with the idea that the person was sitting in front of a screen, computer, or a laptop were just that, there just as the audience was originally intended. Then screens evolved to smartphones in the digital evolution. So those menu icons were smaller and harder to access for people with dexterity or visual issues. These are all assumptions that person behind the screen sees the output the same way the developers intended, or they may not have the latest technology, or not even be in an ideal setting to view these. For example, sitting at their desk in natural or bright lighting or they might not use the device the same way you do and need assistive devices or programs to see digital menu and submenu icons.

So, what’s on the A11y menu?

A hamburger menu is that sleek little icon (☰) used on a website that, when clicked opens to reveal a navigation menu. Visually, it’s a stack of three horizontal lines resembling a hamburger – the top bun, patty, and bottom bun.

Hamburger Menus are collapsed menus often seen on mobile devices represented by three parallel lines ☰; not to be confused with a kebab menu icon (⋮) often used as an “additional option” or “overflow” sub-menu, the (…) is the meatball menu, well you can see below [Image 1] shows the varying food related menu icons (that aren’t tasty, but recognizable). More and more, these digital menu and submenu icons are beginning to appear on sites, especially mobile apps, to hide the full menu even on desktop. Having become a quick favorite for web designers since it’s minimally taking up less real estate on a page and is aesthetically pleasing, however, this is not a good use of web design or development for accessibility for many reasons.

Are the very icons we use in design more skeuomorphic than helpful? Especially to people with disabilities.

Let us look at some setbacks for this minimalistic approach.

First, it took a while to understand what the ☰ hamburger icon was; a way to navigate menus on a mobile version of a site, now add all the other web icons, are you giving your users the right experience? Are the users with disabilities who have never seen a hamburger, are their assisted technology reading your site correctly? The majority of users simply aren’t used to looking for the hamburger menu or icons on a website, they look for words, buttons, or tabs to navigate through the website. Conveying the message the developers created for your business, digitally guiding customers, and users through the UX or user experience is basis of the navigational journey, right?

Now put these icons into place on a desktop version with most people having been exposed to these icons for about ten years now, but it falls into a temporary accessibility grey area too. All new things take time to catch on, but at what cost?

Second, improving accessibility for three groups: users with cognitive abilities or learning disabilities, users with low vision, and users with disabilities on mobile devises. For people with disabilities like dexterity and mobility issues, or people with visual impairments either low vision, partially sighted, or legally blind who need assisted technology like screen readers, they are missing the icons completely. For people with dexterity issues who lack the range of motion to navigate a keyboard or mobile device have a hard time selecting the icon, either motor-control or from dexterity skills – they cannot select the tiny icon(s). For screen readers, the readers the label can’t be focused or ‘read out’ losing out on focus styles to let the user know where they are and how to navigate your site. A typical screen reader won’t read this symbol out at all, so the label has no accessible name.

Both web design and functionality affect accessibility

By hiding your menu or making it difficult to find, use or select your potential customers people are missing what you have to offer by overlooking a tiny hamburger shoved into a corner. This can hurt your website’s viewership just as much as it annoys your users.

• In a 2014 study (Hamburger vs Menu: The Final AB Test).
• A newer 2019 study (The Hamburger Icon: Does It Help or Hurt Revenue?), testing site interaction analytics using different menu display methods for results.

While both independent studies run on single websites, it was concluded both times even just adding the word “Menu” along with the hamburger (Menu ☰ icon) can significantly improve user interacting, implying the standalone hamburger still isn’t obvious to most. It’s also important to note, both studies were done using mobile analytics where the hamburger menu is, hypothetically, more recognized as a menu icon.

For the right reasons and the main reason is access for all. Hiding your menu behind multiple clicks is creating more tasks for keyboard users to simply navigate a website. 

Third reason is improper implementation. Having navigated through a lot of desktop hamburgers and finding most of them were extremely aggravating, here are some examples:

• Applying a hamburger menu with display as a responsive design: screen reader users cannot access the menu items using their software element lists (this forces them to maneuver back into the menu and perform more tasks to navigate this site).
• Incorrect reading order: keyboard and touch-screen reliant users cannot read the menu without tabbing through to the end of a webpage and then starting over (or “back-tabbing” through their browser).
• No keyboard shortcuts: closing the hamburger menu or not having a “Close” button as a keyboard shortcut where a user can close it by clicking anywhere off-menu seems to create an endless loop and potentially loss of interest from frustration.
• Quick-link theme “Skip to Navigation” as a hidden link: not utilizing the correct IDs on a custom hamburger menu icon will render this quick-link useless.
• Incorrect Menu button aria text: meaning a person who is visually impaired could miss the menu altogether if all they hear is “clickable button” or other actions.

What ever design method you want to implement, take care to remember that although these menu uses might take up less real estate in the design, they are really not accessible and easy to use.