a11y-debug.css
v1.1.0
Published
A CSS-only accessibility debugger for HTML. Highlights common a11y issues visually.
Readme
a11y-debug
A CSS-only accessibility debugger — identify common HTML a11y issues visually, with no JavaScript
What does it do?
- ✅ Highlights missing
alttext on<img> - ✅ Flags empty headings like
<h1></h1> - ✅ Warns if we find
role="button"orrole="link" - ✅ Checks for
<ul>or<ol>with invalid children - ✅ Finds
<table>elements without a<caption> - ✅ Alerts when
<label>is not associated with a form control - ✅ Detects buttons that only use an icon without text or
aria-label
All of this is done without any JavaScript — just HTML and CSS using, among other things, the powerful :has() selector.
Installation
NPM
npm install a11y-debug.cssCDN
<head lang="en">
<link rel="stylesheet" href="https://manuelsanchez2.github.io/a11y-debug-stylesheet/a11y-debug.css" />
</head>Bookmarklet
javascript:(function(){var l=document.createElement('link');l.rel='stylesheet';l.href='https://manuelsanchez2.github.io/a11y-debug-stylesheet/a11y-debug.css';document.head.appendChild(l);document.body.classList.add('a11y-debug');})();Usage
<body class="a11y-debug">
<!-- your content here -->
</body>Customize
You can override the default colors via CSS variables:
:root {
--color-debug-warning: orange;
--color-debug-error: crimson;
--color-debug-light-error: oklch(88.5% 0.062 18.334);
}Contributing
Got ideas for more accessibility checks that can be done in pure CSS?
Open a pull request or discussion on GitHub.
License
MIT © Manuel Sánchez