Describing Images

What is Alt Text?

  • The purpose of听Alt Text听is to allow low vision or blind users who use text-to-speech assistive technologies (AT), such as screen readers, to understand the purpose of graphic images. Sighted users usually don鈥檛 see alt text unless they use AT.

  • Screen readers and other AT听肠补苍鈥檛听convert images into texts. So, when writing alt text, consider the following for images:

  • Describe the content and the purpose of the image clearly and concisely, in a phrase or a sentence or two. Keep alt text short 200 characters or less.

  • Image with text (for example, the CSUN wordmark) should include the words on the image.
  • 鈥淚mage of鈥︹��, 鈥淧hoto of鈥︹�� is not needed because screen readers and other AT announce that it鈥檚 an 鈥渋mage鈥� or 鈥済raphic鈥�.
  • When completing the alt text, use proper punctuation such as periods to indicate the end of the alt text. Without proper punctuation, some screen readers will run the alt text into the body text that follows and cause confusion to the user.
  • Don鈥檛 insert hyperlinks in alt text because they are not clickable and 肠补苍鈥檛 create descriptive link text.
Three plants going through transformation with text quote Accessibility user-friendly document for CSUN student success.

Screen readers and other AT announce that it鈥檚 an 鈥渋mage鈥� or 鈥済raphic鈥�,听 then read the alt text: 鈥淭hree plants going through transformation with text quote Accessibility user-friendly document for CSUN student success.鈥�

Image Captions

  • Captions are universal and accessible for everyone.
  • Captions are read and visible to all users whether they use assistive technologies (AT) or not.
  • Captions and alt text have different purposes:
    • Captions convey what鈥檚 visible in the image.
    • Alt text describes the visual aspect of the image and should be brief.
  • If captions and alt text are similar in their descriptions, alt text can be 鈥�Mark as decorative鈥� to be ignored by the screen readers.
  • Don't repeat听the image's caption as the alt text. People don't need to hear the same information twice.
A crowd of people are walking and shopping at an outdoor market.

Caption:听A crowd of people are walking and shopping at an outdoor market.
Alt Text:听Mark as decorative

What are Decorative Images?

  • Conveys no information; does not provide meaningful information.听
  • Purely for visual effect.
  • The horizontal line that divided the two sections.听
  • Line border image used as part of page design.听
  • Decorative images, lines, borders, or shapes ignore by assistive technologies, such as screen readers.

How to Describe Images?

A stair chase leading up to an entryway is painted yellow with bold black text that reads museums are now.

A stair chase leading up to an entryway is painted yellow with bold black text that reads museums are now.

On the left is the book cover for Haben The Deafblind Woman Who Conquered Harvard Law, and on the right is the quote: 鈥淚n the Tigrinya language of Eritrea and Ethiopia, Haben means 'pride.鈥欌��

On the left is the book cover for Haben The Deafblind Woman Who Conquered Harvard Law, and on the right is the quote: 鈥淚n the Tigrinya language of Eritrea and Ethiopia, Haben means 'pride.鈥欌��

Woman holds hands up forming signs while another woman looks on.

Woman holds hands up forming signs while another woman looks on.

Michelle Obama claps and Barack waves.

Michelle Obama claps and Barack waves.

A hand reaches out of a computer screen giving the hand gesture for stop. The screen reads 'access denied!'

A hand reaches out of a computer screen giving the hand gesture for stop. The screen reads 'access denied!'

Student holds a diploma hardcover up in the air during CSUN commencement. Caption text "and together, as Matadors, we will move mountains."

Student holds a diploma hardcover up in the air during CSUN commencement. Caption text "and together, as Matadors, we will move mountains."

University Library displaying the banners that spell C S U N.

University Library displaying the banners that spell C S U N.

Images of Text

Screen readers and other assistive technologies (AT)听肠补苍鈥檛听convert images of text into texts. If the flyer is an image of text, add descriptive text in Alt Text.

A chalkboard with the text "I learned so much! Thank you : )"

A chalkboard with the text "I learned so much! Thank you : )"

Complex Image

Some images, such as graphs, charts or informative illustrations require fairly lengthy explanations to make them accessible. Provide a brief alt text description of the image and a longer description within the text of the document. This may be helpful for others as well since some people have difficulty understanding charts and graphs. Image caption benefits everyone.

Website Accessibility Assessment Chart - Description in the text below.

Alt text:听Website Accessibility Assessment Chart - Description in the text below.

Image caption:听Website Accessibility Assessment of All Organizational Chart. Findings from the assessment indicate the following: 5% of organizational websites had fewer than 2 errors on the home page; 20% had 3 to 5 errors; 45% had 6 to 10 errors; and 30% had more than 10 errors on the home page.

Note:听Do not repeat the image captions in the Alt text because the screen readers will repeat the same info.听

More examples of how to describe images

  • Best Practices for Accessible Images
  • 听(Art, Chemistry, Diagrams, Flow Charts, Formatting & Layout, Graphs, Maps, Mathematics, Page Layout, Tables, Text-only images)
  • :听Map Design, Static Maps, and Interactive Web Maps

Alt Text for Complex Images using Artificial Intelligence (AI)

Some images are easy to describe but many are not. For charts, graphs, infographics, artwork, and other complex images, artificial intelligence (AI) will generate the first draft of the alt text, making it easier and faster for you to create the final image description.

听