Good accessibility usually starts with clear words and the right HTML elements, not a large amount of extra code.
What You Need to Know
A decorative flourish should not interrupt someone reading the page with a screen reader. Use alt='' for an img that contributes no information; do not omit the alt attribute entirely.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h2>
<img src="images/decorative-wave.svg" alt="" width="32" height="12">
Today’s lessons
</h2>
<p>The decoration does not add information beyond the heading.</p>Let’s Read the Code
- <h2>: A heading divides the page into understandable parts.
- <img>: The img displays a picture; its alt is the text alternative.
- src: Src identifies a resource path for images, frames, or media.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: An empty alt attribute is a deliberate choice for purely decorative images.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Choose one informative image and one decorative image and explain the difference.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Leaving alt out is not the same as writing alt=""; omitted alt may be announced inconsistently.
Key Takeaways
- A decorative flourish should not interrupt someone reading the page with a screen reader.
- <h2>: A heading divides the page into understandable parts.
- If the resource cannot load, users still need enough text to understand what was meant to be there.