accessible menu. playground @ http://codepen.io/webdesignberlin/pen/ZBmxRG

accessible-menu.css

.nav__trigger[aria-expanded="false"] + .nav__menu {
  /* u-visually-hidden */
  border: none !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.nav__trigger[aria-pressed="false"]::before {
  content: 'open navigation'
}

.nav__trigger[aria-pressed="true"]::before {
  content: 'close navigation'
}

.nav__trigger[aria-expanded="true"] + .nav__menu {
  /* show menu */
}

accessible-menu.html

<nav role="navigation" aria-label="Main" class="nav">
    <button aria-label="Navigation" aria-controls="menu"
     aria-haspopup="true" aria-expanded="false" aria-pressed="false"
     class="nav__trigger"
     >🍔</button>

    <ul id="menu" class="nav__menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

accessible-menu.js

var $button = document.getElementsByClassName('nav__trigger')[0];
var isMenuOpen = false;

var toggleMenu = function(){
  isMenuOpen = !isMenuOpen;
    
  this.setAttribute('aria-expanded', isMenuOpen);
  this.setAttribute('aria-pressed', isMenuOpen);
}

$button.addEventListener("click", toggleMenu, false);