What is Alt Text?
Alt text (alternative text) is a short, written description of an image that conveys its content and function. It is essential for visually impaired users who rely on screen readers and also serves as a fallback if an image fails to load.
Why is Alt Text Important?
- Accessibility: It ensures visually impaired users can understand the image’s purpose.
- SEO Benefits: Well-written alt text helps search engines index images, improving search rankings. However, avoid keyword stuffing. Aearch engines penalise sites that misuse alt text for SEO rather than accessibility.
- Better User Experience: Some users deliberately disable images to improve page load speed, and alt text ensures they still understand the content.
Best Practices for Writing Alt Text
Be Descriptive, Not Redundant
Don’t just state what the image represents; describe what’s actually in it. For example, in e-commerce, an image might represent the Menswear department, but instead of writing:<img src="menswear.jpg" alt="Menswear">Write something more contextual:<img src="menswear.jpg" alt="A well-dressed man in a tailored navy suit adjusting his tie, standing in a modern office.">This provides a richer description that fits within the brand’s lifestyle aesthetic.
Consider the Context of the Image
Alt text should align with the surrounding content and convey emotional or contextual meaning where relevant. For example:<img src="polar-bear.jpg" alt="A polar bear standing on a shrinking ice floe, highlighting the impact of climate change on Arctic wildlife.">Similarly, for a motivational blog post:<img src="marathon.jpg" alt="A determined woman crosses the marathon finish line, arms raised in triumph, after a long and exhausting race.">This makes the image more impactful for screen reader users.
Keep It Concise
The recommended character limit for alt text is 125 characters. While some screen readers will read longer descriptions, keeping it concise ensures the most important information is conveyed efficiently.
Avoid “Image of” or “Picture of”
Screen readers already indicate that an alt attribute is for an image, so saying “Image of” is redundant.
Use Keywords Wisely
While alt text can support SEO, avoid keyword stuffing. Focus on writing for accessibility first. For example, writing:<img src="running-shoes.jpg" alt="Running shoes trainers sneakers fitness workout">is bad practice. Instead, provide a meaningful description:<img src="running-shoes.jpg" alt="A pair of lightweight running shoes with cushioned soles, designed for long-distance runners.">
When Is an Image Decorative?
Not all images need alt text. If an image is purely decorative (e.g., background patterns, spacers), use:
<img src="decorative-pattern.jpg" alt="">
This tells screen readers to ignore it, reducing unnecessary distractions.
Examples of Decorative Images:
- Background textures (e.g., faint watermarks)
- Ornamental flourishes that do not convey meaning
- Icons that are purely aesthetic and not interactive
- Spacer images used for layout purposes
AI-Generated Alt Text: Proceed with Caution
AI-powered tools can generate alt text, but they are not always accurate. It’s essential to review and edit AI-generated descriptions to ensure correctness and relevance. AI might:
- Miss key details
- Misinterpret objects
- Fail to capture the emotional context of an image
For example, AI might output:
<img src="smiling-person.jpg" alt="Person smiling">
Instead of the more meaningful:
<img src="smiling-person.jpg" alt="A young woman laughing while holding a coffee cup in a cosy café.">
Always check and refine AI-generated alt text to maintain quality.
Background Images: A Missed Accessibility Opportunity
Some websites use background images in CSS, which cannot have alt text. This is problematic because:
- Screen readers cannot interpret background images.
- If the image conveys important meaning, it should be placed in an
<img>element with appropriate alt text. - If using CSS background images, ensure there is meaningful text content nearby that conveys the same information.
Instead of using a background image for key content, structure it like this:
<figure> <img src="team-photo.jpg" alt="A diverse team of professionals collaborating in a modern office."> <figcaption>Our team works together to create innovative solutions.</figcaption> </figure>
This way, both visual and non-visual users benefit from the information.
How to Apply Alt Text in the <picture> Element
The <picture> element allows you to provide multiple versions of an image for different screen sizes or resolutions. However, alt text is still applied within the <img> element inside the <picture> element, like this:
<picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <source srcset="image-medium.jpg" media="(min-width: 500px)"> <img src="image-small.jpg" alt="A scenic view of rolling green hills under a golden sunset."> </picture>
Screen readers will read the alt text from the <img> tag, regardless of which image version is displayed.
Alt Text for <svg> Elements
SVGs (Scalable Vector Graphics) do not use the standard alt attribute but should still be made accessible. Use title and desc elements inside the <svg>:
<svg role="img" aria-labelledby="svgTitle svgDesc"> <title id="svgTitle">Company Logo</title> <desc id="svgDesc">A modern minimalist logo with a blue and green colour scheme.</desc> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /> </svg>
For purely decorative SVGs, use role="presentation":
<svg role="presentation" aria-hidden="true"> <!-- Decorative content --> </svg>
Final Thoughts
Alt text plays a crucial role in accessibility and SEO. Writing meaningful, contextual, and concise descriptions ensures all users benefit from the images on your website. Remember to always consider the context, review AI-generated alt text, and prioritise clarity over generic descriptions. Additionally, be mindful of background images, SVG accessibility, and proper <picture> element usage to ensure a fully inclusive experience.