Skip to Main Content

Web Accessibility

Quick tips that everyone can use to make their websites and pages more accessible.

Alternative Text (alt text)

Images must have alternative text (alt text). Alt text should be brief, descriptive and serve as a reasonable alternative to the image. This gives screen readers and those not able to load images the context for the image. Watch out for redundancy in your alt text — leave out phrases such as "Image of..." or similar extraneous content in your alt text. 

Image Filenames

In the absence of alt text, some screen readers will read out the filename of the image instead. Giving your image a meaningful name will prevent a screen reader from reading a confusing jumble of letters and numbers. It will also make it easier to find and reuse your images in LibGuides or the Libraries' Drupal websites!

Tips for writing alt text

DO: DON'T:
  • Put the most important information first. Some screen-readers will cut alt text off after 100 characters.
  • Be succinct. Typically no more than a few words or a short sentence is necessary. Think of what information, emotion, or tone the image conveys and describe that. Refer to examples for help.
  • For images that contain lots of text like infographics and charts, use the alt text to summarize the intent or the conclusion presented in the image. For more complicated images, provide a link to a separate page with a transcript or written explanation of the graphic.
  • Avoid writing "image of" or "photo of". Screen readers will say "image" before reading the alt text. If it's important for the viewer to know that an image is an illustration, chart or photograph, then it's ok to include that information.
  • Avoid assuming any person's gender, race or identity. If the information is important, ask the person how they identify before writing your text.
  • Avoid specialized jargon. 

Alt text exceptions

In a few rare instances, alt text can be redundant. In these cases, you can use empty alt text. This appears in HTML as alt="". Some text editors like Word may have a checkbox to mark the image as decorative instead. However, many website editors don't provide a way to mark an image as decorative. In most cases, it's better to provide alt text than not.

Examples of when it's ok not to provide alt text:

  • Thumbnail images that have a title or description directly next to them. If the alt text would be the same as the title, then empty alt text is OK to use
  • Purely decorative graphics used for layout or borders
  • Examples of decorative images from the W3C

More information