2c:["$","div","5",{"className":"mb-8","children":["$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"label vs labelledby vs describedby in practice"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"Password\n\n

Must be at least 8 characters.

\n \n

\n\n"}]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined"]}] 2d:["$","div","6",{"className":"mb-8","children":[["$","h2",null,{"id":"live-regions","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Live regions"}],["$","p",null,{"className":"text-text-dim leading-relaxed mb-4","children":["Live regions tell screen readers to announce dynamic content changes without the user navigating to them. Essential for toast notifications, form errors injected after submission, and status updates."]}],"$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined"]}] 2e:["$","div","7",{"className":"mb-8","children":["$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"ARIA live regions"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"\n

\n \n

\n\n\n

\n \n

\n\n"}]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined"]}] 2f:["$","div","8",{"className":"mb-8","children":["$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"flex gap-3 p-4 rounded border mb-4","style":{"borderColor":"#3B82F630","background":"#3B82F608"},"children":[["$","div",null,{"className":"shrink-0 text-lg leading-none mt-0.5","children":"💡"}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold mb-0.5","style":{"color":"#3B82F6"},"children":"ARIA is a post-it note on top of an element, not a replacement for it"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"ARIA does not change how an element looks or behaves in the browser. It only changes what the accessibility tree reports about it. Putting role=\"button\" on a div is like putting a post-it note saying \"I am a button\" on a piece of cardboard — it might fool the screen reader, but you still have to add all the button behaviour yourself. Use the real element whenever you can."}]]}]]}],"$undefined","$undefined","$undefined","$undefined"]}] 30:["$","div","9",{"className":"mb-8","children":["$undefined","$undefined","$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"flex gap-3 p-4 rounded border border-red/20 bg-red/5 mb-4","children":[["$","div",null,{"className":"w-5 h-5 rounded border border-red/40 bg-red/10 flex items-center justify-center shrink-0 mt-0.

ARIA — When HTML Isn't Enough