tab-fixation

About Tab Fixation

A simple yet powerful library that can help improve the accessibility of your website for visually impaired users.

Tab-fixation is a lightweight vanilla JavaScript package that traps the user's keyboard focus so that they can only navigate between a select number of DOM nodes. This is particularly helpful for visually impaired users who may be using screen readers to navigate around your website, especially if you're using popup modals where users can find themselves tabbing through the entirety of the website while a modal is still open in front of them.

By isolating the user's focus and preventing them from getting lost or confused, you can create a more user-friendly experience that everyone can enjoy.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installing

Using npm:

$ npm install tab-fixation

Using yarn:

$ yarn add tab-fixation

Using unpkg CDN:

<script src="https://unpkg.com/tab-fixation"></script>

Example

import tabFixation from 'tab-fixation';

// A button to start & end fixation.
const focusbutton       = document.getElementById( 'focus_parent_button' );
const removeFocusButton = document.getElementById( 'focus_parent_button' );

/**
 * This is the parent node you would like to focus.
 * Once you initialise focus using this node as a parameter,
 * clicking the tab key will only allow you to move the focus ring
 * amoungts focusable children of this element.
 */
const divToFocus = document.getElementById( 'parent_element' );

// Initialise the fixation class.
const focusTrap = new tabFixation();

/**
 * On click only allow the user to tab between
 * the child elements of "divToFocus". 
 */
focusbutton.addEventListener( 'click', () =>{
	// Init tab fixation.
	focusTrap.init( divToFocus );
}); 

/**
 * On Click remove the focus trap & allow the user to
 * continue tabbing through the site as they normally would.
 */
removeFocusButton.addEventListener( 'click', () =>{
	// Remove tab fixation.
	focusTrap.remove();
}); 

Codepen Example

https://codepen.io/codedbyglenden/pen/vYzgxNQ

Objectives

This package aims to be:

• Fully accessible: Complying to the latest WCAG guidelines, to AAA standard.
• Lightweight: Website load times are key, not only to the ranking of your site, but the user experience. This package will always remain as small as possible, & never weigh you down.

Help me, I'm stuck!

Pop over to the discussions board.

I've got an idea?

Got ideas on how to improve this package, but not sure how to persue them? Head over to the discussion section of the repo, or if you've got the know how create a pull request.