Accessible Images
On this page
Using alt text with images
It’s important to correctly identify images for assistive technologies like screen readers. However, not all images should be announced by screen readers.
Correctly identifying meaningful vs decorative images improves usability for assistive technology users and ensures compliance with WCAG 2.1 AA.
Tip – Quick Decision Rule
Ask: “If this image were removed, would any information be lost?”
- Yes - Image is “meaningful.” Provide alt text.
- No - Image is “decorative.” Hide the image from screen readers.
Meaningful (Informative) Images
Images that are “meaningful” convey information beyond what is communicated by the text on the screen.
Examples include:
- Charts, graphs, diagrams
- Images that explain a process or concept
- Images that serve as links where ONLY the image clearly conveys the link destination
- Images that are referred to in the surrounding text
To write alt text for a meaningful image:
- Be brief and purposeful.
- Focus on the image’s function.
- Do not provide a full visual description.
- We recommend limiting alt text to about 25 words.
Tip: If a description feels long, it probably belongs in surrounding text, not in alt text.
Decorative Images
Images that are “decorative” do not add information beyond what is communicated by the text on the screen. Decorative images are used only for visual presentation.
Examples include:
- Background textures, dividers, borders
- Stock photos that repeat adjacent text
- Generic icons next to headings
Should I add alt text to every image?
No. Screen readers announce all alt text out loud. Adding alt text to every image on a webpage
- Slows navigation
- Adds noise and cognitive load
- Obscures meaningful content
You should only add alt text to “meaningful” images.
Can <p> captions replace alt text?
No. Captions should be used to describe the source or context of the image, for instance, an attribution for a photo.
Captions should not be used to explain what the image actually is. Instead use alt to explain what the image is.
Implementation techniques
Meaningful (Informative) Images
- Provide a text alternative that communicates the same information as the image.
- Instead of describing the image, explain what the user takes away from the image.
For example, the alt text for the image below explains how the line graph changes over time.
<img src="line-graph.png" alt="Line graph showing website traffic rising from 11,000 visits in January to 29,000 in April, spiking to 50,000 in May, and dipping slightly to 47,000 in June">
In the example below, the alt text explains that the image is an official portrait of Governor Moore.
<img src="governor.png" alt="The official portrait of Wes Moore - Governor of Maryland">
Decorative Images
- Hide decorative images from assistive technologies like screen readers.
- The standard technique is to use empty alt text (alt=""), as shown in the two examples below.
<img src="federalbuilding.png" alt="">
<img src="interns.jpg" alt="">
Decorative Icons
Sometimes, icons and custom graphics should be hidden from screen readers to prevent duplicate announcements. You can do this using the code aria-hidden=”true.”
For example, the icons in the image below are decorative shapes that are hidden from the screen reader. In this case, the screen reader will read the text label, for example, “Maryland State Jobs,” but will not read the svg icon.
<svg aria-hidden="true" focusable="false" viewBox="0 0 100 10">
<rect width="14" height="14"></rect>
</svg>
Get support
Ask questions about the Maryland Drupal CMS, Maryland Web Design System (MDWDS), accessibility, plain language, and more.