Alt text is one of the key components that will make your website more accessible to users with disabilities. But alt text is more than just describing what you see in an image. It needs to consider context, and make sure that screen reader users are supplied all the same information that is available to visual users.

1. Alt Text Is Your
Superpower
Clarissa Peterson
Windy City DevFest, October 2023

2. Blind people use
screen readers to
access websites

3. Describing
Images

5. Generic alt text: The late afternoon light
fl
ickers through a
stand of tall trees, highlighting the ferns and
fl
owers covering
the forest
fl
oor.

6. Alt text in a blog post about hiking: A path winds through a
stand of trees in Vancouver’s Stanley Park, where the ground
is covered with ferns,
fl
owers, and other native plants of the
Paci
fi
c Northwest.

7. Alt text in a news article about a storm: Trees stand tall in a
section of Stanley Park that was not damaged by recent
storms.

8. Photo from the James Webb space telescope that NASA
posted online with alt text.

9. Alt text: The background of space is black. Thousands of
galaxies appear all across the view. Their shapes and colors
vary. Some are various shades of orange, others are white.
Most stars appear blue, and are sometimes as large as more
distant galaxies that appear next to them. (continued next
slide)

10. A very bright star is just above and left of center. It has eight
bright blue, long di
ff
raction spikes. Between 4 o’clock and 6
o’clock in its spikes are several very bright galaxies. A group
of three are in the middle, and two are closer to 4 o’clock.
These galaxies are part of the galaxy cluster SMACS 0723,
and they are warping the appearances of galaxies seen
around them. Long orange arcs appear at left and right toward
the center. - NASA

12. Alt text: A volunteer wearing a sun hat patiently hand-paints
the colored balls of a spire using a small paintbrush, with the
rolling hills of southwestern Wisconsin visible in the
background.

13. Describing
People

15. Incomplete alt text: Chris Jones, the CEO of ABC technical
services, stands in front of the new server room.

16. Better alt text: Chris Jones, the CEO of ABC technical
services, stands in front of the new server room. Chris is a
Black woman in her 40s, wearing a pink oxford shirt, smiling at
the camera.

17. Describing Art

19. Alt text: A portrait painting of former First Lady Michelle
Obama depicts her medium-dark skin rendered in grayscale.
She is seated and wears a sleeveless halter-top style dress
that
fl
ows outward beyond her feet extending past the edges
of the painting. The dress is primarily white with various
geometric patterned sections in grey and black. (continued
next slide)

20. She sits with her left arm on top a crossed leg; her wedding
ring is just visible. Her right arm is positioned with a bent
elbow and her chin is propped on the back of her right hand.
She looks on to the viewer with a calm and commanding
gaze. Her long hair, parted in the center,
fl
ows wavy to
shoulder length. Her left earlobe is exposed, revealing a
diamond earring. The background is a solid pale blue. -
Cooper Hewitt

21. Captions

24. No alt text needed if
the caption fully
describes the image

25. Icons &
Thumbnails

27. No alt text needed for icons that
accompany text, if the icons are
only for visual interest and don’t
add meaning

29. Alt text for image on left: Detail from the abstract painting
Untitled, by Eddie Martinez. It's an acrylic and oil painting,
with brightly colored shapes on the left side and a white, blue,
and black checkerboard pattern on the right

30. Alt text for image on right: Detail from the 1664 painting
Panoramic River Landscape with Hunters by Dutch artist
Philip Koninck. It's a vast landscape oil painting in browns and
muted colors.

31. Graphs &
Charts

33. Alt text: Graph of the Brownsville temperatures by month
through 2011 compared to average temperatures. The
monthly temperature is higher than average every month of
2011 except February. During the spring and summer it
ranged up to 5 degrees higher than average, while in the fall
and winter it was only slightly higher than average. See table
on this page for detailed data.

35. Alt text: A map of Illinois showing current drought levels
throughout the state. The northeast and central areas of the
state have no drought. The remaining areas are mostly marked
as abnormally dry, which is the lowest level of drought.
Several counties in the western part of the state have
moderate drought, as does a small area along the south
eastern edge of the state. None of Illinois is currently at the
severe drought level or worse.

37. Alt text: See full data tables further down this page.

38. Infographics

41. If there’s too much content in one
image to reasonably add alt text,
instead repeat the content in
regular text on the same page

42. Better option: create the
infographic with HTML/CSS
instead of as one big image

43. Audio
Description

44. Audio description from
fi
lm: Hundreds of animals gather at the
bottom of Pride Rock, a tall,
fl
at ledge that towers over the
rest of the Savannah.

45. Audio description from
fi
lm: Zazu, a small blue bird with a
large beak,
fl
aps to the ledge. He bows to Mufasa, a powerful
digni
fi
ed lion with a thick red mane.

46. Audio description from
fi
lm: Ra
fi
ki, an elderly baboon with
white hair, slowly climbs up to the ledge and hugs Mufasa
warmly.

48. Thank you!