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.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 8 min · Modify 8 min · Mix it up 4 min · Make 10 min
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.
On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
With your partner, decide what the page shows when one letter of the file name is wrong. Hold up 1, 2, 3 or 4 fingers for your answer.
Take a vote before running. Ask what the browser has to compare the name with. The aim is that the name must be exactly the file's.
Read your alt words to a partner without showing the picture. They say which picture you used.
A good alt lets the partner pick the right picture. If they cannot, ask what is missing from the words.
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.
| What you will see | A question to ask | The fix |
|---|---|---|
| The picture shows as words and a small broken icon. | Is the file name in src spelt exactly like the file, with the same ending? | Copy the file name from the list of pictures, including .svg. |
| The student typed alt words but sees none under the picture. | When do people see alt? | 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. | Does the img tag end with > and have no closing tag? | End the tag with > straight after the last attribute and start the next element after it. |
<a href="https://example.com/results">
<img src="trophy.svg" alt="A gold trophy">
</a>
One possible solution for each task. Other correct programs are fine.
<h2>Winners</h2>
<img src="medal.svg" alt="A gold trophy" width="100">
<p>Well done, Owls!</p>
<h2>Winners</h2>
<img src="medal.svg" alt="A silver medal" width="100">
<p>Well done, Owls!</p>
<h2>Winners</h2>
<img src="medal.svg" alt="A silver medal" width="200">
<p>Well done, Owls!</p>
<h1>Soccer club</h1>
<img src="ball.svg" alt="A black and white soccer ball" width="120">
<p>Training is on Thursday after school on the top oval.</p>
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.
A student's picture does not show, only a few words. What do they check first, and what are the words?
They check that the file name in src matches the file exactly. The words are the alt text, which shows when the picture cannot load.
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.