The goal of this project is to provide a nicer-looking and animated replacement for the browser-native accessibility outline. Pressing tab in the browser will cause the outline smoothly move to the new position.
Since this reticle is overlaid on top of the entire page, it should not ever have a segment that appears cut off. A smooth animation will help the user track the position of the reticle as it is changing. The reticle styles can be overridden easily using CSS.
- Animates the reticle between focusable elements when pressing tab or clicking.
- Resizes the reticle to cover the extents of the focused element
- Keeps the reticle on top of the focused element when scolling.
Add package to project
$ npm install smooth-tab
Import and initialize (in JS)
import SmoothTab from 'smooth-tab';
new SmoothTab().init();
Add styles (in CSS)
@import 'smooth-tab/css'
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smooth-tab@latest/dist/style.css">
<script type="module">
import smooth-tab from 'https://cdn.jsdelivr.net/npm/smooth-tab@latest/+esm';
new SmoothTab().init();
</script>
...
</head>
You can get involved in development for this project! Feel free to submit issues and start a discussion. This project is in its infancy and is not feature complete, fully accessible, or tested.
Start the development environment with:
# pnpm
$ pnpm install
$ pnpm dev