[{"data":1,"prerenderedAt":277},["ShallowReactive",2],{"term-a\u002Faria":3,"related-a\u002Faria":266},{"id":4,"title":5,"acronym":6,"body":7,"category":248,"description":249,"difficulty":250,"extension":251,"letter":252,"meta":253,"navigation":254,"path":255,"related":256,"seo":260,"sitemap":261,"stem":264,"subcategory":6,"__hash__":265},"terms\u002Fterms\u002Fa\u002Faria.md","ARIA",null,{"type":8,"value":9,"toc":242},"minimark",[10,15,19,23,26,30,231,235,238],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"ARIA stands for Accessible Rich Internet Applications. It's a set of HTML attributes you sprinkle on your elements to give screen readers extra context that plain HTML doesn't provide. Like slapping a sticky note on your button that says 'Hey, this opens a dropdown menu.'",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"ARIA (Accessible Rich Internet Applications) is a W3C specification that defines a set of HTML attributes (roles, states, and properties) to make dynamic web content and UI widgets accessible to assistive technologies. ARIA should supplement — not replace — semantic HTML. The first rule of ARIA: don't use ARIA if native HTML can do the job.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Custom dropdown with ARIA -->\n\u003Cbutton\n  aria-haspopup=\"listbox\"\n  aria-expanded=\"false\"\n  aria-controls=\"color-options\"\n>\n  Choose color\n\u003C\u002Fbutton>\n\u003Cul id=\"color-options\" role=\"listbox\" aria-label=\"Color options\">\n  \u003Cli role=\"option\" aria-selected=\"true\">Red\u003C\u002Fli>\n\u003C\u002Ful>\n","html","",[38,39,40,49,60,80,95,110,116,123,134,178,222],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Custom dropdown with ARIA -->\n",[41,50,52,56],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","button\n",[41,61,63,67,70,73,77],{"class":43,"line":62},3,[41,64,66],{"class":65},"spNyl","  aria-haspopup",[41,68,69],{"class":54},"=",[41,71,72],{"class":54},"\"",[41,74,76],{"class":75},"sfazB","listbox",[41,78,79],{"class":54},"\"\n",[41,81,83,86,88,90,93],{"class":43,"line":82},4,[41,84,85],{"class":65},"  aria-expanded",[41,87,69],{"class":54},[41,89,72],{"class":54},[41,91,92],{"class":75},"false",[41,94,79],{"class":54},[41,96,98,101,103,105,108],{"class":43,"line":97},5,[41,99,100],{"class":65},"  aria-controls",[41,102,69],{"class":54},[41,104,72],{"class":54},[41,106,107],{"class":75},"color-options",[41,109,79],{"class":54},[41,111,113],{"class":43,"line":112},6,[41,114,115],{"class":54},">\n",[41,117,119],{"class":43,"line":118},7,[41,120,122],{"class":121},"sTEyZ","  Choose color\n",[41,124,126,129,132],{"class":43,"line":125},8,[41,127,128],{"class":54},"\u003C\u002F",[41,130,131],{"class":58},"button",[41,133,115],{"class":54},[41,135,137,139,142,145,147,149,151,153,156,158,160,162,164,167,169,171,174,176],{"class":43,"line":136},9,[41,138,55],{"class":54},[41,140,141],{"class":58},"ul",[41,143,144],{"class":65}," id",[41,146,69],{"class":54},[41,148,72],{"class":54},[41,150,107],{"class":75},[41,152,72],{"class":54},[41,154,155],{"class":65}," role",[41,157,69],{"class":54},[41,159,72],{"class":54},[41,161,76],{"class":75},[41,163,72],{"class":54},[41,165,166],{"class":65}," aria-label",[41,168,69],{"class":54},[41,170,72],{"class":54},[41,172,173],{"class":75},"Color options",[41,175,72],{"class":54},[41,177,115],{"class":54},[41,179,181,184,187,189,191,193,196,198,201,203,205,208,210,213,216,218,220],{"class":43,"line":180},10,[41,182,183],{"class":54},"  \u003C",[41,185,186],{"class":58},"li",[41,188,155],{"class":65},[41,190,69],{"class":54},[41,192,72],{"class":54},[41,194,195],{"class":75},"option",[41,197,72],{"class":54},[41,199,200],{"class":65}," aria-selected",[41,202,69],{"class":54},[41,204,72],{"class":54},[41,206,207],{"class":75},"true",[41,209,72],{"class":54},[41,211,212],{"class":54},">",[41,214,215],{"class":121},"Red",[41,217,128],{"class":54},[41,219,186],{"class":58},[41,221,115],{"class":54},[41,223,225,227,229],{"class":43,"line":224},11,[41,226,128],{"class":54},[41,228,141],{"class":58},[41,230,115],{"class":54},[11,232,234],{"id":233},"when-youll-hear-this","When You'll Hear This",[16,236,237],{},"Add aria-label to icon buttons so screen readers know what they do.,aria-live regions announce dynamic content updates.,Don't add ARIA to semantic elements that already have implicit roles.",[239,240,241],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":243},[244,245,246,247],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":233,"depth":51,"text":234},"frontend","ARIA stands for Accessible Rich Internet Applications.","intermediate","md","a",{},true,"\u002Fterms\u002Fa\u002Faria",[257,258,259],"A11y","Screen Reader","Semantic HTML",{"title":5,"description":249},{"changefreq":262,"priority":263},"weekly",0.7,"terms\u002Fa\u002Faria","ISV60bN3PhUz8gKBfVM49HUpoYh2oPUu9xeMMyYxcvU",[267,271,274],{"title":257,"path":268,"acronym":6,"category":248,"difficulty":269,"description":270},"\u002Fterms\u002Fa\u002Fa11y","beginner","A11y is a nerdy shorthand for 'Accessibility' — there are 11 letters between the A and the Y.",{"title":258,"path":272,"acronym":6,"category":248,"difficulty":269,"description":273},"\u002Fterms\u002Fs\u002Fscreen-reader","A screen reader is software that reads your website out loud for people who can't see the screen.",{"title":259,"path":275,"acronym":6,"category":248,"difficulty":269,"description":276},"\u002Fterms\u002Fs\u002Fsemantic-html","Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs.",1776518253194]