Access Keys:
Skip to content (Access Key - 0)

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).

hermes: ask find share

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:

Alt text goes here

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:

Alt text goes here

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:

Alt text goes here

The K.B. Handbook

Documentation and information about using The Knowledge Base


Last Modified:

June 10, 2015

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
images images Delete
text text Delete
alt alt Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
Feedback
This product/service is:
Easy to use
Average
Difficult to use

This article is:
Helpful
Inaccurate
Obsolete
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki