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