Goal
Provide a text alternative for every meaningful non-text element (images, icons, charts, CAPTCHAs, etc.) so that it can be presented in other forms—speech, braille, or large print.
Key Points
- Informative images: Need a concise
altthat conveys the same information. - Decorative images: Use empty
alt=""orrole="presentation"so they’re ignored by screen readers. - Complex graphics: Supply a short
altplus a longer description elsewhere (e.g., vialongdescor nearby text). - Controls / Icons: Buttons and links must expose a name (
aria-labelor visible text).
Examples of Issues & Fixes
Informative Image
Fail
<div class="p-8 flex justify-center items-center">
<img class="w-96 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/wordpress-market-share-infographic.jpg">
</div>
Pass
<div class="p-8 flex justify-center items-center">
<img class="w-96 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/wordpress-market-share-infographic.jpg" alt="A pie chart showing WordPress market share">
</div>Decorative Image
Fail
<div class="p-8 flex justify-center items-center">
<img class="h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/19-scaled.png">
</div>
Pass
<div class="p-8 flex justify-center items-center">
<img class="h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/19-scaled.png" alt="" role="presentation">
</div>Icon Button
Fail
<div class="p-8 flex justify-center items-center">
<button class="rounded-full bg-indigo-600 p-4 text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500">
<img class="w-6 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/search-1.png">
</button>
</div>
Pass
<div class="p-8 flex justify-center items-center">
<button aria-label="Search" class="rounded-full bg-indigo-600 p-4 text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500">
<img class="w-6 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/search-1.png" alt="">
</button>
</div>