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

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

> Images, icons और charts के लिए उपयोगी alt text लिखें, और जानें कि decorative images में empty alt कब रखना है।

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