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
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
Files
grunt
tests, compiles and minfies the source code.
All built results are copied to the "dist" folder:
-
dist
- other (Zepto & AMD version)
-
styles (Stylesheets)
- ariaMenu.layout.css (Layout styles)
- ariaMenu.theme.css (Theme styles)
- ariaMenu.responsive.css (Responsive theme and layout styles)
- ariaMenu.min.css (Minified layout and theme styles)
- ariaMenu.dev.js (Javascript with comments)
- ariaMenu.min.js (Minified jQuery version)
- ariaMenu.min.js.map (Sourcemap)
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
- WCAG 2.0 - Guideline 1.4.4: Resize text to 200%
- WCAG 2.0 - Guideline 2.1: Make all functionality available from a keyboard.
- WCAG 2.0 - Guideline 2.1.2: No Keyboard Trap
- WCAG 2.0 - Guideline 2.1.3: Keyboard (No Exception)
- WCAG 2.0 - Guideline 2.4.3: Focus Order
Tests
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
-
Responsive menus
-
Accessible menus
-
Closure compiler
-
Boilerplate code