a11ydrops
a11ydrops is a small (5kb) JavaScript library that ensures your dropdown menus are accessible via keyboard controls and screen readers - view the examples.
What Does a11ydrops Do?
- Creates a button to toggle the state (open/closed) of the drop menu.
- Adds required
aria
attributes to link the toggle button and drop menu together. - Enables keyboard controls to tab seemlessly though drop menus and escape when needed.
Note: a11ydrops does not provide any CSS styling. It simply injects required functionality to make the dropdown menus accessibile for every user.
Styling
With regards to CSS styling, a11ydrops is an unopinionated library and does not provide any out-of-the-box CSS. It will be up to you to provide the necessary CSS for styling the dropdown menu's and buttons.
When a dropdown menu becomes active (or visible) an .active
class is added to the menu and button.
Note: The .active
classname is configurable via a11ydrops options
.
Install
a11ydrops can be installed via NPM:
$ npm install a11ydrops --save
or by direct script include:
<script src="{path_to_scripts}/a11ydrops.js">
Initialization
At minimum, a11ydrops requires a target
HTML element to be defined and passed into the a11ydrops
function call.
The target
element should be the parent container element that wraps your menu.
There are optional configuration options
object that can modify default plugin parameters.
ES6 Module
; let nav = document;a11ydrops;
Vanilla JS
;
var nav = document;a11ydrops;
Example HTML
About Us Our Team History Contact Us <!-- ... more menu items --> Our Work Print Websites App Development <!-- ... more menu items --> <!-- ... more menu items -->
Config Options
Use following configuration options to modify a11ydrops functionality.
Option | Description | Default | Type |
---|---|---|---|
selector | Element that contains the menu. | 'li' |
String |
menu | The ID or class for the menu. | '.sub-menu' |
String |
activeClass | The active/open class for the menu. | 'active' |
String |
hover | Toggle the activeClass on mouse hover. | false |
Boolean |
hover_width | The minimum window width to trigger a hover effect. | 0 |
String |
buttonText | Text for the dropdown menu button. | 'Toggle Menu' |
String |
buttonClasses | Add additional classes to the dropdown menu button. | null | String |
License
a11ydrops is released under the MIT license.