html · level 1 · unit 3 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
alt describes a picture for people who cannot see it.
Some people cannot see pictures. Many use a , an app that reads the page out loud. When it reaches an image, it reads its instead.
Write alt text in the alt attribute. Say what the picture shows in a few words, as if you were describing it to a friend on the phone.
Alt text helps everyone. If a picture cannot load, the browser shows the alt text in its place, so nobody misses out.
<img src="cat.svg" alt="A friendly cat">Press show my page to see it here.
Skip the words picture of. Screen readers already say that it is a picture.
guess first
What will a screen reader say?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<img src="dog.svg" alt="A happy dog">your turn
Your turn. Describe the picture.
Write alt text for this cake picture in the blank. Use a few words, as if describing it to a friend on the phone.
Press show my page to see it here.
- the alt text has a few wordsnot checked yet
fix it
Strange words next to the picture. Can you fix it?
Press show my page to see it here.
- the picture has alt text about a treenot checked yet
- only the heading shows as wordsnot checked yet
- Strange words appear next to the picture. Where did they come from?
- Attributes belong inside the opening tag, before the
>. - Move the
>to the very end of line 2, after the last quote mark.
nailed it
your pictures can speak now. :D
- Every picture needs
alttext. - Screen readers read alt text out loud.
- Describe what the picture shows in a few words.
new words in your collection
- screen reader
- alt text
This lesson isn’t saved. A free account remembers every lesson you finish.