Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

CUNY LIBRARIES ARE OPEN both ONLINE and on campus! We are open online for reference & instruction. E-resources are fully available. CUNY Libraries physical spaces are also open for quiet study, computers and wifi, materials pickup, and more. Please note that library plans are subject to change based on the evolving pandemic situation and plans at each campus. At this time, due to the pandemic, campus access (including libraries) may be restricted to each campus’ current students, faculty and staff. Some libraries require reservations. Please check our College Libraries page for details about the library you plan to visit.

Support Students Impacted by Coronavirus Crisis Donate Now

Accessibility Workshop on OER for LaGuardia Community College: Alternative Text (alt-text)

ALTERNATIVE TEXT for accessibility

General Information:

Making images and graphics “visible” to all users is one of the first principles of accessibility.  Adding alternative text (alt text) to an image or graphic allows it to be discoverable and understood by users  in a variety of ways. Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be “search” rather than “magnifying lens”.

Why using alternative text (alt-text) is important

  • Adding alternative text (“alt text”) will make images and graphics “visible”.
  • Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input).
  • For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
  • Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
  • Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
  • Alternative text (alt-text) covers POUR principles perceive, operate understand, robust.

How to create good alt-text?

  • Remember that context matters when creating alt-text.
  • Always ask yourself “What is the context and purpose of this image/graphic?
  • Create alt-text which provides a textual alternative to non-text content.
  • Describe the content and function represented by the image/graphic.
  • PRO TIP:
    • Place a “.” period at the end of your alt-text, this notifies screen readers the alt-text is done.
    • Don't use the words "image of, picture of, photo of etc." it is redundant.  Assistive technology already announces the item is an image.
    • Add alt-text to images in documents, web sites and social media posts.

The World Wide Web Consortium (W3C) has created a very useful guide on how to create useful alt-text.

Informative images
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
 
Decorative images
Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
 
Functional images
The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
 
Images of text
Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
 
Complex images such as graphs and diagrams
To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
 
Groups of images
If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
 
Image maps
The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

LibGuides Alt-Text Instructions

Alt-Text for Images

  • Adding alt-text to your images is an accessibility best practice.
  • In LibGuides there are several ways to add alt-text to images.
  • You can add "default" alt-text to an image by using the "Image Manager" to upload the image.
    • Each time you reuse an image its default alt-text will be attached.
    • This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
  • You can also add /change alt-text when you add an image in a Rich Text/HTML.

How to add default alt-text to an image via the Image Manager:

  1. Go to Content in top menu bar
  2. Click on Image Manager in drop down menu

Screen grab showing how to access image map from top menu under content

 

  1. In the Image Manager window, upload a new image, then click on the thumbnail or and/ click on the thumbnail of image already uploaded to add default alt-text. (Make sure to click on the actual image and not link icon.)

Image Manager view properties

 

  1. In the Edit Image Properties window, enter your alt-text into the Alternative Text field.
  2. Click the Save button.

 

How to add alt-text to an image you add via the Rich Text/HTML box:

  • Select "Add Rich Text/ HTML"

Rich Text/HTML screen image

  • Select "Image" icon

Image selection icon

 

  • In the "Image Properties" window type in the alt-text in the "Alternative Text" field.

Image Properties pop-up window image showing where to type in alternative text

 

WordPress Classic Alt-text Instructions

Create Alt-text for Images

  • Adding alt-text to your images is an accessibility best practice.
  • Making images and graphics "visible" to all users is one of the first principles of accessibility. 
  • The way you make your image visible to everyone is by adding "alternative text" or "alt-text".
  • For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
  • Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
  • Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
  • In WordPress classic editor there are several ways to add alt-text to images to your site.
  • You can add "default" alt-text to an image so that each time you reuse the image its default alt-text will be attached.
    • This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
    • You can edit this "default" alt-text on individual pages (option four)

Option 1: Adding Default Alt-text to Image via Media Button

  1. Select <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select)
    1. If you need to upload an image first then, select upload files tab, upload your image and then do step 2.
  3. Once an image is selected you will see the "Attachment Details" box on the right hand side of your window.
  4. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing the add media button

 

Screen grab showing add media window with atachment details

Option 2: Adding Default Alt-text to Image via "Media" left side-bar option & "Add New" button

  1. Select "Media" on the left side-bar
  2. Click on the <Add New> button located in the "Media Library" window
  3. Drag & drop image or search computer to upload image
  4. Once an image is uploaded, select it (you will see a check-mark next to the image you select)
  5. Once an image is selected you will see the "Attachment Details" box.
  6. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing selecting Media then Add New Item button

Option 3: Adding Default Alt-text to Image via left side-bar option "Media" - "Add New"

  1. Select on "Media" on the left side-bar to open up drop down menu
  2. Click on "Add New", located under "Media" and "Library".
  3. Drag & drop image or search computer to upload image.
  4. As your image is being uploaded you will see a progress bar saying "crunching".
  5. After image is uploaded, click on the work "Edit" (located on the bottom right) 
  6. A new window will open, an "Edit Media" window.
  7. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing how to upload new media and add alt-text.

 

Option 4: Customizing Alt-text of images on individual pages or posts

  1. Click <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select).
  3. Click on <Insert into page> button.
  4. Once back on the page or post, click on the image you just uploaded.
  5. A new editing bar will pop-up
  6. Click on the pencil "edit" icon
  7. An "Image Details" page will pop-up.
  8. Here you can edit the alt-text without changing the "default" alt-text of the image.

Screen grab showing how to edit an image's default alt-text from within a page or post.

WordPress Gutenberg Block Alt-text Instructions

screengrab showing where to add alt-text in wordpress gutenberg.