A11yControl

Features

Click the ♿ button in the bottom-right corner to open the menu.

Integration

Two lines are enough in any project:

# 1. Install via npm
npm install a11y-control

# 2. Add the tag (it handles its own loading)
<a11y-control lang="en" position="bottom-right"></a11y-control>

Available Attributes

lang       "en" | "fr"                   (default: "en")
position   "bottom-right" | "bottom-left"
           "top-right"    | "top-left"   (default: "bottom-right")

From npm (local)

// ES module import
import 'a11y-control';

Test Content

Here is an example of typical website content. You can use the accessibility controls to change the look of this page in real-time. All preferences are saved in localStorage and restored on every visit.

Some useful links: WCAG Quick Reference, MDN Accessibility, axe DevTools.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Test Form

Verify that contrast and readability remain correct with active filters.

WCAG 2.1 Criteria Covered

The component itself complies with the following criteria: