पाठ विकल्प

छवियों के लिए Alt text

हमेशा alt शामिल करें। छवि के उद्देश्य का वर्णन करें, केवल 'image' नहीं। सजावटी छवियां: alt=""। अर्थपूर्ण छवियां: विशिष्ट बनें।

<!-- ✓ Meaningful -->
<img src="dog.jpg" alt="Golden retriever running through grass in a park" />

<!-- ✓ Decorative -->
<img src="divider.svg" alt="" />

<!-- ✗ Vague -->
<img src="dog.jpg" alt="image" />

जटिल छवियां और चार्ट

चार्ट, ग्राफ, आरेख के लिए: छोटा alt, फिर text या longdesc के माध्यम से लंबा विवरण। या डेटा टेबल से link। स्क्रीन रीडर उपयोगकर्ताओं को डेटा चाहिए, केवल दृश्य नहीं।

Icons और SVGs

Icon-only buttons को aria-label की जरूरत है। SVGs को title या desc elements की जरूरत है।

<!-- Icon with aria-label -->
<button aria-label="Settings">⚙️</button>

<!-- SVG with title -->
<svg aria-labelledby="title-id">
  <title id="title-id">Home icon</title>
  <path d="..."/>
</svg>

Alt text लिखने की tips

संक्षिप्त रहें (125 chars के तहत)। 'Image of' या 'Picture of' से शुरू न करें। relevant context शामिल करें। Infographics के लिए, मुख्य डेटा point का वर्णन करें।

Functional images

Button images को alt text की आवश्यकता है जो action describe करे, छवि नहीं।