1. Home
  2. :
  3. Roles
  4. :
  5. UX Writer
  6. :
  7. Image alt text and SVG...

Image alt text and SVG titles

When a person can’t see an image on the screen – whether it’s because they have Visual Disabilities or whether it’s because the image didn’t load – and the image is important to understanding the page’s message, we provide alternative text that displays instead.

Warning!
An alt attribute is required on all tags, even if the image is decorative. If the image’s meaning is irrelevant to the page, alt=”” (with no space) is the proper attribute to add.

Do

  • Ask yourself, “If I couldn’t use an image, what text would I put in its place?” to help decide what makes the most sense.
  • Write content that is accurate and equivalent in presenting the same content and function of the image. For example, if the purpose of an image was to compare two menus, you would want to identify the difference between the two menus, not say “two menus”.
  • Be succinct. Use as few words as necessary.
    • The screen reader JAWS will pause after 150 characters and the user will need to press the down arrow key to continue to hear the next 150 characters.
    • Anything larger than about 150 characters must be provided in a separate long description. See Providing a location for a long description for information about working with your UX Designer to implement a long description.
    • An alt attribute is still required even if a long description is available, but it can reference the long description. For example, the alt attribute on a pie chart may be “Pie chart of types of trees. A full description is in the caption following the chart.”
  • If the color of the image (or other visual indicator) helps to explain the image, it is OK to mention the color in the alt text. Use of a screen reader doesn’t mean that the user has absolutely no vision, or that they’re offended by the existence of color.
  • End with a period. It causes the screen reader to pause, which creates a more pleasant experience for the user.
  • If the alt text is for an <input type=”image”> (image-based button), be sure to describe what the button does, not how the button looks. “Submit the form.” would be good alt text. “A red oval with white text.” would be bad alt text.
  • If you’re labeling an image map both the <img> and each <area> within the <map> require meaningful alt text.

Do not

  • Include the words “image of…”, “graphic of…”, “icon…”, “logo for…” etc. as part of the alt text unless it is critically important to differentiate between, say, an illustration and a photograph.
  • Repeat content that precedes, follows, or refers to the image. See Writing for Screen Readers: Don’t Repeat Yourself for more information.
  • Describe purely descriptive images. A stock image of two hands shaking may be visually compelling but it’s noise to someone using a screen reader.
  • Add content or context to the alt text that’s not in the image. A stock image of two hands shaking should not have alt text of “we guarantee our professional services”, for example, because that’s not conveyed in the image.
  • Add meta keywords or irrelevant words you’re hoping will raise the page’s rank in Google or other search engines.
  • Add title attribute text to the image as well. This causes some screen readers to read both the alt text and the title text.
  • Provide alt text for repeated images in feeds, such as the profile images of users.

Considerations for inline SVGs

We’re going to get a little code-heavy here a moment.

The standard way to create an inline SVG is to put the SVG’s content directly in the HTML. (SVGs are XML files.) So in the HTML file you’ll see something like 

<svg aria-labelledby="titleid descid">
  <title id="titleid">Chicken</title>
  <desc id="descid">A chicken is a
  feathered dinosaur that lives in 
  barnyards all over the world.</desc>
  <!-- coordinates for drawing chicken -->
</svg>

The <title> element should be in every SVG, although most SVG drawing applications output it as the name of the layer or other useless text until we edit it.

The <desc> (description) element is optional, and only accessible to screen readers and other assistive technology. (Even then some browsers require the aria-labelledby attribute to list the IDs of the title and description to read it out.)

There are much better ways to provide a long description for a complex SVG than using the <desc> element. See Providing a location for a long description for some suggestions.

If you are going to use the method described above, keep in mind that the text of the title and description will be combined as the alt text, so the combined text must be 150 characters or less to behave well in screen readers.

Other tips

  • If an image is only text, using the text as the alt text is generally sufficient. This should be extremely rare since embedding text in an image is itself an accessibility failure. See Avoid text in images.

Additional Resources