Alt Text Best Practices
DEFINITION & GENERAL BEST PRACTICES:
All images added to the website now require writing Description/Alt Text content. Alt text describes the subject matter of images, helping your viewers to understand what the images – and the web page as a whole – is about. Alt text supports accessibility, SEO, and UX for your website. Alt text should be descriptive, specific, and include keywords, where applicable, and should not exceed 125 characters.
WHEN TO USE ALT TEXT:
- Non-decorative photos
- Descriptive images (graphics with text)
- Tables, charts, and graphs
- To convey a function (search button or social media icon)
WRITING TIPS:
- Put yourself in the audience’s shoes — what description would you need to visualize this image if you couldn’t see it?
- Keep descriptions short and clear, while specific.
Alt Text Example: Group of three Ph.D. in Leadership program students discussing course content around a table at Teachers College.
Alt Text Example: Students from the Food Corp program leaning over a bench and writing on worksheets.
-
- This example is specific, without being too heavily detailed. Too many details would be: “Group of three Ph.D. students in Leadership program around a wooden table with two laptops, a book, and notecards in view.” or “student in a red shirt next to another student with a pink and gray shirt holding pencils and leaning over a wooden bench with pencils, worksheets, and a clipboard”
- A way to determine which details to include is to ask whether they add to the overall meaning and relevance of the image.
- Use punctuation to indicate pauses, and use a period at the end of alt text to signal the end of the description.
- Don’t include “image of” or “photo of.” Screen readers recognize images and using “image of” would make the description redundant.
- Don’t exceed 100-125 characters or 1-2 sentences of information.
INCLUSIVE ALT TEXT:
- For the time being, only specify race or gender if known and it adds to the context of the image. These practices are in flux as diverse representations are needed online, but doing so requires some level of assumption and can be extraneous to the image's meaning. Website editors can continue to monitor how to promote inclusivity and diversity in image alt text.