diff --git a/src/js/05-mobile-navbar.js b/src/js/05-mobile-navbar.js
index 0f35ee5b..88475f3d 100644
--- a/src/js/05-mobile-navbar.js
+++ b/src/js/05-mobile-navbar.js
@@ -8,7 +8,7 @@
   function toggleNavbarMenu (e) {
     e.stopPropagation() // trap event
     var html = document.documentElement
-    var menu = document.getElementById(this.dataset.target)
+    var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target)
     if (!menu.classList.contains('is-active') && /mobi/i.test(window.navigator.userAgent)) {
       if (Math.round(parseFloat(window.getComputedStyle(html).minHeight)) !== window.innerHeight) {
         html.style.setProperty('--vh', window.innerHeight / 100 + 'px')
@@ -17,7 +17,7 @@
       }
     }
     html.classList.toggle('is-clipped--navbar')
-    this.classList.toggle('is-active')
+    navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active'))
     menu.classList.toggle('is-active')
   }
 })()
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index 9f7bcb36..8fc47e02 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -3,7 +3,7 @@
     <div class="navbar-brand">
       <a class="navbar-item logo" title="Asciidoctor" href="https://asciidoctor.org"><img src="{{{uiRootPath}}}/img/asciidoctor-logo.svg" alt="Asciidoctor" width="48"></a>
       <a class="navbar-item title" href="{{#with (and site.url site.homeUrl)}}{{{@root.site.url}}}{{{this}}}{{else}}{{{siteRootPath}}}{{/with}}">{{site.title}}</a>
-      <button class="navbar-burger" data-target="topbar-nav">
+      <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
         <span></span>
         <span></span>
         <span></span>