A BRIEF GUIDE TO ALT TEXT
Originally created as part of the StageSource A11Y Initiative.
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
CONTRAST CHECKER
By plugging any two colors into Contrast Checker you can see if your font and background colors meet WCAG accessibility standards.
COLOR SAFE