Set your Publisher ID in src/config/ads.ts to display live ads.
Images, Text Alternatives & Decorative Graphics
Writing descriptive alt text, decorative alt="", and accessible SVG icons
Every image on the web must have an alt attribute. How you populate that attribute depends on whether the image conveys information or is purely decorative.
Informative vs Decorative Images
Informative Images: Provide concise, descriptive text explaining the content and function of the image (e.g. alt="Chart showing 42% growth in Q3 revenues").
Decorative Images: If an image is purely cosmetic (like a background flourish or divider), use an empty alt attribute: alt="". This instructs screen readers to skip it completely rather than reading out the clunky image filename.
Icons with Text: For icon buttons without visible labels, provide aria-label="Close dialog". If an icon sits next to visible text, hide the icon from screen readers using aria-hidden="true".
<!-- 1. Informative image -->
<img src="quarterly-growth.png" alt="Bar chart showing 35% revenue increase in 2024">
<!-- 2. Purely decorative graphic (screen reader skips silently) -->
<img src="floral-corner-flourish.png" alt="">
<!-- 3. Icon button with accessible label -->
<button aria-label="Delete course" class="btn-icon">
<svg aria-hidden="true" width="16" height="16"><path d="..." /></svg>
</button>Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
What should the `alt` attribute be for a purely decorative background image or decorative divider?