# पाठ विकल्प — वेब एक्सेसिबिलिटी (A11y)

Source: https://www.geekswithgeeks.com/hi/accessibility/a11y-alt-text

> छवियों, आइकन, और चार्ट का वर्णन करें ताकि स्क्रीन रीडर उपयोगकर्ताओं को समझें।

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

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

```html
<!-- ✓ 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 की जरूरत है।

```html
<!-- 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 करे, छवि नहीं।