Images

Include a text alternative (alt text) to appropriately describe the content and/or function of all images.

Alt text allows screen reader users to hear a description of the content and/or function of your image.

Best Practices:

Images that are purely decorative should include blank alt text. Leaving alt text blank tells screen readers to skip over the image.

If an image is used as a link or for another function, the alt text should describe that function or link destination.

Avoid redundancy. If the same information is already presented as text within the context of the image then leaving alt text blank may be most appropriate.

Alt text should be concise. Sometimes longer alt text will be appropriate but if you need to write more than a sentence or two consider presenting that information on the page itself rather than relying on an image.

Avoid using images of text. Where an image of text cannot be avoided alt text should include the text in the image. Images of text must also meet color contrast minimums. Logos are a notable exception, however, logos still must include appropriate alt text such as "Florida Tech Logo".

Avoid using images of graphs and diagrams to convey complex concepts. Where this is necessary alt text must convey the information being displayed or an accessible alternative must be provided.

Do not include GIFs or animations that cannot be paused.

Adding alt text to images in Terminal Four:

In Terminal Four alt text can be added to an image by filling the “Description” field associated with the image in the media library. Leaving the description field blank will result in alt text being blank for the image. Alt text will be the same anywhere the image is included.

Add a new image including alt text:

  1. From the Media Library navigate to the appropriate folder under “Media Categories”
  2. Select “Add Media” to add a new file
  3. Add alt text to the “Description” field

Add alt text to an existing image:

  1. From the Media Library navigate to the appropriate folder under “Media Categories”
  2. Locate the desired image
  3. Open the “Actions” menu associated with the image
  4. Select “Edit”
  5. Add alt text to the “Description” field

Guidelines and Additional Resources

WCAG Success Criterion 1.1.1 Non-text Content

WebAIM Article on Alternative Text

WebAIM Article on Accessibility of Images

W3C Images Tutorial

NCAM Image Description Resources