When we boil it all down, websites are really just a series of words and pictures. It’s a way for a person (or sometimes a robot, or sometimes a robot in a person trenchcoat) to tell you about a thing and you, a visitor to their internet page, to consume that thing in whatever form.
Sometimes that form is purely visual. An image.
For that we have the
img element. Its sole requirement is the
to direct your browser where to locate your image. And voilà! Visual splendor.
Images, however, have one more thing to consider: Assistive technologies need words to interpret an image. People sometimes need words to better understand why an image is being displayed.
Luckily we have a few ways to describe them in a human readable manner:
figcaption. These items house very different writing patterns though, and
can be used both together and apart, depending on the conditions.
The alt attribute
alt attribute is an internet veteran, introduced in HTML 2 in 1995. Its
most well-known use is as an alternative descriptor for
img tags, but it can
also be used in a similar manner with the
input (if the input type
is an image) tags.
This attribute allows you to provide a written equivalent of what appears in an image and is useful for a variety of scenarios:
- Visitors who use screen readers are able to understand what the images are displaying.
- If a visitor is unable to or chooses not to load your images, the description will appear on the screen in lieu of your image.
- It serves as a way to better index your site for improved search engine optimization (SEO).
<img src="dog.jpg" alt="A small black and white dog sitting and looking to the side.">
img elements should use an
alt description. If one isn’t provided, a
screen reader may announce the image file itself, which becomes audio clutter
(especially if many images appear).
If an image is purely decorative (such as a border, flourish, texture), you
can set an empty string (null) for the
alt attribute, which will tell screen
readers to ignore the element. When using a nulled
alt, avoid adding a space
character in between the string (like this:
" ") as a screen reader may still
announce the image.
<img src="wavy-border.png" alt="">
Keep in mind that your judgment of whether or not an image is decorative is subjective. Some people who use screen readers can still, well, see and perceive visual content, and may be wondering why their assistive technology is skipping over an image in the document.
The figcaption element
figcaption element is a more recent addition and was introduced in HTML5
in 2014. It comes with a parent
figure element which can describe a variety
of media and text, such as photos, videos, illustrations, diagrams and charts,
quotes, poems, code snippets, etc. These items are usually related to the main
body of text and further illustrate an idea. A
figcaption is not required to
be in every
figure element, but a
figcaption always needs a
figcaption element does just what its name suggests: provides a caption
for a figure. Unlike the
alt attribute, the
figcaption element is visible
on a browser screen by default. Much like the
figure element can house
different media, the
figcaption can label that media accordingly.
- For a
blockquoteit can be used to attribute the quote.
- For a poem, it can be used to cite a source.
- For images, it can serve as a caption.
<figure> <img src="llama.jpg" alt="A closeup of a llama's face looking off to the side on a mountain."> <figcaption> Martha is one of the many domesticated llamas that roam freely around the grounds of Machu Picchu. </figcaption> </figure>
figcaption can also describe multiple images within a
<figure> <img src="mountain.jpg" alt="The side of a mountain with a waterfall running down it."> <img src="donkey.jpg" alt="A brown donkey carrying 4 red wooden beams on its back."> <img src="climber.jpg" alt="A man in a blue jacket and hiking gear looking to the side while standing on a mountain path."> <figcaption> A few photos from my hike along the Inca Trail in Peru in <time datetime="2018-10">October 2018</time>. </figcaption> </figure>
figcaption is a block-level element, it can include other inline elements
to better inform visitors:
- Links to other websites can direct a visitor to learn more about your description.
smallelement can be used to describe copyright or other accompanying legalese.
citeelement can reference a title of work (e.g.
<cite>The Mona Lisa</cite>)
timeelement can label when an image was created.
Writing for alt and figcaption
While both the
alt attribute and the
figcaption element provide a way to
describe images, the way we write for them is different.
should be functional;
figcaption descriptions should be editorial or
A functional description explains exactly what is in an image. These descriptions should be thorough but brief.
<img src="butterfly.jpg" alt="A blue butterfly sitting on an orange flower.">
Functional descriptions don’t necessarily have to be literal; they can express what an image represents.
<img src="pencil.svg" alt="Edit text.">
Editorial or illustrative descriptions can convey the who, what, when, where, and/or why of an image, contextualizing it alongside other content on the page. This may be information that isn’t apparent from just looking at the image.
<figure> <img src="high-five.jpg" alt="Two people high-fiving mid-air."> <figcaption> Senior developer, Steph Viccari (brown shirt and olive pants), and Chief Marketing Officer, Lindsey Christensen (blue shirt and jeans) are excited to announce they'll be new respective hosts on the <a href="https://www.bikeshed.fm/">Bikeshed</a> and <a href="https://www.giantrobots.fm/">Giant Robots</a> podcasts. </figcaption> </figure>
Putting it all together
figcaption live together in harmony? Why yes, yes they can. In
this example, we’re using an image figure within an article about
pair-programming at thoughtbot.
Here’s our photo:
The functional description:
A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop.
The editorial description:
Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a plush (not rubber, in this case) duck after finishing an Intro to HTML course.
What it looks like in code:
<figure> <img src="eunjee-pair.jpg" alt="A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop."> <figcaption> Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a plush (<a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging">not rubber, in this case</a>) duck after finishing an Intro to HTML course. </figcaption> </figure>
Further compatibility tweaks
figcaption is a nice semantic way to provide extra information
about an image or any other type of accompanying content, it should be noted
that some screen readers may have trouble announcing
figcaption in the expected manner. Scott O'Hara, an accessibility engineer,
suggests adding a role and an
aria-label to a
repeats the raw text within the
Our code with this addition:
<figure role="figure" aria-label="Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a plush, not rubber, in this case, duck after finishing an Intro to HTML course."> <img src="eunjee-pair.jpg" alt="A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop."> <figcaption> Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a plush (<a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging">not rubber, in this case</a>) duck after finishing an Intro to HTML course. </figcaption> </figure>
What not to do
As you embark on your journey to appropriately describe all your images, be wary of a few no-no’s:
- Don’t use the exact same words for both an
figcaption. Screen readers will announce the information twice. And chances are, one is failing to functionally or illustratively describe the image.
- Don’t provide a
figcaptionfor an image with an empty
altattribute. Providing an empty string prevents a screen reader from announcing that an image is present, so the
figcaptionis effectively describing nothing. This is also the case for images that don’t load.
Barring these caveats, go forth and describe!