alt
attribute on
<img>
do, and when is it correct to leave it empty?alt
provides a text description of the image for screen readers and for browsers when the image fails to load. It is correct to write
alt=""
only when the image is purely decorative — a divider line, a background texture, an icon that duplicates adjacent text — and carries no meaning on its own. That empty string tells assistive technology to skip the image silently instead of reading the file name aloud.
<img>
element is self-closing — it has no content between tags, only attributes. The two required attributes are
src
(the path to the image file) and
alt
(a text description of what the image shows). Every other attribute is optional but often worth adding. Omitting
alt
entirely — not even writing
alt=""
— causes screen readers to fall back to reading the file name, which is almost always meaningless.<audio>
or
<video>)
with one or more
<source>
child elements. Each source offers the same media in a different file format. The browser picks the first format it can play and ignores the rest. Any text or HTML placed inside the container but outside the source elements is the fallback — only shown to browsers that cannot play any of the formats listed.<figure>
and
<figcaption>
elements work together to group any media with its caption. The caption is visible to everyone; the
alt
text on the image inside serves users who cannot see the image at all. The two serve different audiences and should both be present when a caption exists.alt
text — Describe what the image actually shows, not what it is. "Photo of team" is weak. "The five-person Acme support team at the Calgary office" is useful. Ask yourself: if this image did not load and someone read the alt text aloud, would they understand what was communicated? If yes, the alt text is good. If the image is decorative — a divider line, a background texture, an icon that duplicates adjacent link text — write
alt=""
(empty string, not missing) so screen readers skip it without reading the file name.
width
and
height
on every image — These attributes tell the browser how much space to reserve for the image before it has finished loading. Without them, the browser downloads the image first, discovers its size, then pushes all the content below the image down to make room — this jump is called Cumulative Layout Shift (CLS) and it is measured by Google as part of page quality. Always include the image's actual pixel dimensions, even if CSS will resize it visually.
<figure>
and
<figcaption> — Use these when an image (or video, or diagram) and its caption are a single self-contained unit. The
<figure>
container tells browsers and screen readers that these two things belong together. The
<figcaption>
text is visible to all users and explains the image in context. The
alt
text on the
<img>
inside still serves users who cannot see the image — the two complement each other.
controls
on video and audio — This single boolean attribute adds the browser's built-in play/pause/volume/scrub bar to the media element. Without it, the media either plays automatically with no controls visible, or sits there doing nothing — either way the user has no ability to interact with it. Always include
controls
unless you are deliberately building custom controls in JavaScript, which is an advanced pattern and requires significant extra accessibility work.
<source>
elements and the
<iframe>
title — List more modern formats first (WebM for video, OGG for audio) then the universally-supported fallback (MP4, MP3). The browser plays the first it understands. For
<iframe>,
the
title
attribute is mandatory for accessibility — without it, screen readers announce only "iframe" with no context. Write a brief description of what is embedded: "Map showing our Calgary office location."
alt
text gives blind users the same information sighted users get from the image. Empty
alt=""
on decorative images prevents screen readers from reading out useless file names. Both choices are deliberate — the wrong choice in either direction causes real problems.width
and
height
on images prevent layout shift — a Core Web Vital measured by Google when ranking pages.
alt
text is also indexed by search engines for image search results. Descriptive alt text on product photos and charts directly improves search visibility.<source>
elements ensure every browser can play your media. WebM is smaller and faster but not supported by all browsers. MP4 works everywhere. Offering both means no visitor gets a broken media player.controls
attribute gives every user play, pause, and volume from the moment they see the element.alt
attributes and missing
controls.
Watch out for its suggested alt text — AI often writes generic descriptions like "a person smiling" where something specific like "Dr. Chen explaining the procedure" is far more useful. Always write alt text yourself with real context.
media.html.
Add three images: one informative (real description in
alt),
one decorative (
alt=""),
and one inside a
<figure>
with a
<figcaption>.
Add
width
and
height
to every image.<video>
element with
controls
and two
<source>
elements (WebM first, MP4 second). Add a fallback sentence inside the
<video>
tag for browsers with no video support.<audio>
element with
controls
and one
<source>
element. Add a fallback text line inside the
<audio>
tag.<iframe>
from any publicly embeddable source (OpenStreetMap, a YouTube video using
/embed/
URL, etc). Add a descriptive
title
attribute.width
and
height
from one image, throttle the network in DevTools to Slow 3G, reload the page, and watch for content jumping as the image loads — that is CLS in action.alt
entirely — not even writing
alt="".
A completely missing
alt
causes screen readers to read the file name: "hero-photo-2024-final-v3.jpg". That is useless and disruptive. Either describe the image or explicitly declare it decorative with
alt="".alt="image",
alt="photo",
or
alt="picture".
These repeat what the tag already communicates — that it is an image. A screen reader announces "image" before reading the alt text anyway. Describe what the image actually shows: who is in it, what is happening, what it means.controls.
Without controls the video either sits invisible or plays automatically with no way to pause. Both scenarios are inaccessible. Always add
controls
unless you are building custom JavaScript controls — which requires significant additional accessibility work.width
and
height
on images. The browser must download the image to learn its dimensions, so it cannot reserve space in advance. Everything below the image jumps down as it loads — this is Cumulative Layout Shift, one of Google's Core Web Vitals, and it directly hurts your search ranking.<iframe>
without a
title
attribute. Screen readers announce "iframe" with no description. Users have no idea what is embedded. Always write a concise description: "YouTube video: Introduction to HTML" or "Google Map of our office."alt
text and correct pixel dimensions, use
<figure>
and
<figcaption>
for captioned media, embed audio and video with
controls
and multiple
<source>
formats, and add a
title
to every
<iframe>.
Welcome back to Jit4All