Alternative Text for Images

Alt Text and Empty Alt Attributes

One of the most common and easiest to fix accessibility errors is having images on your website that don't have alt text or an empty alt attribute. 

Images and graphics make content more pleasant and easier to understand for many people, in particular, those with cognitive and/or learning disabilities. They serve as cues for people with visual impairments, including people with low vision, to orient themselves in the content. Adding an image or a graphic to your content without using alt text or empty alt attribute, can be extremely frustrating for people with visual impairments navigating your site through assistive technologies. Alt text is also helpful for people who have a slow internet connection or limited bandwidth. They are able to use the alt text instead of loading all of the website images. 

Informative Images: An image that contains information that is helpful for the user in understanding the content of the page. These images need to have alt text.

Decorative Images: An image that is present on the page purely to make it look good and doesn't convey any necessary information. These images need to have an empty alt attribute, which is displayed as two quotation marks:  ""  

Complex Images: Complex images include charts, graphs, and infographics. Because these graphics sometimes contain a lot of information, it can't be fit into an alt text field. In these cases, you can convey the information adjacent to the image or in the body of the text. 

Icons: Alt text for icons should be equivalent to the information/location intended by the icon. For example, the Facebook icon can use the alt text 'visit our Facebook page'. 

To check or add alt text to an image on your website, click the 'edit' button next to the image. Then, you will then see the 'alt text' field for your image. In the example below, the image is decorative and should only have an empty alt text attribute (two quotation marks).  If this image was informative, you would instead need to type in a brief description of the photo, such as 'woman in library searching for a book.'


How to tell if an image is Decorative or Informational

It depends on the context! For example, if you are using a photo of McMillan Hall in the header of your Undergraduate Studies multipurpose page, the image would be considered decorative. If you were adding the same photo to an article about the history of campus architecture, you would want to add a descriptive alt text such as 'McMillan Hall was built by Cope & Stewardson in 1907 and was originally used as a dorm.'

Writing Alt Text

When writing alt text, it should be informative, brief, and only include necessary information. It should not contain 'image of' or 'photo of'. Remember, the alt text is being read out loud by a screen-reader and a long, overly descriptive description isn't going to be helpful to the user.

  • Describe the image using relevant information: When writing your alt text, use a description or explanation that conveys its meaning for someone who can't see it. Avoid adding details that are irrelevant. 
  • Keep it brief: Rember, some screen readers cut off at 100-125 characters. Be descriptive, but concise. 
  • Use your keywords if possible: Alt text gives you an opportunity to include keywords in your description that can be picked up by a search engine. However, only use the keyword if it is relevant. First and foremost, alt text is intended to make your website accessible to those with disabilities, not be used as a way to add unnecessary keywords.
  • Don't use text in images: Instead of using text on images and then adding that text to the alt text field, add the text to your site in a more meaningful way. Text on images is considered non-accessible and causes many issues on your website.
  • Don't include 'image of' or 'picture of': Because you are filling in an alt text field, it's already a given that it is referring to an image. 


Examples of alt text:

Sometimes, your alt text will depend on the photo's context. The following examples would apply if this photo accompanied an article about the temperament of a retired greyhound:

Alt text: retired greyhound
Better alt text: retired greyhound and a terrier
Best alt text: retired greyhounds get along well with other dogs such as terriers

However, they wouldn't be useful if the article was about different types of dog collars.

 

Alt text: plant
Better alt text: aloe plant
Best alt text: aloe plant sitting on a windowsill in the sun


Are there any exceptions where I don't have to provide an alt text description of an image?

Yes, but very few!  Here are a few examples:

  • The image is included as part of an exam and alt text would give the answer. Instead, just use an empty alt attribute.
  • The image is a work of art. You still need to provide an alt attribute, but it can just be the name of the artwork instead of describing what is in the artwork.
  • The image is of a book cover.  You can use the book title as the alt text.
  • Data chart:  You can provide the full text and description of the data on the chart further down on the page, as long as the alt text makes it clear what the image is and where it is fully described.