ariaMenu

Accessible menu with Aria support


License
MIT
Install
bower install ariaMenu

Documentation

AriaMenu

AriaMenu is a minimalistic, cross browser, cross device jQuery plugin. It improves a css-driven menu to be accessible with touch and keyboard.

Installation

bower install ariaMenu

JS

jQuery(".ariaMenu").ariaMenu();

CSS

.ariaMenu .show-menu { display : block }
  • WCAG conform
  • JSHint
  • No inline styles
  • No !important styles
  • No DOM structure changes
  • No resize-events
  • No scroll-events
  • No css browser prefixes (thanks to autoprefixer)
  • Lightweight
  • Separation of logic, layout and theming
  • Automated testing

CasperJS test screenshot CasperJS responsive screenshot

Demo

Requirements

Browser

  • IE7+
  • Chrome
  • Safari
  • Firefox
  • iPhone 6.0 Safari
  • Android Safari 4.0

Dom/Event Library

  • jQuery 1.7+
  • Zepto

Features

  • Arrow keys moves a virtual cursor which sets focus to
    • a sibling of the current menu item
    • a direct parent list element
    • the first list element of a sub menu
  • Escape closes any open menus.
  • Tabbing allows cycling through every menu item.
  • Single Tap opens a menu
  • Double Tap triggers the link

Size

  • Size (minifed & gziped) 1.1 KB
  • Size (minfied) 2.44 KB

Documentation

Source code (explainJS)

Files

grunt tests, compiles and minfies the source code. All built results are copied to the "dist" folder:

Accessibility

This menu is accessible for

  • People who are blind (who cannot use devices such as mice that require eye-hand coordination)
  • People with low vision (who may have trouble finding or tracking a pointer indicator on screen)
  • Some people with hand tremors find using a mouse very difficult and therefore usually use a keyboard

Guidelines to follow

Tests

CasperJS Webkit tests Travis Build

SauceLab tests Selenium Test Status

Code coverage Code coverage

Javascript?

It's not the aim of ariaMenu to be a fully fledged javascript menu but only a light weight unobtrusive enhancement for your CSS menu.

Also note that 98.6% of people who are blind have Javascript enabled

Links