What is alt text?
Alt Text, ARIA labels, and alt descriptions are written text alternatives for images, icons, and navigational elements. This alternative can be triggered if an image fails to load on a website or email. Alt text also provides a text alternative for visually impaired readers using a screen reader on their device.
Without alt text, many screen readers will read the actual file name of the media! For example, if your file name is PN1098456.jpg the screen reader will read P N 1 0 9 8… well, you get the point. While this probably seemed inconsequential when it was uploaded to your content management system, this is not engaging media content for a visually impaired user!
Recently, social media platforms and websites like LinkedIn and Instagram have started offering opportunities to add alt text. For presentations, PowerPoint offers alt text fields for your slideshow images.
Got any tips on writing alt text?
Before adopting alt text, it’s good to keep in mind a few best practices:
- Do not start your alt text with “image of” or “picture of” as the screen reader already identifies this as an image.
- Be clear and descriptive within 125 characters. Maintain standard sentance structure, but be concise in your description. Many screen readers will cut off after 125 characters.
- SEO is not the priority. Because of some SEO practices, people will fill alt text with keywords and fluff (#bad). These descriptions are meant to describe the image itself and even more so, the image itself in the context of the full experience.
- Be specific with your description. If the image depicted is former President John F. Kennedy shaking hands with a young former President Bill Clinton in the White House, don’t write “Politician shaking hands with young politician at event.” Including names, locations, and any other specific detail provides significant context to a reader.
- Create context. The image may lack specifics (maybe it’s a stock photo) but there’s probably more context available than you suspect. Is one of the figures a teacher? Business person? What context are you gleaning from their clothes and interaction… those type of details can make the media asset relevant and engaging to a person using a screen reader.
Example:
Here’s a common example seen around the internet explaining best practices for a picture of a rooster crowing:
Okay alt text: alt=””Rooster””
Better alt text: alt=””Rooster crowing””
Best alt text: alt=””Red-crested rooster crowing”””
