Loock

An accessibility helper for keyboard navigation on the web.

Loock • An accessibility helper for keyboard navigation on the web.

Organize your web page or web application by navigation areas.
Never lose the context while navigating the area with the TAB key.
Leave the context with the ESC key.
Use a default context.

Demo

Introducing Loock

Medium article - "How to improve keyboard navigation of your web page"

Install

$ npm install @chialab/loock
# OR
$ yarn add @chialab/loock

Use via cdn:

&lt;script type="text/javascript" src="https://unpkg.com/@chialab/loock">&lt;/script>

Usage

import { Loock } from '@chialab/loock';

const loock = new Loock();

// define the default context
const mainContext = loock.createDefaultContext(document.getElementById('main'));

// define one context
const context = loock.createContext(document.getElementById('navigation'));

// listen context state
context.on('enter', () => {
    console.log('entered the navigation context');
    // do stuff
});

context.on('exit', () => {
    console.log('exited the navigation context');
    // do stuff
});

// activate the context
context.enter();

&lt;html>
    &lt;body>
        &lt;nav id="navigation" aria-label="Main navigation">
            &lt;a href="/">Home&lt;/a>
            &lt;a href="/posts">Posts&lt;/a>
            &lt;a href="/login">Login&lt;/a>
        &lt;/nav>
        &lt;section id="main" aria-label="Main content">
            ...
        &lt;/section>
    &lt;/body>
&lt;/html>

On page load, the #navigation will be automatically focused and you can navigate the links using the TAB key without losing focus from the nav element. Press ESC to exit the navigation context and skip to the default context, the #main element.

For a more complete example, please see the demo source code.

Development

Requirements

In order to build Loock, the following requirements are needed:

NodeJS (>= 10.0.0)
Yarn
RNA (>= 3.0.0)

Build the project

Install the dependencies and run the build script:

$ yarn install
$ yarn build

This will generate the UMD and ESM bundles in the dist folder, as well as the declaration file.

Test the project

Run the test script:

$ yarn test

License

Loock is released under the MIT license.