Elements
Every accessibility component, live. Each one enhances real markup authored in this page's template; use the keyboard and a screen reader to see what they add.
<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-checkbox>
Wraps a real <input type="checkbox"> in a label with a visible label span. Adds an indeterminate state and an onChange callback.
<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-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.
<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.