Print Page | Contact Us | Sign In | Register
Alt Text Guide

A BRIEF GUIDE TO ALT TEXT

Part of the StageSource A11Y Initiative.
For more info visit stagesource.org/a11y
For the full guide click here.
by John Meredith

What is alt text?

Alternative text is the textual representation of an image online. This is what screen readers read when they come across an image, or what loads if an image is blocked or if a user has a slow internet connection.

 

Why do I need it?

HAVING IT IS NON-NEGOTIABLE

Alt text is a minimum accessibility standard for websites, social media, and emails. Having it on all necessary images ensure that all users, regardless of visual ability, can access the content on your site. 

CONTEXT & INFORMATION

Using alt text ensures that no context or necessary information is lost for those using screen readers, or if an image cannot loaded for any reason.

SEARCH RESULTS

Search engines use alt text when scanning pages to deliver better results for those looking for information on your site.

 

How do I write it?

BE EQUIVALENT

Present the same content and function of the image.

BE ECONOMIC

Keep it succinct. A few words will do, occasionally a short sentence or two.

BE ESSENTIAL

Avoid redundancy. Don't repeat information within the context of the image.

BE INCLUSIVE - REPRESENTATION MATTERS

While you can determine what information (age, race, gender etc.) is relevant to the objective of images depicting people, be sure to ask the people depicted or the media content creator which description terms they prefer and what pronouns they use. For more information on this and other alt-text FAQs visit tinyurl.com/alt-text-QA

 

DECORATIONAL IMAGES

If the image has no meaning other than decoration (like a background image or decorative divider) the alt text should be left blank. Even if it's empty, there should always be an alt tag.

alt = “ “

UN-CAPTIONED SENSORY IMAGES

For images that convey information or value, describe the purpose of the image—keep it clear and concise. Do not include phrases like "photo of..." or "this image shows..."—the screen reader will inform the user that it is a graphic.

alt = "description of image"

For example, write “twitter logo” instead of “drawing of the a blue bird”

CAPTIONED SENSORY IMAGES

If the surrounding content adequately represents the image, the alt text can be left blank so as to prevent redundant information.

alt = “ “

IMAGES ACTING AS A LINK

Describe the target of the link. The screen reader will inform the user that it is a link. If the link is also contained within the surrounding text, it may be okay to leave the alt-text null, to avoid redundancy.

alt = "link destination"

For example, if clicking the twitter logo brings you to twitter, write “twitter”, but an even better option would be to caption the logo as “click the logo above to visit our twitter” and leaving the alt text blank

IMAGES THAT ARE PRIMARILY TEXT

Generally, just use the text in the image. For a guide to complex images with lots of text, graphs, or charts visit: w3.org/WAI/tutorials/images/complex

alt = "text in image”

 

Adding Alt Text on Facebook

ON DESKTOP
1. Go to the image
2. Click "options" on the bottom right corner
3. Click "Change Alt Text"
4. Add your alt text and click "Save"

Adding Alt Text on Instagram

FOR NEW POSTS ON MOBILE
1. Get to the final page before posting
2. Click "Advanced Settings" on the bottom of the page
3. Click "Write Alt Text" on the bottom of the page
4. Add your alt text and click "Done"

FOR PREVIOUS POSTS ON MOBILE
1. Click the three dots on the top right of your post
2. Click "Edit" on the pop up menu
3. Click "Edit Alt Text" on the bottom right of the image
4. Add your alt text and click "Done"

Adding Alt Text on Twitter

ON MOBILE
1. Add the image to your post
2. Click "Add description on the bottom right corner
3. Add your alt text and click "Apply"

Adding Alt Text on Web Editors

For most What You See Is What You Get style website editors (like WordPress) you can generally add alt text by right-clicking the image and editing its properties. If there isn't an "alt text" option, it may be labeled instead as something like "description"

Adding Alt Text with HTML

BREAKDOWN: <img src="IMAGE URL" alt="ALT TEXT"  style="STYLING FOR IMAGE & HOW YOU WANT ALT TEXT TO APPEAR IF THE IMAGE CANNOT LOAD;"/>
EXAMPLE:  <img src="https://www.stagesource.org/enews-header.png" alt="Weekly E-News" width="500px" style="color: #ffffff; font-size: 50px;"/>

 

Web Accessibility Tools

Tota11y

Tota11y is an accessibility visualization toolkit. By adding it to your browser, you can view an annotated list of common accessibility violations on any web page along with tips on how to fix them.
khan.github.io/tota11y

Contrast Checker

By plugging any two colors into Contrast Checker you can see if your font and background colors meet WCAG accessibility standards.
webaim.org/resources/contrastchecker

Color Safe

Color Safe lets you pick a background color, and it will generate a color pallet of possible text colors that meet WCAG accessibility standards.
colorsafe.co

StageSource Partners