Q: How do I add alt text to images?

On this page:

Overview

Alt text is needed for all images to make them accessible to users with screen readers and other accessibility devices. Unfortunately adding alt text can't be done from the attachments page or with the insert image pop-up at this time. You'll need to edit the wiki markup directly.

Tip: Avoid commas in your alt text. They result in incorrect formatting of the alt text on the resulting web page. For more information on what to put in your alt text, see: Appropriate Use of Alternative Text

Adding alt Text to an Image

When you insert an image using the insert image button on the editing screen, it produces wiki markup that looks something like this:

!hermes-logo-header.png!

To add alt text to make your image more accessible (for screen readers and other adaptive devices), add a title to the image markup. Replace the description with descriptive text that makes sense for your image.

!hermes-logo-header.png|alt="hermes: ask find share"!

The wiki markup above produces the image below complete with alt tags (you can see them if you view the source of the page).

Adding alt text for Image Thumbnails

The wiki markup for a thumbnail of an image with an alt tag is:

!hermes-logo-header.png|thumbnail,alt="Alt text goes here"!

This wiki markup produces:

Adding alt Text for Images with Links

The wiki markup for a an image that contains an alt tag and serves as a link is:

[!hermes-logo-header.png|alt="Alt text goes here"!|http://kb.mit.edu/]

This wiki markup produces:

Adding alt Text for Images with Formatting

Multiple parameters in the in-line image markup are separated by commas as in this example:

!hermes-logo-header.png|alt="Alt text goes here", vspace=4, hspace=10!

This wiki markup produces: