Screen reader introduction

The "screenReader" add-on adds support for screen readers to the menu, it is turned on by default. To turn it off or to customize how it works, change the screenReader options and configuration.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            screenReader: {
               // screen reader options
            }
         }, {
            screenReader: {
               // screen reader configuration
            }
         });
      }
   );
</script>

Options for the "screenReader" add-on

Option Datatype Default value Description
screenReader A map of options or false for screenReader.aria and screenReader.text.
{
aria Boolean true Whether or not to automatically add and update the aria-hidden and aria-haspopup attributes.
text Boolean true Whether or not to add a "screen reader only" text for anchors that normally don't have text.
}

Configuration for the "screenReader" add-on

Option Datatype Default value Description
screenReader
{
text
{
closeMenu String "Close menu" The screen reader text for anchors that close the menu.
closeSubmenu String "Close submenu" The screen reader text for anchors that close a submenu.
openSubmenu String "Open submenu" The screen reader text for anchors that open a submenu.
toggleSubmenu String "Toggle submenu" The screen reader text for anchors that toggle a submenu.
}
}

API methods for the "screenReader" add-on

The "screenReader" add-on has no API methods.

SCSS variables for the "screenReader" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_screenreader Boolean true Whether or not to include CSS for the screenReader add-on throughout the entire CSS framework.

Next add-on:
Scroll bug fix