Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
accessible menu. playground @
.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 */
<nav role="navigation" aria-label="Main" class="nav">
<button aria-label="Navigation" aria-controls="menu"
aria-haspopup="true" aria-expanded="false" aria-pressed="false"
<ul id="menu" class="nav__menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.