[{"data":1,"prerenderedAt":164},["ShallowReactive",2],{"term-s\u002Fscreen-reader":3,"related-s\u002Fscreen-reader":156},{"id":4,"title":5,"acronym":6,"body":7,"category":140,"description":141,"difficulty":142,"extension":143,"letter":144,"meta":145,"navigation":84,"path":146,"related":147,"seo":150,"sitemap":151,"stem":154,"subcategory":6,"__hash__":155},"terms\u002Fterms\u002Fs\u002Fscreen-reader.md","Screen Reader",null,{"type":8,"value":9,"toc":134},"minimark",[10,15,19,23,26,30,123,127,130],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A screen reader is software that reads your website out loud for people who can't see the screen. It navigates through your HTML and reads the text, labels, and descriptions. If your buttons just say 'Click here' or your images have no alt text, screen reader users are completely lost.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Screen readers are assistive technology software (e.g., NVDA, JAWS, VoiceOver) that convert on-screen text and UI elements to speech or braille output for users with visual impairments. They traverse the accessibility tree, which is built from the DOM and ARIA attributes. Proper semantic HTML and ARIA are critical for 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!-- Screen reader will say nothing useful -->\n\u003Cimg src=\"graph.png\" \u002F>\n\n\u003C!-- Screen reader will say the alt text -->\n\u003Cimg src=\"graph.png\" alt=\"Bar chart showing 40% growth in Q4 2024\" \u002F>\n","html","",[38,39,40,49,79,86,92],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Screen reader will say nothing useful -->\n",[41,50,52,56,60,64,67,70,74,76],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","img",[41,61,63],{"class":62},"spNyl"," src",[41,65,66],{"class":54},"=",[41,68,69],{"class":54},"\"",[41,71,73],{"class":72},"sfazB","graph.png",[41,75,69],{"class":54},[41,77,78],{"class":54}," \u002F>\n",[41,80,82],{"class":43,"line":81},3,[41,83,85],{"emptyLinePlaceholder":84},true,"\n",[41,87,89],{"class":43,"line":88},4,[41,90,91],{"class":47},"\u003C!-- Screen reader will say the alt text -->\n",[41,93,95,97,99,101,103,105,107,109,112,114,116,119,121],{"class":43,"line":94},5,[41,96,55],{"class":54},[41,98,59],{"class":58},[41,100,63],{"class":62},[41,102,66],{"class":54},[41,104,69],{"class":54},[41,106,73],{"class":72},[41,108,69],{"class":54},[41,110,111],{"class":62}," alt",[41,113,66],{"class":54},[41,115,69],{"class":54},[41,117,118],{"class":72},"Bar chart showing 40% growth in Q4 2024",[41,120,69],{"class":54},[41,122,78],{"class":54},[11,124,126],{"id":125},"when-youll-hear-this","When You'll Hear This",[16,128,129],{},"Test with VoiceOver on Mac to catch screen reader issues.,Screen reader users navigate by headings — use a logical heading hierarchy.,Our modal traps focus correctly for screen reader users.",[131,132,133],"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 .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":135},[136,137,138,139],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":125,"depth":51,"text":126},"frontend","A screen reader is software that reads your website out loud for people who can't see the screen.","beginner","md","s",{},"\u002Fterms\u002Fs\u002Fscreen-reader",[148,149],"A11y","ARIA",{"title":5,"description":141},{"changefreq":152,"priority":153},"weekly",0.7,"terms\u002Fs\u002Fscreen-reader","P9wGJh1d9PzHhMn4R8Nuyw8lmRnypJhDtl4mZ1jiySc",[157,160],{"title":148,"path":158,"acronym":6,"category":140,"difficulty":142,"description":159},"\u002Fterms\u002Fa\u002Fa11y","A11y is a nerdy shorthand for 'Accessibility' — there are 11 letters between the A and the Y.",{"title":149,"path":161,"acronym":6,"category":140,"difficulty":162,"description":163},"\u002Fterms\u002Fa\u002Faria","intermediate","ARIA stands for Accessible Rich Internet Applications.",1776518311170]