You are here: American University Content Publisher Tools Best Practices Image Alt Text Decision Tree

Back to top

So, you've got an image. Now what?

Alternative Text writing is as much an art as it is a science. Ask yourself each of these questions in turn, if the answer is yes, you can likely stop at that step and should have an idea what the alternative text should be.

  1. First, consider using an icon font and screenreader accessible text instead of the image
  2. If you can’t, then the alt attribute should denote the function of the link, not the content of the image


Example of pictogram of a phone
Alt text should be "Call" not "Phone icon"
Example of pictogram of an envelope
Alt text should be "Send email to" not "Envelop icon"
Example of pictogram of a checkmark and x mark
Alt text should be "Correct" or "Incorrect" not "Checkmark" or "X"
  1. All of the text in the image, with all acronyms expanded and in proper sentence case, should be the alt text.
  2. Nothing more, nothing less, just that text that it is in essence replacing.


Example of a house ad with text in it
Alt text should be "Class to Career Conference, January 9-12" as the background content is irrelevant.
Example of a banner ad with text in it
Alt text should be "Celebrate! Watch the 2016 American University Holiday Video" as the acronym "AU" should be expanded.
  1. First, consider whether this special treatment is truly needed.
  2. If you must it should be implemented as a CSS background image. Contact your department's Content Publishing Lead or the OIT Web Team via the Help Desk for assistance.


Example of a decorative divider

  1. Usually, we strive to avoid redundancy, but if absolutely nothing else can be said about the image just repeat the person's name.


Example of a person in context that is important
Alt should be "President Obama addresses the American University community" as the context of him being on campus is likely relevant to the usage of this picture.
Example of a person in an official portrait
Alt should be "Official portrait of President Obama" as the official nature of this image may be of interest.
Example of a person where context is irrelevant
Alt text should be "President Barack Obama" as the background and his sartorial choices are irrelevant (unless it is the infamous tan suit)
  1. If they are specific people, list all the names and give some directional context (i.e. "Left to Right" or "Front Row")
  2. If the specifics of the people are unimportant in context use a collective noun: “Students...”, “Attendees...”, “Officials...” and what they are doing


Example of specific people in a certain context
Alt text should be "Left to right: President Obama, Vice President Biden, and Secretary Clinton in the Oval Office" Note: strive for concision and only use as many names/titles as are necessary.
Example of non-specific people in a certain context
Alt text should be "Students studying outside the School of International Service building"
  1. If details of the image are important to understanding of the content and they are not presented in the surrounding content then present those details as the alt attribute.
  2. For example, an image of Monet's Water Lilies or Seurat’s La Grande Jatte can mention the brush strokes when presented in the context of an art history page on the difference between the Impressionists and Pointilists.


Example of something that could need specialized alt
Alt text could be "Seurat's brush strokes are mostly round often with space between them for the canvas to show through" in the right highly specialized context.
In most other cases, the alt text should be a brief and succinct summation: "Close up of a Seurat painting"
  1. Present a brief, concise, succinct summation of the gist of the image as it is being used in its context.
  2. Never use the words:
    1. Photo/Photograph
    2. Image
    3. Graphic
    4. Picture/Pic
    5. Icon
    6. Banner/Ad (may be blocked by ad blockers)
    7. Logo/Seal/Crest (except where the official nature of the image is important such as on a policy document)


Example of an artistic rendering of a concept
Alt text should be "Artistic rendering of race relations" and not get into the various media being used.
Example of a combination of text and pictogram
Alt text should be "2016 News" or "2016 Headlines" as it is a combo of text replacement and image providing some of that information.
Example of a concept
Alt text should be the concept of "Police work" as the specifics of what police work is occuring aren't important as shown by the cropping
Example of where a particular technique is unimportant
Alt text should be "American University Bookstore" as the fish-eye nature of the photograph is unimportant.