a11y-tests.css is a pure CSS library to test the page accessibility by toggling color, blur, animation, large text, no mouse classes on the <html> element.
How to use it:
1. Download and import the a11y-tests.css into the webpage.
<link rel="stylesheet" href="a11y-tests.css" />
2. Toggle the following CSS classes to test the accessibility on the webpage.
- .a11y-tests-grayscale: text color
- .a11y-tests-blur: blur effect
- .a11y-tests-no-mouse: no cursor
- .a11y-tests-large-text: large text
- .a11y-tests-no-animation: no animation
<html class="class here"> ... </html>
See Also:
Enhance The Accessibility Of Bootstrap 5 When Hight Contrast Is Activated On Windows
Easy Website Accessibility with a11y-widget
Enhanced Keyboard Navigation in JavaScript – FocusManager
WCAG-Compliant Accessible Modal System in JavaScript
Calculate and Improve Color Contrast To Enhance Accessibility – a11y-contrast-color
Boost Your Website’s User Accessibility With The Accessibility Plugin
Enable Keyboard Accessibility On HTML Lists – Gridnav.js
CSS Library For Accessibility Testing – Checka11y.css