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

1. simple-accessible-nav is a prototype and, as of now, highly opinionated. It requires react-router-dom to function properly, though it should work with other routers that have similar APIs (untested).
2. 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

1. basic (a single navbar)
2. stacked (double layered two toned)
3. centered (double layered menu in center)

Phones

1. cell
2. mobile
3. home
4. business

Social accounts need only the username as the link to profiles will be automatically populated

Socials

1. facebook
2. googleplus
3. youtube
4. linkedIn
5. slack
6. bandcamp
7. etsy
8. pinterest