Drop-in attributes
Use semantic HTML and data-automagica11y-* hooks and we'll wire the ARIA, focus, and stateful classes automatically at runtime. No setup required.
Accessibility that writes itself.
From declaration to interaction, automagically. One attribute handles ARIA, focus flow, and visual state management so you can ship accessible code without the boilerplate.
Why automagica11y?
Build inclusive interactions with declarative HTML and automagica11y will pair empathetic defaults with smart automation to create accessibility that just… happens.
Context-aware patterns
Toggle dialogs, popovers, and tooltips with a single attribute. Context-aware logic handles roles, keyboard bindings, and focus flow for you.
Thoughtful details
Write code the way you think. Truthiness mapping understands your naming — open, expanded, active — and keeps behavior consistent across patterns.
Try it out
Section titled “Try it out”The 5-second toggle
One attribute, full accessibility.
View source
Automagica11y synchronizes aria-expanded, handles keyboard input, and keeps the DOM tidy.
<button data-automagica11y-toggle="#landing-toggle-panel">Toggle me, friend.</button><div id="landing-toggle-panel">Automagica11y synchronizes <code>aria-expanded</code>, handles keyboard input, and keeps the DOM tidy.</div>We didn’t just toggle [hidden] there either. Automagica11y took that bare bones HTML and also gave it ids, aria-controls, aria-expanded, aria-labelled-by, and aria-hidden. All with a single data-attribute.
Get this wizardry for yourself