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:
<script type="text/javascript" src="https://unpkg.com/@chialab/loock"></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();
<html> <body> <nav id="navigation" aria-label="Main navigation"> <a href="/">Home</a> <a href="/posts">Posts</a> <a href="/login">Login</a> </nav> <section id="main" aria-label="Main content"> ... </section> </body> </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:
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.