- Sector Improvement
|Alt Text Guide|
A BRIEF GUIDE TO ALT TEXTPart 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-NEGOTIABLEAlt 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 & INFORMATIONUsing 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 RESULTSSearch 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 EQUIVALENTPresent the same content and function of the image.
BE ECONOMICKeep it succinct. A few words will do, occasionally a short sentence or two.
BE ESSENTIALAvoid redundancy. Don't repeat information within the context of the image.
BE INCLUSIVE - REPRESENTATION MATTERSWhile 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
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 FacebookON 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 InstagramFOR 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 TwitterON 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 EditorsFor 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 HTMLBREAKDOWN: <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
Tota11yTota11y 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.
Contrast CheckerBy plugging any two colors into Contrast Checker you can see if your font and background colors meet WCAG accessibility standards.
Color SafeColor Safe lets you pick a background color, and it will generate a color pallet of possible text colors that meet WCAG accessibility standards.