Johannes Johannes - 6 months ago 26
CSS Question

Accessibility of Hamburger Menu?

I am currently working on making a responsive website accessible and I wonder whether a blind person who opens the page on a smartphone will be able to open the hidden menu somehow, or if he/she "sees" it anyway - read by the screen reader?

My "Hamburger menu" has a structure like this (The whole thing is in Wordpress, but that doesn't make any difference):

<div class="menu-icon">Click here to open or close the menu</div>
<nav id="navigation" role="navigation" tabindex="0" >
$arguments = array(
'theme-location' => 'main menu',
'container' => ''

(The PHP tag simply renders a
list with
elements which contain
tags as menu items)

The related CSS is as follows (first the general rules, then the media Queries for mobile):

.menu-icon {
display: none;
nav {
display: block;
@media only screen and (max-width: 850px) {
.menu-icon {
display: block;
position: absolute;
right: 15px;
top: 10px;
z-index: 2;
width: 32px;
height: 32px;
background-image: url(images/menu-icon.png);
background-size: 100% auto;
background-position: 0px 0px;
text-indent: -5000px;
nav {
display: none;

And here's the relevant jQuery:

jQuery('.menu-icon').on('click', function () {

All this works as expected, but I am wondering how an iPhone with activated Voiceover/screen reader will present this to the user and let him/her control it:

  • Will he/she be able to "click" the
    div somehow to ge access to the menu?

  • If not, will the following CSS make the menu "visible" to the screenreader the same way as on a desktop screen?:

(the following CSS follows after the media queries for mobile)

@media speech {
.menu-icon {
display: none;
nav {
display: block !important;

I know some will say "just try it", but it's really hard to test if you are not used to handle a screenreader on a regular basis, especially on mobile (plus every screenreader acts a bit different...). The mobile simulation mode in the browser tools (on desktop) doesn't help here...

Answer Source

A solution is to include a visually hidden text like 'open menu' in the element triggering the open (usually an a tag), and add the attribute role="button" to the trigger. Also the a tag href will be the anchor to the nav id.

<a href="#nav" role="button" class="js_open_trigger">open menu</a>
<nav id="nav">......</nav>

Then you would need media queries to show/hide the desktop or mobile parts.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download