A11Y Menu

Intro

project repo on github

This project was started because I believe that it's important for websites to be accessible. One area where I thought I could help was in site navigation. To me, that means:

Below, there are two demo menus. The first is an example of a "clicky" menu. Dropdowns are reached by clicking on button elements with the mouse or keyboard (enter key). The second is a "hover" menu.

Getting started

For full implementation details, please see the README.

javascript

The short version is that currently this package is available as an npm or composer package (NB - the PHP version is currently wordpress only. More versions are planned for the future).

In either case, the a11y-menu should be brought in as a dependency

npm install a11y-menu

Then using a bundler (webpack, parcel, etc...), you can quickly create a menu from a formatted json file.

// to create a clickable menu

import Navigation, { displayMenu } from 'a11y-menu';

// test-data is an arbitrary json file.
import { menuData } from './test-data.json';

const mainMenu = document.getElementById('main-menu');

mainMenu.classList.add('am-click-menu');

displayMenu(mainMenu, menuData);

const navigation = new Navigation({ click: true });

document.addEventListener('DOMContentLoaded', () => {
    navigation.init();
});

composer

composer require ucomm/a11y-menu

Bringing it into a wordpress project is also easy. After requiring the vendor/autoload.php file and enqueueing the stylesheets and javascript (see the readme), you can use the custom nav walker.

$args = array(
    'container' => 'nav',
    'menu_id' => 'am-main-menu',
    'theme_location' => 'menu-name',
    'walker' => new A11y\Menu_Walker()
);

wp_nav_menu($args);

Styles

The menu comes with a minimal set of styles which can be easily overridden. The base styles are just a starting point and should not be used "as is". The menus below represent the base styles plus additional styles for:

Just turn off the css/style.css

JS based menu

The version below is built in javascript using a json file. If you turn off javascript it will disappear...

If you tab onto this link, you can see that the menus above will close.


The version below will keep working even if javascript is off. This emulates server-side rendering. If you're using a recent version of chrome, firefox, or safari, you will still be able to tab through the menu even without js. Check out caniuse for details.