1import{p as n,d as c,c as g,a as t,v as o,E as r,x as s,t as i,G as u,o as x}from"./D-uLEkMY.js";import{_ as p}from"./C1elgM-h.js";import{u as m}from"./BW-h8pph.js";const l=n("/images/blog/what-is-alt-text/hero.webp"),h=n("/images/blog/what-is-alt-text/hero-480w.webp"),f=n("/images/blog/what-is-alt-text/hero-960w.webp"),b=h+" 480w, "+f+" 960w, "+l+" 1408w",w={class:"bg-canvas text-foreground flex min-h-screen w-full flex-col items-center pt-12 pb-24"},y={class:"mb-8 w-full px-4 pt-24 text-center"},v={class:"mx-auto max-w-3xl"},k={class:"mb-4 text-sm"},A={class:"mt-6 text-center text-sm"},q={class:"mx-auto w-full max-w-3xl px-4"},T={class:"bg-surface space-y-8 rounded-2xl p-8 text-left shadow-2xl sm:p-10"},I={id:"alt-text-examples",class:"scroll-mt-24 space-y-4"},S={class:"rounded-xl border border-border bg-surface-2 p-6"},W={class:"flex items-start gap-4"},C={id:"ai-alt-text",class:"scroll-mt-24 space-y-4"},G={class:"rounded-xl border border-border bg-gradient-to-br from-brand-blue/5 via-brand-purple/5 to-brand-lavender/5 p-6 dark:from-brand-blue/15 dark:via-brand-purple/15 dark:to-brand-lavender/15"},E={class:"flex flex-wrap gap-3"},j={class:"space-y-4 border-t border-border pt-8"},M={class:"flex flex-wrap gap-3"},D=c({name:"BlogPostWhatIsAltText",__name:"index",setup(_){return m({title:"What is Alt Text? The Complete Guide to Image Alt Text",meta:[{name:"description",content:"Learn what alt text is, why it matters for accessibility and SEO, how to write it well, and see real examples of good vs. bad alt text. The complete guide."},{name:"keywords",content:"what is alt text, alt text, alt text examples, how to write alt text, image alt text, alt text SEO, alt text accessibility, WCAG alt text, alt attribute"},{property:"og:type",content:"article"},{property:"og:title",content:"What is Alt Text? The Complete Guide to Image Alt Text"},{property:"og:description",content:"Learn what alt text is, why it matters for accessibility and SEO, how to write it well, and see real examples of good vs. bad alt text."},{property:"og:image",content:"https://alttextstudio.com/images/blog/what-is-alt-text/hero.webp"},{property:"og:image:width",content:"1408"},{property:"og:image:height",content:"768"},{property:"og:image:alt",content:"What is Alt Text? The Complete Guide to Image Alt Text | Alt Text Studio"},{property:"og:url",content:"https://alttextstudio.com/blog/what-is-alt-text"},{property:"article:published_time",content:"2026-04-13T00:00:00Z"},{property:"article:author",content:"Bradley White"},{property:"article:section",content:"Accessibility"},{property:"article:tag",content:"alt text"},{property:"article:tag",content:"accessibility"},{property:"article:tag",content:"SEO"},{property:"article:tag",content:"WCAG"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:title",content:"What is Alt Text? The Complete Guide to Image Alt Text"},{name:"twitter:description",content:"Learn what alt text is, why it matters for accessibility and SEO, how to write it well, and see real examples."},{name:"twitter:image",content:"https://alttextstudio.com/images/blog/what-is-alt-text/hero.webp"},{name:"twitter:image:alt",content:"What is Alt Text? The Complete Guide to Image Alt Text | Alt Text Studio"}],link:[{rel:"canonical",href:"https://alttextstudio.com/blog/what-is-alt-text"}],script:[{type:"application/ld+json",innerHTML:JSON.stringify({"@context":"https://schema.org","@type":"Article",headline:"What is Alt Text? The Complete Guide to Image Alt Text",description:"Learn what alt text is, why it matters for accessibility and SEO, how to write it well, and see real examples of good vs. bad alt text.",image:["https://alttextstudio.com/images/blog/what-is-alt-text/hero.webp"],author:{"@type":"Person",name:"Bradley White",url:"https://alttextstudio.com/about"},publisher:{"@type":"Organization",name:"Alt Text Studio",url:"https://alttextstudio.com",logo:{"@type":"ImageObject",url:"https://alttextstudio.com/favicon-48x48.png"}},datePublished:"2026-04-13T08:00:00-04:00",dateModified:"2026-04-13T08:00:00-04:00",mainEntityOfPage:{"@type":"WebPage","@id":"https://alttextstudio.com/blog/what-is-alt-text"}})},{type:"application/ld+json",innerHTML:JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:[{"@type":"Question",name:"What is alt text in HTML?",acceptedA
1nswer:{"@type":"Answer",text:"Alt text in HTML is the value of the alt attribute on an <img> tag. It provides a text description of the image for screen readers, search engines, and situations where the image cannot be displayed."}},{"@type":"Question",name:"How long should alt text be?",acceptedAnswer:{"@type":"Answer",text:"Aim for one to two concise sentences. The commonly cited 125-character limit comes from older screen reader behavior, not a hard technical rule. Focus on describing the image's purpose efficiently rather than hitting a specific character count."}},{"@type":"Question",name:"Does alt text help SEO?",acceptedAnswer:{"@type":"Answer",text:"Yes. Alt text is a confirmed Google ranking factor for image search. It also contributes to the overall topic relevance of the page, which can improve regular search rankings."}},{"@type":"Question",name:"When should I use empty alt text?",acceptedAnswer:{"@type":"Answer",text:'Use alt="" when an image is purely decorative, such as background patterns, visual spacers, or icons that duplicate adjacent text. This tells assistive technology to skip the image.'}},{"@type":"Question",name:"Is alt text required by law?",acceptedAnswer:{"@type":"Answer",text:"In many jurisdictions, yes. The ADA (US), European Accessibility Act (EU), and similar laws require digital content to be accessible. Missing alt text is one of the most frequently cited violations."}},{"@type":"Question",name:"Can AI write good alt text?",acceptedAnswer:{"@type":"Answer",text:"Modern AI vision models produce high-quality alt text that is accurate and natural-sounding. AI is especially valuable for large-scale projects. The best approach is to use AI-generated alt text as a starting point and review it for accuracy."}}]})}]}),(B,e)=>{const a=u,d=p;return x(),g("div",w,[t("section",y,[t("div",v,[t("div",k,[o(a,{to:"/blog",class:"text-accent hover:underline"},{default:r(()=>e[0]||(e[0]=[s(" Blog ",-1)])),_:1,__:[0]})]),e[3]||(e[3]=t("h1",{class:"text-foreground mb-4 text-4xl font-bold sm:text-5xl"}," What is Alt Text? The Complete Guide to Image Alt Text ",-1)),e[4]||(e[4]=t("p",{class:"text-muted mx-auto max-w-2xl text-lg"}," Everything you need to know about alt text: what it is, why it matters for accessibility and SEO, how to write it well, and real examples you can follow. ",-1)),t("div",A,[o(a,{to:"/about",class:"text-foreground font-semibold hover:text-accent transition-colors"},{default:r(()=>e[1]||(e[1]=[s("Bradley White",-1)])),_:1,__:[1]}),e[2]||(e[2]=t("p",{class:"text-muted-2"},[t("time",{datetime:"2026-04-13"},"April 13, 2026"),s(" · 13 min read ")],-1))])])]),e[23]||(e[23]=t("div",{class:"mx-auto mb-2 w-full max-w-3xl px-4 lg:mb-8"},[t("img",{src:l,srcset:b,sizes:"(max-width: 768px) 100vw, 768px",alt:"Digital graphic showing how alt text works: a photo of a golden retriever puppy on a park bench with the HTML alt attribute reading 'A golden retriever puppy sitting on a wooden park bench,' a screen reader icon on the left, and a search engine bot icon on the right",class:"w-full rounded-2xl shadow-lg",width:"1408",height:"768",fetchpriority:"high"})],-1)),o(d,{title:"What is Alt Text? The Complete Guide to Image Alt Text",url:"https://alttextstudio.com/blog/what-is-alt-text"}),t("div",q,[t("article",T,[e[20]||(e[20]=i(`<section class="space-y-4"><p class="text-muted text-lg leading-relaxed"> Every image on the web tells a story, but only if you can see it. For the 2.2 billion people worldwide living with a vision impairment, for Google's crawlers indexing your pages, and for anyone on a slow connection where images fail to load, <strong class="text-foreground">alt text</strong> is what makes images accessible to everyone. </p><p class="text-muted leading-relaxed"> If you build websites, write content, run an online store, or manage digital assets, understanding alt text is not optional. It is a core part of making the web work. This guide covers everything: what alt text is, why it matters, how to write it well, and common mistakes to avoid. </p></section><section class="rounded-xl border border-brand-purple/20 bg-gradient-to-br from-brand-blue/5 via-brand-purple/5 to-brand-lavender/5 p-6 dark:from-brand-blue/15 dark:via-brand-purple/15 dark:to-brand-lavender/15"><div class="mb-3 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-brand-purple" aria-hidden="true">
1<path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z"></path></svg><p class="text-foreground text-sm font-semibold uppercase tracking-wide">Summary</p></div><p class="text-muted leading-relaxed"><strong class="text-foreground">Alt text</strong> is a short text description added to an image's HTML code. It enables screen readers to describe images to visually impaired users, helps search engines understand and rank your images, and provides fallback text when images fail to load. Good alt text is specific, concise (typically one to two sentences), and considers the context the image appears in. Decorative images should use empty alt text (<code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground">alt=""</code>). Missing alt text is the most common accessibility violation on the web and can expose businesses to legal risk under the ADA, the European Accessibility Act, and similar legislation. </p></section><nav aria-label="Table of contents" class="rounded-xl border border-border bg-surface-2 p-6"><p class="text-foreground mb-3 text-sm font-semibold uppercase tracking-wide">In this article</p><ol class="list-decimal space-y-1.5 pl-5 text-sm"><li><a href="#what-is-alt-text" class="text-accent hover:underline">What is alt text?</a></li><li><a href="#why-alt-text-matters" class="text-accent hover:underline">Why alt text matters</a></li><li><a href="#how-to-write-alt-text" class="text-accent hover:underline">How to write good alt text</a></li><li><a href="#alt-text-examples" class="text-accent hover:underline">Alt text examples: good vs. bad</a></li><li><a href="#alt-text-and-seo" class="text-accent hover:underline">Alt text and SEO</a></li><li><a href="#wcag-requirements" class="text-accent hover:underline">Alt text and WCAG compliance</a></li><li><a href="#common-mistakes" class="text-accent hover:underline">Common alt text mistakes</a></li><li><a href="#ai-alt-text" class="text-accent hover:underline">Using AI to generate alt text</a></li><li><a href="#faq" class="text-accent hover:underline">FAQ</a></li></ol></nav><section id="what-is-alt-text" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">What is alt text?</h2><p class="text-muted leading-relaxed"><strong class="text-foreground">Alt text</strong> (short for "alternative text") is a written description of an image that is added to the HTML code of a web page. It serves as a text substitute when the image cannot be seen, whether by a person using a screen reader, a search engine crawler, or a browser that failed to load the image. </p><p class="text-muted leading-relaxed"> In HTML, alt text is defined using the <code class="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm text-foreground">alt</code> attribute on the <code class="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm text-foreground"><img></code> tag: </p><div class="overflow-x-auto rounded-lg border border-border bg-surface-2 p-4"><pre class="text-sm leading-relaxed"><code class="text-foreground"><img 2 src="golden-retriever.jpg" 3 <span class="text-accent">alt="A golden retriever puppy sitting on a park bench"</span> 4/></code></pre></div><p class="text-muted leading-relaxed"> The alt text is not visible on the page under normal conditions. It lives in the code and is read aloud by assistive technology, displayed when images break, and parsed by search engines to understand what an image shows. </p></section><section id="why-alt-text-matters" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">Why alt text matters</h2><p class="text-muted leading-relaxed"> Alt text is not just a nice-to-have. It is a foundational requirement for web accessibility, a direct ranking signal for search engines, and increasingly a legal obligation. </p><h3 class="text-foreground text-lg font-semibold">Accessibility</h3><p class="text-muted leading-relaxed"> Screen readers (software that reads web content aloud for people who are blind or have low vision) rely entirely on alt text to convey what an image shows. Without it, the screen reader either skips the image entirely or reads the file name, which is almost never helpful. </p><p class="text-muted leading-relaxed"> Imagine hearing <em>"image_DSC04872_final_v2.jpg"</em> instead of <em>"Team photo at the 2026 company retreat."</em> Alt text turns an unusable experience into a meaningful one. </p><h3 class="text-foreground text-lg font-semibold">Search engine optimization (SEO) and Generative Engine Optimization (GEO)</h3><p class="text-muted leading-relaxed"> Search engines cannot "see" images the way humans do, and neither can AI tools like ChatGPT, Gemini, or Perplexity. Both rely on alt text to understand what an image depicts. As AI-powered search grows alongside traditional search, descriptive alt text now influences how y
4our content performs across all of them: </p><ul class="list-disc space-y-2 pl-5 text-muted"><li><strong class="text-foreground">Google Image Search rankings:</strong> descriptive alt text helps your images surface in image search results, driving additional organic traffic.</li><li><strong class="text-foreground">Page context:</strong> alt text gives Google more information about the page's topic, which can improve the page's overall search relevance.</li><li><strong class="text-foreground">Featured snippets:</strong> images with strong alt text are more likely to appear in featured snippets and rich results.</li><li><strong class="text-foreground">AI-generated answers:</strong> generative AI tools crawl and synthesize web content to answer user queries. Descriptive alt text helps these models understand, index, and cite your images, making your content more likely to appear in AI-generated responses. Learn more in our guide to <a href="/blog/generative-engine-optimization" class="text-accent hover:underline">Generative Engine Optimization (GEO)</a>.</li></ul><h3 class="text-foreground text-lg font-semibold">Legal compliance</h3><p class="text-muted leading-relaxed"> Web accessibility is a legal requirement in many jurisdictions. In the United States, the Americans with Disabilities Act (ADA) has been interpreted by courts to apply to websites. In 2024 alone, over 4,000
4web accessibility lawsuits were filed. The European Accessibility Act, which took effect in June 2025, applies to businesses selling to EU consumers. Missing alt text is one of the most commonly cited violations. </p><h3 class="text-foreground text-lg font-semibold">Broken image fallback</h3><p class="text-muted leading-relaxed"> When an image fails to load (due to a slow connection, a CDN outage, or a broken URL), the browser displays the alt text in its place. Good alt text ensures that the page's meaning is preserved even when the image is missing. </p></section><section id="how-to-write-alt-text" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">How to write good alt text</h2><p class="text-muted leading-relaxed"> Writing good alt text is a skill, but it is not difficult once you know the principles. Here are the guidelines that accessibility experts and search engines agree on. </p><div class="space-y-6"><div class="rounded-xl border border-border p-5"><h3 class="text-foreground mb-2 font-semibold">1. Be specific and descriptive</h3><p class="text-muted text-sm leading-relaxed"> Describe what the image actually shows. Vague descriptions like "a photo" or "an image of a thing" do not help anyone. Instead of <em>"dog"</em>, write <em>"A golden retriever puppy sitting on a wooden park bench."</em></p></div><div class="rounded-xl border border-border p-5"><h3 class="text-foreground mb-2 font-semibold">2. Keep it concise</h3><p class="text-muted text-sm leading-relaxed"> Aim for one to two concise sentences. There is no hard character limit. The commonly cited 125-character rule comes from older screen reader limitations, not a technical standard. Focus on describing the image's purpose efficiently. If an image requires extended explanation (like a chart or infographic), put the detailed description in the surrounding text and use the alt text to summarize. </p></div><div class="rounded-xl border border-border p-5"><h3 class="text-foreground mb-2 font-semibold">3. Consider the context</h3><p class="text-muted text-sm leading-relaxed"> The same image can need different alt text depending on where it appears. A photo of a coffee cup on a product page should describe the product (<em>"White ceramic mug, 12 oz, with matte finish"</em>), while the same photo in a blog post about morning routines might say <em>"A cup of black coffee on a kitchen counter at sunrise."</em></p></div><div class="rounded-xl border border-border p-5"><h3 class="text-foreground mb-2 font-semibold">4. Do not start with "image of" or "photo of"</h3><p class="text-muted text-sm leading-relaxed"> Screen readers already announce that an element is an image. Starting your alt text with "image of" is redundant. The user hears <em>"Image: image of a dog"</em>, which is repetitive. Jump straight into the description. </p></div><div class="rounded-xl border border-border p-5"><h3 class="text-foreground mb-2 font-semibold">5. Use empty alt text for decorative images</h3><p class="text-muted text-sm leading-relaxed"> If an image is purely decorative (a background pattern, a visual divider, or an icon next to text that already says the same thing), use an empty alt attribute: <code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground">alt=""</code>. This tells screen readers to skip the image entirely rather than announcing something unhelpful. </p></div><div class="rounded-xl border border-border p-5"><h3 class="text-foreground mb-2 font-semibold">6. Include relevant keywords naturally</h3><p class="text-muted text-sm leading-relaxed"> If a keyword fits naturally into the description, include it. For example, <em>"Wireless Bluetooth headphones with noise cancellation on a desk"</em> is both accurate and SEO-friendly. Never stuff keywords. Google penalizes it and screen reader users find it confusing. </p></div></div></section>`,6)),t("section",I,[e[9]||(e[9]=i('<h2 class="text-foreground text-2xl font-semibold">Alt text examples: good vs. bad</h2><p class="text-muted leading-relaxed"> The best way to learn alt text is to see it in action. Here are real-world examples across common image types. </p><div class="space-y-3"><h3 class="text-foreground text-lg font-semibold">Product photos</h3><div class="overflow-hidden rounded-xl border border-border"><div class="flex items-center gap-3 border-b border-red-200 bg-red-50 px-4 py-3 dark:border-red-500/30 dark:bg-red-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><p class="text-sm font-semibold text-red-600 dark:text-red-400">Bad</p><code class="ml-auto rounded bg-red-100 px-2 py-0.5 font-mono text-xs text-red-700 dark:bg-red-500/20 dark:text-red-300">alt="shoe"</code></div><div class="flex items-center gap-3 border-b border-green-200 bg-green-50 px-4 py-3 dark:border-green-500/30 dark:bg-green-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-green-600 dark:text-green-400" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg><p class="text-sm font-semibold text-green-600 dark:text-green-400">Good</p><code class="ml-auto rounded bg-green-100 px-2 py-0.5 font-mono text-xs text-green-700 dark:bg-green-500/20 dark:text-green-300">alt="Nike Air Max 90 in white and grey, men's running shoe, side view"</code></div><div class="bg-surface-2 px-4 py-3"><p class="text-muted text-xs"><strong class="text-foreground">Why:</strong> Product alt text should include the brand, product name, key attributes (color, size), and the angle or view, the same details a shopper needs. </p></div></div></div><div class="space-y-3"><h3 class="text-foreground text-lg font-semibold">Charts and infographics</h3><div class="overflow-hidden rounded-xl border border-border"><div class="flex items-center gap-3 border-b border-red-200 bg-red-50 px-4 py-3 dark:border-red-500/30 dark:bg-red-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><p class="text-sm font-semibold text-red-600 dark:text-red-400">Bad</p><code class="ml-auto rounded bg-red-100 px-2 py-0.5 font-mono text-xs text-red-700 dark:bg-red-500/20 dark:text-red-300">alt="chart"</code></div><div class="flex items-center gap-3 border-b border-green-200 bg-green-50 px-4 py-3 dark:border-green-500/30 dark:bg-green-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-green-600 dark:text-green-400" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg><p class="text-sm font-semibold text-green-600 dark:text-green-400">Good</p><code class="ml-auto rounded bg-green-100 px-2 py-0.5 font-mono text-xs text-green-700 dark:bg-green-500/20 dark:text-green-300">alt="Bar chart showing website traffic grew 40% after adding alt text to all product images over 3 months"</code></div><div class="bg-surface-2 px-4 py-3"><p class="text-muted text-xs"><strong class="text-foreground">Why:</strong> For data visualizations, describe the key takeaway or trend rather than every data point. The alt text should convey the same insight a sighted user gets at a glance. </p></div></div></div><div class="space-y-3"><h3 class="text-foreground text-lg font-semibold">Decorative images</h3><div class="overflow-hidden rounded-xl border border-border"><div class="flex items-center gap-3 border-b border-red-200 bg-red-50 px-4 py-3 dark:border-red-500/30 dark:bg-red-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><p class="text-sm font-semibold text-red-600 dark:text-red-400">Bad</p><code class="ml-auto rounded bg-red-100 px-2 py-0.5 font-mono text-xs text-red-700 dark:bg-red-500/20 dark:text-red-300">alt="blue decorative divider line"</code></div><div class="flex items-center gap-3 border-b border-green-200 bg-green-50 px-4 py-3 dark:border-green-500/30 dark:bg-green-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-green-600 dark:text-green-400" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg><p class="text-sm font-semibold text-green-600 dark:text-green-400">Good</p><code class="ml-auto rounded bg-green-100 px-2 py-0.5 font-mono text-xs text-green-700 dark:bg-green-500/20 dark:text-green-300">alt=""</code></div><div class="bg-surface-2 px-4 py-3"><p class="text-muted text-xs"><strong class="text-foreground">Why:</strong> Purely decorative images that add no informational value should use empty alt text. This tells screen readers to skip the image rather than announcing something useless. </p></div></div></div><div class="space-y-3"><h3 class="text-foreground text-lg font-semibold">Functional images (buttons, links)</h3><div class="overflow-hidden rounded-xl border border-border"><div class="flex items-center gap-3 border-b border-red-200 bg-red-50 px-4 py-3 dark:border-red-500/30 dark:bg-red-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><p class="text-sm font-semibold text-red-600 dark:text-red-400">Bad</p><code class="ml-auto rounded bg-red-100 px-2 py-0.5 font-mono text-xs text-red-700 dark:bg-red-500/20 dark:text-red-300">alt="icon"</code></div><div class="flex items-center gap-3 border-b border-green-200 bg-green-50 px-4 py-3 dark:border-green-500/30 dark:bg-green-500/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-green-600 dark:text-green-400" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg><p class="text-sm font-semibold text-green-600 dark:text-green-400">Good</p><code class="ml-auto rounded bg-green-100 px-2 py-0.5 font-mono text-xs text-green-700 dark:bg-green-500/20 dark:text-green-300">alt="Search"</code></div><div class="bg-surface-2 px-4 py-3"><p class="text-muted text-xs"><strong class="text-foreground">Why:</strong> When an image functions as a button or link, the alt text should describe the action, not the image. A magnifying glass icon used as a search button should say "Search," not "magnifying glass icon." </p></div></div></div>',6)),t("div",S,[t("div",W,[e[8]||(e[8]=t("div",{class:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-purple-100 text-purple-600 dar
4k:bg-purple-500/20 dark:text-purple-300"},[t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"h-5 w-5","aria-hidden":"true"},[t("circle",{cx:"11",cy:"11",r:"8"}),t("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})])],-1)),t("div",null,[e[6]||(e[6]=t("h3",{class:"text-foreground mb-1 font-semibold"},"How does your site measure up?",-1)),e[7]||(e[7]=t("p",{class:"text-muted mb-3 text-sm leading-relaxed"}," Wondering how many of your images are missing alt text right now? Our free accessibility audit scans any page and shows you exactly which images need attention. ",-1)),o(a,{to:"/audit",class:"group inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-semibold text-foreground shadow-sm transition-all duration-300 hover:bg-surface-2 hover:shadow-md"},{default:r(()=>e[5]||(e[5]=[s(" Audit your site's alt text ",-1),t("svg",{class:"h-4 w-4 transition-transform duration-300 group-hover:translate-x-1",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[t("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})],-1)])),_:1,__:[5]})])])])]),e[21]||(e[21]=i('<section id="alt-text-and-seo" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">Alt text and SEO</h2><p class="text-muted leading-relaxed"> Google has been explicit: alt text is one of the most important factors for ranking in Google Image Search. But its SEO value extends beyond images. </p><h3 class="text-foreground text-lg font-semibold">How search engines use alt text</h3><ul class="list-disc space-y-2 pl-5 text-muted"><li><strong class="text-foreground">Image indexing:</strong> Alt text is the primary way Google understands what an image shows. Without it, your images are effectively invisible to image search. </li><li><strong class="text-foreground">Page relevance:</strong> Alt text contributes to the overall topic signal of a page. If your page is about "wireless headphones" and your images have alt text describing wireless headphones, that reinforces the page's relevance for that query. </li><li><strong class="text-foreground">Anchor text equivalent:</strong> When an image is wrapped in a link, the alt text functions as anchor text, giving Google context about the linked page. </li></ul><h3 class="text-foreground text-lg font-semibold">SEO best practices for alt text</h3><ul class="list-disc space-y-2 pl-5 text-muted"><li>Include your target keyword naturally, but only if it accurately describes the image.</li><li>For ecommerce, include the product name, brand, and distinguishing attributes.</li><li>Do not stuff keywords. <em>"shoes sneakers running shoes athletic shoes buy shoes"</em> is spam and Google will ignore or penalize it.</li><li>Every image on the page should have unique alt text. Duplicating the same description across multiple images wastes an opportunity.</li></ul></section><section id="wcag-requirements" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">Alt text and WCAG compliance</h2><p class="text-muted leading-relaxed"> The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility. Alt text falls under <strong class="text-foreground">WCAG Success Criterion 1.1.1: Non-text Content</strong>, which is a Level A requirement (the minimum level of conformance). </p><p class="text-muted leading-relaxed"> In plain language, WCAG 1.1.1 requires that all non-text content (images, icons, charts, audio, video) has a text alternative that serves an equivalent purpose. Here is what that means for different image types: </p><ul class="list-disc space-y-2 pl-5 text-muted"><li><strong class="text-foreground">Informative images:</strong> Must have alt text that conveys the same information as the image.</li><li><strong class="text-foreground">Functional images:</strong> Must have alt text that describes the function (e.g., "Submit form," "Go to homepage").</li><li><strong class="text-foreground">Decorative images:</strong> Must have empty alt text (<code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground">alt=""</code>) so they are skipped by assistive technology.</li><li><strong class="text-foreground">Complex images:</strong> Charts, diagrams, and infographics need a short alt text summary plus a longer text description nearby or linked.</li><li><strong class="text-foreground">Images of text:</strong> The alt text must contain the same text that appears in the image.</li></ul><p class="text-muted leading-relaxed"> Missing alt text is consistently the <strong class="text-foreground">most common WCAG violation</strong> found on the web. The <a href="https://webaim.org/projects/million/" target="_blank" rel="noopener noreferrer" class="text-accent underline hover:opacity-90">WebAIM Million</a> study, which audits the top one million home pages annually, has found that over one-third of all images are missing alt text every year since the study began. </p></section><section id="common-mistakes" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">Common alt text mistakes</h2><p class="text-muted leading-relaxed"> Knowing what to avoid is just as important as knowing what to do. </p><div class="space-y-3"><div class="flex items-start gap-3 rounded-lg border border-border p-4"><span class="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-bold text-red-600 dark:bg-red-500/20 dark:text-red-400">1</span><div><p class="text-foreground font-semibold">Leaving alt text empty on informative images</p><p class="text-muted mt-1 text-sm">The most common mistake. If an image conveys information, it needs a description. An empty <code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground">alt=""</code> should only be used on truly decorative images.</p></div></div><div class="flex items-start gap-3 rounded-lg border border-border p-4"><span class="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-bold text-red-600 dark:bg-red-500/20 dark:text-red-400">2</span><div><p class="text-foreground font-semibold">Using the file name as alt text</p><p class="text-muted mt-1 text-sm"><em>"IMG_4032.jpg"</em> or <em>"hero-banner-final-v3.png"</em> tells the user nothing about what the image shows.</p></div></div><div class="flex items-start gap-3 rounded-lg border border-border p-4"><span class="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-bold text-red-600 dark:bg-red-500/20 dark:text-red-400">3</span><div><p class="text-foreground font-semibold">Keyword stuffing</p><p class="text-muted mt-1 text-sm">Writing <em>"best cheap running shoes buy running shoes online discount running shoes"</em> is spam. It hurts SEO and is hostile to screen reader users.</p></div></div><div class="flex items-start gap-3 rounded-lg border border-border p-4"><span class="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-bold text-red-600 dark:bg-red-500/20 dark:text-red-400">4</span><div><p class="text-foreground font-semibold">Starting with "image of" or "picture of"</p><p class="text-muted mt-1 text-sm">Screen readers already announce that the element is an image. The prefix is redundant and wastes the reader's time.</p></div></div><div class="flex items-start gap-3 rounded-lg border border-border p-4"><span class="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-bold text-red-600 dark:bg-red-500/20 dark:text-red-400">5</span><div><p class="text-foreground font-semibold">Writing alt text that is too long</p><p class="text-muted mt-1 text-sm">Very long alt text can be difficult for screen reader users to navigate. Keep descriptions focused on the most important information; one to two sentences is usually enough.</p></div></div><div class="flex items-start gap-3 rounded-lg border border-border p-4"><span class="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-bold text-red-600 dark:bg-red-500/20 dark:text-red-400">6</span><div><p class="text-foreground font-semibold">Using the same alt text for every image</p><p class="text-muted mt-1 text-sm">Every image on a page should have unique, specific alt text. Duplicating descriptions defeats the purpose and signals low quality to search engines.</p></div></div></div></section>',3)),t("section",C,[e[14]||(e[14]=t("h2",{class:"text-foreground text-2xl font-semibold"},"Using AI to generate alt text",-1)),e[15]||(e[15]=t("p",{class:"text-muted leading-relaxed"}," Writing alt text by hand is the gold standard, but it does not scale. An ecommerce store with 10,000 product images, a news site publishing dozens of articles a day, or a government agency digitizing years of archived content cannot realistically hand-write every description. ",-1)),e[16]||(e[16]=t("p",{class:"text-muted leading-relaxed"}," This is where AI-powered alt text generation tools can help. Modern vision models can analyze an image and produce accurate, natural-sounding descriptions in seconds. The best approach is to use AI as a starting point and then review and refine the output. ",-1)),t("div",G,[e[12]||(e[12]=t("h3",{class:"text-foreground mb-2 text-lg font-semibold"},"Generate alt text with Alt Text Studio",-1)),e[13]||(e[13]=t("p",{class:"text-muted mb-4 text-sm leading-relaxed"}," Alt Text Studio uses leading AI vision models to generate accurate, descriptive alt text for your images. Upload one image or hundreds, generate descriptions in any of 194 languages, add SEO keywords or product context, and export in CSV, JSON, HTML, or plain text. ",-1)),t("div",E,[o(a,{to:"/create",class:"group inline-flex items-center gap-2 rounded-lg bg-accent px-5 py-2.5 text-sm font-semibold text-on-accent shadow-md transition-all duration-300 hover:opacity-90 hover:shadow-lg"},{default:r(()=>e[10]||(e[10]=[s(" Try it free ",-1),t("svg",{class:"h-4 w-4 transition-transform duration-300 group-hover:translate-x-1",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[t("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})],-1)])),_:1,__:[10]}),o(a,{to:"/examples",class:"inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-5 py-2.5 text-sm font-semibold text-foreground shadow-md transition-all duration-300 hover:bg-surface-2 hover:shadow-lg"},{default:r(()=>e[11]||(e[11]=[s(" See examples ",-1)])),_:1,__:[11]})])])]),e[22]||(e[22]=i('<section id="faq" class="scroll-mt-24 space-y-4"><h2 class="text-foreground text-2xl font-semibold">Frequently asked questions</h2><div class="divide-y divide-border rounded-xl border border-border"><div class="p-5"><h3 class="text-foreground font-semibold">What is alt text in HTML?</h3><p class="text-muted mt-2 text-sm leading-relaxed"> Alt text in HTML is the value of the <code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground">alt</code> attribute on an <code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground"><img></code> tag. It provides a text description of the image for screen readers, search engines, and situations where the image cannot be displayed. </p></div><div class="p-5"><h3 class="text-foreground font-semibold">How long should alt text be?</h3><p class="text-muted mt-2 text-sm leading-relaxed"> Aim for one to two concise sentences. The commonly cited 125-character limit comes from older screen reader behavior, not a hard technical rule. Focus on describing the image's purpose efficiently. Keep it brief, but don't sacrifice clarity just to hit a character count. </p></div><div class="p-5"><h3 class="text-foreground font-semibold">Does alt text help SEO?</h3><p class="text-muted mt-2 text-sm leading-relaxed"> Yes. Alt text is a confirmed Google ranking factor for image search. It also contributes to the overall topic relevance of the page, which can improve regular search rankings. Google has explicitly recommended using descriptive alt text in its SEO documentation. </p></div><div class="p-5"><h3 class="text-foreground font-semibold">When should I use empty alt text?</h3><p class="text-muted mt-2 text-sm leading-relaxed"> Use <code class="rounded bg-surface-2 px-1 font-mono text-xs text-foreground">alt=""</code> when an image is purely decorative, such as background patterns, visual spacers, or icons that duplicate adjacent text. This tells assistive technology to skip the image. </p></div><div class="p-5"><h3 class="text-foreground font-semibold">Is alt text required by law?</h3><p class="text-muted mt-2 text-sm leading-relaxed">
4 In many jurisdictions, yes. The ADA (US), European Accessibility Act (EU), Accessibility for Ontarians with Disabilities Act (Canada), and similar laws in other countries require digital content to be accessible. Missing alt text is one of the most frequently cited violations in accessibility lawsuits. </p></div><div class="p-5"><h3 class="text-foreground font-semibold">Can AI write good alt text?</h3><p class="text-muted mt-2 text-sm leading-relaxed"> Modern AI vision models produce high-quality alt text that is accurate and natural-sounding. AI is especially valuable for large-scale projects where hand-writing every description is impractical. The best approach is to use AI-generated alt text as a starting point and review it for accuracy and context. </p></div></div></section>',1)),t("section",j,[e[18]||(e[18]=t("h2",{class:"text-foreground text-2xl font-semibold"},"Start generating alt text today",-1)),e[19]||(e[19]=t("p",{class:"text-muted leading-relaxed"}," Every image without alt text is a missed opportunity: for accessibility, for SEO, and for the people who depend on text alternatives to use the web. Whether you write alt text by hand or use AI to help, the important thing is to start. ",-1)),t("div",M,[o(a,{to:"/create",class:"group inline-flex items-center gap-2 rounded-lg bg-accent px-5 py-2.5 text-sm font-semibold text-on-accent shadow-md transition-all duration-300 hover:opacity-90 hover:shadow-lg"},{default:r(()=>e[17]||(e[17]=[s(" Try Alt Text Studio free ",-1),t("svg",{class:"h-4 w-4 transition-transform duration-300 group-hover:translate-x-1",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[t("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})],-1)])),_:1,__:[17]})])])])])])}}});export{D as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.