Images make a page come alive, but they need to be added in a way that works for everyone. In this topic
you'll use the <img> element and learn why the alt attribute matters.
The img element
The <img> element embeds an image into the page. It is a void element: it has
no closing tag.
src points to the image file (the source).
alt is a short text alternative that describes the image. It is required - a
screen reader reads it aloud, and it is what the browser shows if the image fails to load.
width and height set the image's size in pixels. Setting them reserves
space before the image loads, which stops the page from jumping around.
Try it: an image with descriptive alt
Copy this into your own file and open it in a browser:
The image displays at 600×400, and the alt text tells screen-reader users (and anyone whose
image does not load) exactly what is shown.
Key points
The alt attribute is required on every <img>.
If the image cannot load (for example, a 404), the browser shows the alt text in its
place.
Screen readers read the alt text aloud, so it should describe what a sighted user sees -
not say "image" or "photo".
Exercises
Exercise 1 - Add an image with meaningful alt
Preparation: re-read "The img element" above.
Add an <img> element to your page. Point src at
a real image file, and write alt text that describes what the image shows. Add
width and height too.
Try it in: your editor, then save as index.html
and open in a browser, or use CodePen. Starter: <img src="" alt="" width="" height="">
Hint 1 - direction
Start with the <img>
element and put your image file's name in src.
Hint 2 - partial solution
alt describes the image
in words, in one short sentence - a screen reader will read it aloud.
Hint 3 - full solution
Check your work: the image displays, and the alt text
describes it in one short, specific sentence.
Exercise 2 - Improve weak alt text and explain why
Preparation: re-read the accessibility points in the theory and
key points.
An image currently has alt="photo". Rewrite the alt so
it describes the image, and explain in one sentence why meaningful alt matters.
Try it in: your editor. Starter:
<img src="team.jpg" alt="photo">
Hint 1 - direction
alt should describe what you
can see, not the word "photo".
Hint 2 - partial solution
Both screen readers and broken
images rely on the alt text.
Hint 3 - full solution
For example,
alt="The Web Development class working on laptops in the computer room". It matters
because screen readers read it aloud and it is shown when the image cannot load, so no user loses the
information the image carries.
Check your work: your alt is a specific description,
and your explanation mentions screen readers or a broken image.
Exercise 3 - Predict what a broken image shows
Preparation: re-read the key point about what shows when an
image fails to load.
Without running it, predict: if the image file cannot be loaded (a 404), what
does the browser show in the image's place? Then test your answer.
No code needed - answer in a sentence, then point
src at a file that does not exist and reload the page.
Hint 1 - direction
The browser still needs to tell the user
something, even when the image is missing.
Hint 2 - partial solution
Think about the
alt attribute.
Hint 3 - full solution
The browser shows the
alt text (usually alongside a small broken-image icon). That is exactly why
alt is so important - it stands in for the image when the image is unavailable.
Check your work: you predicted "the alt text" (or equivalent),
not a blank space.
Exercise 4 - Fix an image with missing alt
Preparation: re-read the key point that alt is
required.
The following image is missing its alt attribute. Find the problem,
fix it, and add meaningful alt text.
Try it in: your editor, then reload in the browser. Starter:
<img src="logo.png">
Hint 1 - direction
The <img> element is
missing one whole attribute.
Hint 2 - partial solution
The missing attribute is
alt; it should describe the image in a few words.
Hint 3 - full solution
Check your work: the <img> now has an
alt attribute with a short description of the logo.