[{"data":1,"prerenderedAt":278},["ShallowReactive",2],{"term-a\u002Faccessibility":3,"related-a\u002Faccessibility":259},{"id":4,"title":5,"acronym":6,"body":7,"category":239,"description":240,"difficulty":241,"extension":242,"letter":243,"meta":244,"navigation":100,"path":245,"related":246,"seo":252,"sitemap":253,"stem":256,"subcategory":257,"__hash__":258},"terms\u002Fterms\u002Fa\u002Faccessibility.md","Accessibility","a11y",{"type":8,"value":9,"toc":233},"minimark",[10,15,19,23,26,30,222,226,229],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision. It's not optional if you care about your users. And depending on your country, it might also be the law.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Web accessibility ensures digital content is perceivable, operable, understandable, and robust for users with disabilities (the WCAG guidelines). This includes proper semantic HTML, ARIA attributes, sufficient color contrast, keyboard navigability, focus management, alt text for images, and screen reader compatibility.",[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!-- Inaccessible -->\n\u003Cdiv onclick=\"submit()\">Submit\u003C\u002Fdiv>\n\n\u003C!-- Accessible -->\n\u003Cbutton\n  type=\"submit\"\n  aria-label=\"Submit contact form\"\n  aria-busy=\"true\"\n>\n  Submit\n\u003C\u002Fbutton>\n\n\u003Cimg src=\"chart.png\" alt=\"Bar chart showing Q1 sales up 20%\" \u002F>\n","html","",[38,39,40,49,95,102,108,116,131,146,161,166,172,182,187],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Inaccessible -->\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!-- Accessible -->\n",[41,109,111,113],{"class":43,"line":110},5,[41,112,55],{"class":54},[41,114,115],{"class":58},"button\n",[41,117,119,122,124,126,128],{"class":43,"line":118},6,[41,120,121],{"class":62},"  type",[41,123,66],{"class":54},[41,125,69],{"class":54},[41,127,73],{"class":76},[41,129,130],{"class":54},"\"\n",[41,132,134,137,139,141,144],{"class":43,"line":133},7,[41,135,136],{"class":62},"  aria-label",[41,138,66],{"class":54},[41,140,69],{"class":54},[41,142,143],{"class":76},"Submit contact form",[41,145,130],{"class":54},[41,147,149,152,154,156,159],{"class":43,"line":148},8,[41,150,151],{"class":62},"  aria-busy",[41,153,66],{"class":54},[41,155,69],{"class":54},[41,157,158],{"class":76},"true",[41,160,130],{"class":54},[41,162,164],{"class":43,"line":163},9,[41,165,94],{"class":54},[41,167,169],{"class":43,"line":168},10,[41,170,171],{"class":85},"  Submit\n",[41,173,175,177,180],{"class":43,"line":174},11,[41,176,89],{"class":54},[41,178,179],{"class":58},"button",[41,181,94],{"class":54},[41,183,185],{"class":43,"line":184},12,[41,186,101],{"emptyLinePlaceholder":100},[41,188,190,192,195,198,200,202,205,207,210,212,214,217,219],{"class":43,"line":189},13,[41,191,55],{"class":54},[41,193,194],{"class":58},"img",[41,196,197],{"class":62}," src",[41,199,66],{"class":54},[41,201,69],{"class":54},[41,203,204],{"class":76},"chart.png",[41,206,69],{"class":54},[41,208,209],{"class":62}," alt",[41,211,66],{"class":54},[41,213,69],{"class":54},[41,215,216],{"class":76},"Bar chart showing Q1 sales up 20%",[41,218,69],{"class":54},[41,220,221],{"class":54}," \u002F>\n",[11,223,225],{"id":224},"when-youll-hear-this","When You'll Hear This",[16,227,228],{},"\"Run an a11y audit — the contrast ratio is failing on that grey text.\" \u002F \"Use aria-label when the button has no visible text.\"",[230,231,232],"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":234},[235,236,237,238],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":224,"depth":51,"text":225},"frontend","Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision.","intermediate","md","a",{},"\u002Fterms\u002Fa\u002Faccessibility",[247,248,249,250,251],"Semantic HTML","HTML","ARIA","CSS","Responsive Design",{"title":5,"description":240},{"changefreq":254,"priority":255},"weekly",0.7,"terms\u002Fa\u002Faccessibility",null,"qoXkTapXU7uwLX9j8JmF_WKFcU0JfBIv1DrIS1vhafg",[260,263,268,272,275],{"title":249,"path":261,"acronym":257,"category":239,"difficulty":241,"description":262},"\u002Fterms\u002Fa\u002Faria","ARIA stands for Accessible Rich Internet Applications.",{"title":250,"path":264,"acronym":265,"category":239,"difficulty":266,"description":267},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","beginner","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":248,"path":269,"acronym":270,"category":239,"difficulty":266,"description":271},"\u002Fterms\u002Fh\u002Fhtml","HyperText Markup Language","HTML is like the skeleton of a webpage. You write tags like \u003Ch1> and \u003Cp> and the browser builds the bones of your site from them.",{"title":251,"path":273,"acronym":257,"category":239,"difficulty":266,"description":274},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":247,"path":276,"acronym":257,"category":239,"difficulty":266,"description":277},"\u002Fterms\u002Fs\u002Fsemantic-html","Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs.",1776518254020]