[{"data":1,"prerenderedAt":201},["ShallowReactive",2],{"term-a\u002Fa11y":3,"related-a\u002Fa11y":190},{"id":4,"title":5,"acronym":6,"body":7,"category":173,"description":174,"difficulty":175,"extension":176,"letter":177,"meta":178,"navigation":100,"path":179,"related":180,"seo":184,"sitemap":185,"stem":188,"subcategory":6,"__hash__":189},"terms\u002Fterms\u002Fa\u002Fa11y.md","A11y",null,{"type":8,"value":9,"toc":167},"minimark",[10,15,19,23,26,30,156,160,163],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A11y is a nerdy shorthand for 'Accessibility' — there are 11 letters between the A and the Y. It means making your website usable by people with disabilities: blind users with screen readers, keyboard-only users, people with color blindness. It's not optional, it's just being decent.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A11y (accessibility) refers to the practice of designing and developing web applications usable by people with disabilities. This includes semantic HTML, proper ARIA attributes, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Legal requirements (WCAG, ADA, EN 301 549) mandate a11y compliance in many jurisdictions.",[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!-- Bad -->\n\u003Cdiv onclick=\"submit()\">Submit\u003C\u002Fdiv>\n\n\u003C!-- Good -->\n\u003Cbutton type=\"submit\" aria-label=\"Submit order form\">\n  Submit\n\u003C\u002Fbutton>\n","html","",[38,39,40,49,95,102,108,141,147],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Bad -->\n",[41,50,52,56,60,64,67,70,74,78,80,83,87,90,92],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","div",[41,61,63],{"class":62},"spNyl"," onclick",[41,65,66],{"class":54},"=",[41,68,69],{"class":54},"\"",[41,71,73],{"class":72},"s2Zo4","submit",[41,75,77],{"class":76},"sfazB","()",[41,79,69],{"class":54},[41,81,82],{"class":54},">",[41,84,86],{"class":85},"sTEyZ","Submit",[41,88,89],{"class":54},"\u003C\u002F",[41,91,59],{"class":58},[41,93,94],{"class":54},">\n",[41,96,98],{"class":43,"line":97},3,[41,99,101],{"emptyLinePlaceholder":100},true,"\n",[41,103,105],{"class":43,"line":104},4,[41,106,107],{"class":47},"\u003C!-- Good -->\n",[41,109,111,113,116,119,121,123,125,127,130,132,134,137,139],{"class":43,"line":110},5,[41,112,55],{"class":54},[41,114,115],{"class":58},"button",[41,117,118],{"class":62}," type",[41,120,66],{"class":54},[41,122,69],{"class":54},[41,124,73],{"class":76},[41,126,69],{"class":54},[41,128,129],{"class":62}," aria-label",[41,131,66],{"class":54},[41,133,69],{"class":54},[41,135,136],{"class":76},"Submit order form",[41,138,69],{"class":54},[41,140,94],{"class":54},[41,142,144],{"class":43,"line":143},6,[41,145,146],{"class":85},"  Submit\n",[41,148,150,152,154],{"class":43,"line":149},7,[41,151,89],{"class":54},[41,153,115],{"class":58},[41,155,94],{"class":54},[11,157,159],{"id":158},"when-youll-hear-this","When You'll Hear This",[16,161,162],{},"Our a11y audit found 12 violations that need fixing.,A11y is a legal requirement for government websites.,Use the axe DevTools extension to catch a11y issues early.",[164,165,166],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":168},[169,170,171,172],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":158,"depth":51,"text":159},"frontend","A11y is a nerdy shorthand for 'Accessibility' — there are 11 letters between the A and the Y.","beginner","md","a",{},"\u002Fterms\u002Fa\u002Fa11y",[181,182,183],"ARIA","Screen Reader","Semantic HTML",{"title":5,"description":174},{"changefreq":186,"priority":187},"weekly",0.7,"terms\u002Fa\u002Fa11y","c6OhessuDzqEa8-_h9fE20yvBL38UeCyAdE27uKqLG4",[191,195,198],{"title":181,"path":192,"acronym":6,"category":173,"difficulty":193,"description":194},"\u002Fterms\u002Fa\u002Faria","intermediate","ARIA stands for Accessible Rich Internet Applications.",{"title":182,"path":196,"acronym":6,"category":173,"difficulty":175,"description":197},"\u002Fterms\u002Fs\u002Fscreen-reader","A screen reader is software that reads your website out loud for people who can't see the screen.",{"title":183,"path":199,"acronym":6,"category":173,"difficulty":175,"description":200},"\u002Fterms\u002Fs\u002Fsemantic-html","Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs.",1776518252170]