a11y-elements
Framework-agnostic accessibility Custom Elements (Web Components).
A behavior layer, not a themed UI kit.
Every element is Light DOM only (no Shadow DOM): it enhances real markup you author yourself, and you style it with your own CSS.
This page loads the elements through the zero-build CDN bundles, the same way you would on a plain HTML page.
Elements demo
Anchor, avatar, checkbox, focusable, picture, progress, radio group, select, skeleton, spinner, switch and visually-hidden.
Overlays demo
Modal, drawer, emergency dialog, blocking loader, dropdown, context menu, popover, tooltip, snackbar and notification banner.
Zero-build
Each element has its own self-contained browser bundle under dist/browser/**/define.js, so no bundler is needed: load the stylesheet once, then only the elements you use. Page-wide state is shared between bundles, so mixing several on one page is safe.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/a11y-elements/dist/a11y.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/a11y-elements/dist/browser/accessibility-components/spinner/define.js"></script>
<a11y-spinner label="Saving…"></a11y-spinner>
Bundler / ESM
The package's exports map exposes per-component ESM output and .d.ts types. There is no default export: import each element you want, and its /element subpath when you need the class itself.
import 'a11y-elements/a11y.css';
import 'a11y-elements/accessibility-components/checkbox';
import 'a11y-elements/overlays/modal';
import type { CheckboxElement } from 'a11y-elements/accessibility-components/checkbox/element';
const checkbox = document.querySelector('a11y-checkbox') as CheckboxElement;
checkbox.onChange = (checked) => console.log('accepted:', checked);
Styling
Default styles are never auto-injected. Every visual value is a plain CSS custom property named --a11y-<component>-<token>, with the shipped look as its fallback, so customizing is just CSS. Every class the library adds is prefixed a11y-, and the shipped styles respect prefers-reduced-motion.
/* retheme every checkbox on the page */
:root {
--a11y-checkbox-color-primary: #16a34a;
}
/* or scope a token to one instance */
.theme-danger {
--a11y-spinner-color: #dc2626;
}