# Text alternatives — Web Accessibility (A11y)

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

> Describe images, icons, and charts so screen reader users understand them.

## Alt text for images

Always include `alt`. Describe the image's purpose, not just 'image'. Decorative images get `alt=""`. Meaningful images: be specific.

```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" />
```

## Complex images & charts

For charts, graphs, diagrams: short `alt`, then long description via text or `longdesc`. Or link to data table. Screen reader users need the data, not just the visual.

## Icons and SVGs

Icon-only buttons need aria-label. SVGs need title or 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 writing tips

Be concise (under 125 chars). Don't start with 'Image of' or 'Picture of'. Include relevant context. For infographics, describe the key data point.

## Functional images

Buttons as images need alt text describing the action, not the image itself.