पाठ विकल्प

छवियों के लिए 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 में लंबा विवरण दें या data table से 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 करे, छवि नहीं।