Elements
Every accessibility component, live. Each one enhances real markup authored in this page's template.
<a11y-anchor>
Enhances a real <a href>. New-tab links get rel="noopener noreferrer" and "(opens in new tab)" in their accessible name. Same-page links smooth-scroll, move focus to the target, and announce the jump.
<a11y-avatar>
An avatar image with an initials fallback, shown when there is no src or when the image fails to load. Circle by default, or square.
<a11y-card-link>
Makes a whole card go to one page through a real <a href> inside it. The link stays the card's only tab stop and its accessible name; a click anywhere else on the card is forwarded to it (here, to the app's router), while Cmd/Ctrl/Shift-click and middle-click open it in a new tab. Clicks on another control in the card, or that end a text selection, aren't forwarded.
Overlays demo
Click anywhere on this card to open the overlays demo. The description is read after the link name.
<a11y-checkbox>
Wraps a real <input type="checkbox"> in a label with a visible label span. Adds an indeterminate state and an onChange callback.
<a11y-checkbox-group>
Wraps real checkboxes in a fieldset with a legend, the multi-select counterpart of the radio group. The "Select all" checkbox is checked, partly checked or unchecked to match the options, and checks or unchecks every enabled one. The disabled option keeps its own state.
<a11y-file-input>
A file picker around a real <input type="file">, with the same label, hint and error parts as the input. Browse or drop files: each gets a "Remove" button, and files over the size, count or type limits are listed and announced instead of added. Nothing is uploaded here.
<a11y-focusable>
The escape hatch for an element that can't be a real <button>: role="button", keyboard-focusable, and Enter/Space trigger a real click.
<a11y-input>
Wraps a real <input> with optional <a11y-label>, <a11y-hint> and <a11y-error> parts, and links them with for and aria-describedby. Native constraints do the validating: an error shows once a field is left after an edit, or when a submit finds it invalid, then updates as you type. On submit, the first invalid field is focused.
<a11y-label>
Renders a real <label> around its content. Inside a field it's linked automatically; on its own, for is forwarded, so clicking it focuses the input.
<a11y-picture>
Wraps a real <picture>. It hides the image from assistive tech automatically when the image is decorative (empty alt and no caption), as with the second image. The third one has no markup inside: the element builds its <picture>, <img> and <figcaption> from its attributes.
<a11y-progress>
A progress bar named by its visible label through aria-labelledby.
<a11y-radio-group>
Wraps real radio inputs sharing a name in a fieldset with a legend. The native same-name grouping keeps them mutually exclusive.
<a11y-select>
Wraps a real <select> in a label with a visible label span. The browser's own picker and keyboard handling stay untouched.
<a11y-skeleton>
A loading placeholder shape, with no JavaScript required: circle, text lines, or rect.
<a11y-spinner>
A loading spinner with an accessible label. The last one is scoped to a different color with an inline --a11y-spinner-color custom property.
<a11y-switch>
A real checkbox exposed as role="switch", with the same label wrapping as the checkbox.
<a11y-textarea>
The same field parts around a real <textarea>. An <a11y-counter> shows the length against maxlength, and announces the characters left near the limit.