Pictures
Show a picture with the img tag, and describe it with alt for anyone who cannot see it.
Every photo, icon and logo on a website is an img tag, and its alt text is what a screen reader says aloud.
A picture is a file of its own. The page does not hold the picture: it says which file to show, and what the picture is for people who cannot see it.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<h2>Winners</h2>
<img src="trophey.svg" alt="A gold trophy" width="100">
<p>Well done, Owls!</p>
<img> shows a picture. src names the picture file, and alt describes it. Read the code. What will the page show?
Run
Compare the page with your prediction. The alt words show because the browser cannot find a file called trophey.svg. The table says what each part does.
| Code | What it does | Why |
|---|---|---|
<img … > |
Shows a picture | <img> has no closing tag: there are no words to wrap, so everything it needs is in its attributes |
src="trophy.svg" |
Names the picture file | The picture is a separate file. The name, the ending after the dot and the capitals must match the file exactly, or the browser cannot find it |
alt="A gold trophy" |
Says what the picture shows | Screen readers read it aloud, and the browser shows it when the picture cannot load. It is not a caption: people who can see the picture do not see it |
width="100" |
Sets the picture's width in pixels | Another attribute. Without it the picture shows at its own size |
<h2>Winners</h2>
<img src="trophey.svg" alt="A gold trophy" width="100">
<p>Well done, Owls!</p>
Investigate
<h2>Winners</h2>
<img src="trophy.svg" alt="A gold trophy" width="100">
<p>Well done, Owls!</p>
Think about who needs the words.
Imagine describing the picture to someone on the phone.
One picture does not show.
The trophy shows, but the medal does not: only its alt words appear. The picture file is called medal.svg. Click the line that causes it.
Modify
Show medal.svg instead of the trophy. Only the file name changes.
Need a hint?
The file name is the part inside the quotes after src=.
Another hint
The picture to show is medal.svg. Match the name exactly.
Show the expected result
The alt words still describe a trophy. Change them to A silver medal.
Need a hint?
alt is the attribute with the words in quotes.
Another hint
Describe the medal as you would to someone on the phone: A silver medal.
Show the expected result
Make the picture 200 wide.
Need a hint?
Change the number inside the quotes after width=.
Show the expected result
Show the medal picture instead of the trophy.
This ticks when your page has all of the above.
Change the alt words to A silver medal.
This ticks when your page has all of the above.
Make the picture 200 wide.
This ticks when your page has all of the above.
Mix it up
Make the picture itself the thing people click.
Put the lines in order so that clicking the trophy picture opens the results. One line is not needed.
Make
Make a page for a school club: a title, a picture, and a paragraph about when it meets. The pictures you can use are trophy.svg, medal.svg, book.svg, ball.svg, star.svg and music.svg.
Need a hint?
Pick one picture. Its file name goes in src.
Another hint
Write alt as if describing the picture to someone on the phone.
Show the expected result
Make a club page with a title, a picture with alt, and a paragraph.
This ticks when your page has all of the above.
For teachers
Students show a picture with img, and learn that src must match the file name exactly and that alt describes the picture for people who cannot see it. About 40 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can show a picture with <img src="..." alt="...">.
- I can say why the file name in src must match exactly.
- I can write alt words that describe what the picture shows.
Before class
Read the unit primer "Lists, links and pictures in 5 minutes" first, then do the Make task yourself in the playground (about 5 minutes).
An <img> tag has no closing tag, and the picture is a separate file. src names the file and alt describes it. The pictures students can use without uploading are trophy.svg, medal.svg, book.svg, ball.svg, star.svg and music.svg. Two ideas to land: a file name that is nearly right still fails, and alt is not a caption.
Running the lesson
- Predict and Run: many students pick the first option, that the close name still works. Let them run it and see the alt words. Fixing the name comes in Modify.
- Investigate: the first question is the one for alt-is-caption. Ask who actually reads alt. Then they apply it to the relay photo and the missing medal.
- Modify: three single changes: the file, the alt words, then the size. Misspell the name once on purpose and ask what shows.
- Mix it up: the picture inside a link needs the attribute lesson. Ask where the href goes.
- Make: the check ticks when the page has a heading, a picture with alt and a paragraph; read their alt words as a class.
The hard part (on purpose)
Believing that a nearly right file name will do. Let them see the alt words, then ask what the browser can compare the name to.
When students get stuck
- The picture shows as words and a small broken icon. Ask: Is the file name in src spelt exactly like the file, with the same ending? Fix: Copy the file name from the list of pictures, including .svg.
- The student typed alt words but sees none under the picture. Ask: When do people see alt? Fix: alt only shows when the picture cannot load, and screen readers read it. A caption would be a paragraph under the picture.
- Words after the picture are inside the tag, or the picture vanishes. Ask: Does the img tag end with > and have no closing tag? Fix: End the tag with > straight after the last attribute and start the next element after it.
Stretch and support
Stretch: Add a second picture with its own alt, and make one of the pictures a link to a page.
Support: Give students the Modify starter and do the first task together, then change the alt words and the width.
Where it leads
Next lesson names some of the elements with a class so that a CSS rule can style only those. Class idea: ask what a person using a screen reader hears when the alt says image.
What each step is for
- Predict: Most students expect the close name to work, or an error; seeing the alt words appear shows what alt is for.
- Run: src must match the file name exactly; alt is what people get when they cannot see the picture.
- Investigate: alt is for people who cannot see the picture, not a caption; src has to match the file exactly.
- Modify: src picks the file, alt describes it, width sizes it: each is its own attribute, changed on its own.
- Mix it up: A picture inside a link combines the image tag with an attribute on the tag around it.
- Show a picture with <img src="..." alt="...">.
- Say why the file name in src must match exactly.
- Write alt words that describe what the picture shows.