Edit ARIA

Name

Also known as (comma separated)

Brief definition Accessible Rich Internet Applications specification.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Accessible name", "default": "Wi-Fi" }, { "id": "checked", "type": "toggle", "label": "On", "default": true }, { "id": "role", "type": "select", "label": "Widget role", "default": "switch", "options": [ "switch", "checkbox", "radio" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "announce", "type": "toggle", "label": "Show announcement", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"aria-demo\" style=\"--accent:{{accent}};\">\n <div class=\"aria-demo__row\">\n <button type=\"button\" class=\"aria-demo__ctrl aria-demo__ctrl--{{role}}{{#if checked}} is-on{{/if}}\" role=\"{{role}}\" aria-checked=\"{{checked}}\" aria-label=\"{{label}}\">\n <span class=\"aria-demo__thumb\"></span>\n </button>\n <span class=\"aria-demo__label\">{{label}}</span>\n </div>\n {{#if announce}}<p class=\"aria-demo__sr\">Screen reader: &ldquo;{{label}}, {{role}}, {{checked}}&rdquo;</p>{{/if}}\n <code class=\"aria-demo__code\">role=\"{{role}}\" aria-checked=\"{{checked}}\"</code>\n</div>\n<style>\n.aria-demo { width: 320px; font: 15px/1.5 system-ui, sans-serif; color: #241430; }\n.aria-demo__row { display: flex; align-items: center; gap: 12px; }\n.aria-demo__ctrl { position: relative; border: 2px solid var(--accent); background: #FAF7F2; cursor: pointer; padding: 0; }\n.aria-demo__ctrl--switch { width: 48px; height: 26px; border-radius: 999px; }\n.aria-demo__ctrl--checkbox { width: 26px; height: 26px; border-radius: 6px; }\n.aria-demo__ctrl--radio { width: 26px; height: 26px; border-radius: 50%; }\n.aria-demo__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); opacity: 0; }\n@media (prefers-reduced-motion: no-preference) {\n.aria-demo__thumb { transition: transform .15s, opacity .15s; }\n}\n.aria-demo__ctrl--switch .aria-demo__thumb { opacity: 1; }\n.aria-demo__ctrl--switch.is-on .aria-demo__thumb { transform: translateX(22px); }\n.aria-demo__ctrl--checkbox.is-on .aria-demo__thumb { opacity: 1; border-radius: 4px; width: 18px; height: 18px; }\n.aria-demo__ctrl--radio.is-on .aria-demo__thumb { opacity: 1; }\n.aria-demo__ctrl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.aria-demo__label { font-weight: 600; }\n.aria-demo__sr { margin: 10px 0 0; font-size: 13px; background: #A8E6C133; border-left: 3px solid var(--accent); padding: 8px 10px; }\n.aria-demo__code { display: block; margin-top: 8px; font: 12px/1.4 ui-monospace, monospace; color: #241430aa; }\n</style>", "tailwind": "<div class=\"flex flex-col gap-2.5\" style=\"--accent:{{accent}};width:320px;font-family:system-ui,sans-serif\">\n <div class=\"flex items-center gap-3\">\n <button type=\"button\" role=\"{{role}}\" aria-checked=\"{{checked}}\" aria-label=\"{{label}}\" class=\"aria-tw aria-tw--{{role}}{{#if checked}} is-on{{/if}} relative border-2 bg-[#FAF7F2] cursor-pointer p-0\" style=\"border-color:{{accent}}\">\n <span class=\"aria-tw__thumb absolute top-0.5 left-0.5 w-[18px] h-[18px] rounded-full motion-safe:transition-transform\" style=\"background:{{accent}}\"></span>\n </button>\n <span class=\"font-semibold text-[#241430] text-[15px]\">{{label}}</span>\n </div>\n {{#if announce}}<p class=\"text-[13px] m-0 p-2 border-l-[3px]\" style=\"background:#A8E6C133;border-color:{{accent}}\">Screen reader: &ldquo;{{label}}, {{role}}, {{checked}}&rdquo;</p>{{/if}}\n <code class=\"text-[12px] text-[#241430aa]\">role=\"{{role}}\" aria-checked=\"{{checked}}\"</code>\n</div>\n<style>\n.aria-tw--switch { width: 48px; height: 26px; border-radius: 999px; }\n.aria-tw--checkbox { width: 26px; height: 26px; border-radius: 6px; }\n.aria-tw--radio { width: 26px; height: 26px; border-radius: 50%; }\n.aria-tw--checkbox .aria-tw__thumb, .aria-tw--radio .aria-tw__thumb { opacity: 0; }\n.aria-tw--switch.is-on .aria-tw__thumb { transform: translateX(22px); }\n.aria-tw--checkbox.is-on .aria-tw__thumb, .aria-tw--radio.is-on .aria-tw__thumb { opacity: 1; }\n</style>", "react": "export function AriaDemo({\n label = \"{{label}}\",\n checked = {{checked}},\n role = \"{{role}}\",\n accent = \"{{accent}}\",\n announce = {{announce}},\n}) {\n const shape = {\n switch: { box: { width: 48, height: 26, borderRadius: 999 }, on: { transform: \"translateX(22px)\", opacity: 1 }, off: { opacity: 1 } },\n checkbox: { box: { width: 26, height: 26, borderRadius: 6 }, on: { opacity: 1 }, off: { opacity: 0 } },\n radio: { box: { width: 26, height: 26, borderRadius: \"50%\" }, on: { opacity: 1 }, off: { opacity: 0 } },\n }[role];\n return (\n <div style={{ width: 320, fontFamily: \"system-ui, sans-serif\", fontSize: 15, color: \"#241430\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n <button type=\"button\" role={role} aria-checked={checked} aria-label={label}\n style={{ position: \"relative\", border: \"2px solid \" + accent, background: \"#FAF7F2\", cursor: \"pointer\", padding: 0, ...shape.box }}>\n <span className=\"aria-thumb\" style={{ position: \"absolute\", top: 2, left: 2, width: 18, height: 18, borderRadius: \"50%\", background: accent, ...(checked ? shape.on : shape.off) }} />\n </button>\n <span style={{ fontWeight: 600 }}>{label}</span>\n </div>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .aria-thumb { transition: transform .15s, opacity .15s; }\n }\n `}</style>\n {announce && <p style={{ margin: \"10px 0 0\", fontSize: 13, background: \"#A8E6C133\", borderLeft: \"3px solid \" + accent, padding: \"8px 10px\" }}>Screen reader: &ldquo;{label}, {role}, {String(checked)}&rdquo;</p>}\n <code style={{ display: \"block\", marginTop: 8, fontSize: 12, color: \"#241430aa\" }}>role=\"{role}\" aria-checked=\"{String(checked)}\"</code>\n </div>\n );\n}" }