Alt Text Best Practices

Sahi Tarike Se Likhna

💡 Alt text likhna kisi ko phone par image describe karne jaisa hai — unhe image dikh nahi rahi, tumhe SIRF utna hi bolna hai jo context ke liye zaroori hai, har chhota detail nahi (jaise "ek image hai" kehna useless hai, bilkul waisi hi jaise "photo of X" likhna redundant hai).

Achha alt text: concise (usually ek sentence), context-specific (image ka PURPOSE describe karo, sirf content nahi), aur "image of" / "photo of" se shuru NAHI hota (screen readers already batate hain "ye image hai", repeat karna redundant hai).

Decorative images (jo koi information carry nahi karte, purely visual) ke liye alt="" (empty) sahi hai — screen reader unhe completely skip kar deta hai, jo sahi behavior hai (unimportant cheez ko announce karne se bachta hai).

<!-- GALAT — generic, useless: -->
<img src="dog.jpg" alt="image">
<img src="dog.jpg" alt="photo of a dog">

<!-- SAHI — context-specific, concise: -->
<img src="dog.jpg" alt="Golden retriever puppy playing in park">

<!-- Functional image (link/button ke andar) — action describe karo: -->
<a href="/cart"><img src="cart-icon.png" alt="Shopping cart"></a>

<!-- Decorative — empty alt sahi hai: -->
<img src="divider-line.png" alt="">

📝

Alt text likhna kisi ko phone par image describe karne jaisa hai — unhe image dikh nahi rahi, tumhe SIRF utna hi bolna hai jo context ke liye zaroori hai, har chhota detail nahi (jaise "ek image hai" kehna useless hai, bilkul waisi hi jaise "photo of X" likhna redundant hai).

1 / 2

⚡ Quick Recap

Concise, context-specific — "image of"/"photo of" se shuru mat karo
Functional images = action describe karo (jaise "Search"), visual nahi
Decorative images = alt="" (empty), completely skip ho jaata hai

On this page (2 subtopics)

Complex images (charts, diagrams, infographics) ke liye sirf alt text kaafi nahi hota (bahut zyada detail hai). Pattern: chhota alt text summary ke liye, aur poora detailed description page par kahi aur (ya longdesc jaisa mechanism) text ke roop mein.

<figure>
  <img src="sales-chart.png" alt="Bar chart showing quarterly sales growth">
  <figcaption>
    Sales grew from ₹10L in Q1 to ₹18L in Q4, with steady month-over-month growth.
  </figcaption>
</figure>
<!-- figcaption detailed data describe karta hai jo alt text mein fit nahi hota -->

💡Tip: Data visualizations ke liye, underlying DATA ko ek table ke roop mein bhi provide karna (visually hidden ho sakta hai CSS se, lekin screen reader ke liye available) best practice hai — chart ka actual data accessible banata hai, sirf uska existence nahi.

Company logo ka alt text usually simply company NAAM hota hai — "logo" word add karna redundant hai (screen reader already batata hai ye image hai), aur visual description (colors, shapes) bhi unnecessary hai.

<!-- SAHI: -->
<a href="/"><img src="logo.png" alt="Code10x"></a>

<!-- Redundant/verbose (avoid): -->
<!-- <img src="logo.png" alt="Code10x company logo, blue and orange colors"> -->

💡Tip: Agar logo ek link hai (usually homepage ko point karta hai), alt text mein "Home" add karna bhi common hai: alt="Code10x - Home" — context clear ho jaata hai ki click karne se kya hoga.

← Previous🏷️ ARIA Attributes Next →⚡ HTML5 APIs — Overview

Code10x

Alt Text Best Practices

Complex Images — Charts & Diagrams

Alt Text for Logos