Johannes Johannes - 1 month ago 8
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" >
<?php
$arguments = array(
'theme-location' => 'main menu',
'container' => ''
);
wp_nav_menu($arguments);
?>
</nav>


(The PHP tag simply renders a
ul
list with
li
elements which contain
a
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 () {
jQuery('nav').slideToggle(300);
});


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
    .menu-icon
    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.