A11Y Menu

Intro

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:

• accessible to people visiting the site
• accessible whether or not people are using javascript in their browsers
• accessible to people regardless of how they interact with their computers
• accessible for web developers with a variety of skill levels

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:

• icons
• focus and hover states
• alignment
• margin and padding
• etc...

Just turn off the css/style.css