simple-accessible-nav v0.1.6
simple-accessible-nav
simple-accessible-nav
is a package for quickly creating a React navbar that
conforms to W3 Aria guidelines for accessibility -- specifically relating to
navigation. For now, this means it produces "mega menus", which are the only
form of dropdown considered truly accessible.
What makes this special?
The navigation demanded by people with severe disabilities is not the same navigation an abled user employs when lazily typing with one hand, or simply trying to avoid using the mouse. A disabled user may be fumbling keys due to severely hampered motor functioning, twitching, shaking, etc. For blind users using text-to-speech translation, it is a great inconvenience for menus to respond in certain ways (e.g. reading the contents when passing by). The navigation methods these users like to use are also more complex than simply "tabbing through" a page.
These specifications are outlined here: aria specifications
simple-accessible-nav
incorporates these desires. It assures 'text-to-speech'
devices are given the proper information and assists in establishing optionality
if users do not possess the ability to visualize the options.
Caveats
simple-accessible-nav
is a prototype and, as of now, highly opinionated. It requiresreact-router-dom
to function properly, though it should work with other routers that have similar APIs (untested).- The submenus are intended to produce only mega menus and not a singular dropdown list. This is because accessibility studies show that dropdowns in navs are disruptive and the relatively small amount of information contained should be presented in a different way. However, large amounts of information in mega menus does aid in navigation. This is also becoming a best practice for navbars in general as companies seek to "streamline" the navigation, where dropdowns incentivize poorly structured interfaces.
Installation
From command line:
$ npm install simple-accessible-nav react-router-dom --save
Or
$ yarn add simple-accessible-nav
Adding to project
Import Nav from simple-accessible-nav
into the project as well as a BrowserRouter from
react-routers-dom
.
import React, { Component } from 'react';
import Nav from 'simple-accessible-nav';
import {BrowserRouter as Router } from 'react-router-dom';
Wrap the Nav in the Router within the App class. The Nav component requires items and type props.
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Nav items={[{link: {to: 'home', label: 'Home'}}]} type={'basic'} shadow/>
<Route exact path={"/"} component={Home} />
</Router>
);
};
};
Populating items
The items prop takes an array of Javascript Objects. Even a single Object should be in an array.
Item Objects
Item | Arguments | Description |
---|---|---|
link | to, label | A react-router-dom link to a page '/{label}' |
submenu | label, items | A dropdown. Contains sections. |
section | label, items | A list of links to be within a submenu |
Example
// a single link to /home
let link = [
{link: {label: 'Home', to: 'home' }}
]
// a submenu with sections (=== mega menu)
let menu = [
{submenu: {label: 'menu', items: [
{section: {label: 'products', items: [
{link: {label: 'product1', to: 'product_1'}},
{link: {label: 'product2', to: 'product_2'}},
{link: {label: 'product3', to: 'product_3'}},
{link: {label: 'product4', to: 'product_4'}},
{link: {label: 'product5', to: 'product_5'}}
]}},
{section: {label: 'services', items: [
{link: {label: 'service1', to: 'service_1'}},
{link: {label: 'service2', to: 'service_2'}},
{link: {label: 'service3', to: 'service_3'}},
{link: {label: 'service4', to: 'service_4'}},
{link: {label: 'service5', to: 'service_5'}}
]}}
]}}
];
Other nav components
Item | Arguments | Description |
---|---|---|
type | string | One of several styles |
logo | string | the name of a logo asset, e.g. 'logo.png' |
phone | Object | e.g. {cell: '555-555-5555'} |
shadow | if a dropshadow should be applied | |
variation | Will produce a variation of the navbar style | |
socialAccounts | Object | e.g. {facebook: "yourname", github: "username"", ...} |
Types
- basic (a single navbar)
- stacked (double layered two toned)
- centered (double layered menu in center)
Phones
- cell
- mobile
- home
- business
Social accounts need only the username as the link to profiles will be automatically populated
Socials
- googleplus
- youtube
- slack
- bandcamp
- etsy