A CSS-only accessibility debugger — identify common HTML a11y issues visually, with no JavaScript
- ✅ 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.
npm install a11y-debug.css<head lang="en">
<link rel="stylesheet" href="https://manuelsanchez2.github.io/a11y-debug-stylesheet/a11y-debug.css" />
</head>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');})();<body class="a11y-debug">
<!-- your content here -->
</body>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);
}Got ideas for more accessibility checks that can be done in pure CSS?
Open a pull request or discussion on GitHub.
MIT © Manuel Sánchez