# simple-accessible-nav > Framework for creating accessible navbars. Latest version **0.1.6** (published 2017-11-07) · MIT license · 0 weekly downloads ## Install ```sh npm install simple-accessible-nav pnpm add simple-accessible-nav yarn add simple-accessible-nav bun add simple-accessible-nav ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2017-11-07 | | First published | 2017-11-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Henning Futrell | | Maintainers | hf0317 | ## Links - npm: https://www.npmjs.com/package/simple-accessible-nav - Repository: github.com/henningfutrell/simple-accessible-nav - npm.io page: https://npm.io/package/simple-accessible-nav ## Dependencies (6) - [aphrodite](https://npm.io/package/aphrodite.md) ^1.2.3 - [deepmerge](https://npm.io/package/deepmerge.md) ^1.5.0 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.1.2 - [react-fontawesome](https://npm.io/package/react-fontawesome.md) ^1.6.1 - [react-with-styles](https://npm.io/package/react-with-styles.md) ^1.4.0 - [react-with-styles-interface-aphrodite](https://npm.io/package/react-with-styles-interface-aphrodite.md) ^1.2.0 ## Recent versions - 0.1.6 (latest) — 2017-11-07 - 0.1.5 — 2017-11-06 - 0.1.4 — 2017-11-06 - 0.1.3 — 2017-11-06 - 0.1.2 — 2017-11-06 - 0.1.1 — 2017-11-06 - 0.1.0 — 2017-11-06 ## README # 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](https://www.w3.org/TR/wai-aria/roles#menu) `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`. ```javascript 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.* ```javascript class App extends Component { render() { return (