What is the purpose of the alt attribute in images?
The alt attribute provides alternative text for images, allowing screen readers to describe the image to visually impaired users and improving accessibility.
WCAG: User-friendly images in websites
Summary
Comprehensive guide to creating accessibility-friendly markup for images in HTML, focusing on techniques like using the alt attribute, captions, and ARIA properties, as well as the advantages of SVG images for scalability, interactivity, and accessibility.
Introduction #
Images are a crucial part of web design, adding visual appeal and enhancing user experience. However, not all users interact with images in the same way. For those with visual impairments or other disabilities, ensuring accessibility through proper markup is essential. This guide will help you write accessibility-friendly HTML for images.
Use the alt attribute thoughtfully #
The alt attribute provides alternative text for images, which screen readers use to describe the image to visually impaired users.
Here are the best practices:
- Describe the Image’s Purpose
Write concise but descriptive text that conveys the purpose of the image. For example,<img src="product.jpg" alt="Red sneakers with white laces">. - Decorative Images
If the image is purely decorative and doesn’t add meaningful content, use an emptyaltattribute (alt=""). For instance,<img src="background.jpg" alt="">. This tells screen readers to ignore the image. - Avoid Repetition
Do not repeat information already conveyed in surrounding text.
Consider using aria-label or aria-labelledby for complex images #
For more complex images, like graphs or charts, where a simple alt text may not suffice, consider the following:
aria-label
Provide a concise label for the image.aria-labelledby
Reference a nearby element containing a detailed description.- Long Descriptions
Use thelongdescattribute or a link to a separate page with more details.
Example:
<img src="chart.png" alt="Sales growth chart" aria-labelledby="chart-desc">
<p id="chart-desc">This chart shows a 20% increase in sales from Q1 to Q2 of 2025.</p>
Use captions and surrounding context #
For images that require additional context, use the <figure> and <figcaption> elements. This helps all users understand the image’s purpose.
Example:
<figure>
<img src="landscape.jpg" alt="A serene mountain landscape during sunset">
<figcaption>A breathtaking view of the Rockies captured at dusk.</figcaption>
</figure>
Provide text alternatives for functional images #
Functional images, like icons or buttons, should have meaningful text alternatives.
Use the alt attribute or provide context with accessible text.
Example:
<img src="search-icon.png" alt="Search">
Alternatively, use CSS background images for purely decorative icons and ensure the button has accessible text:
<button aria-label="Search">
<span class="icon"></span>
</button>
Use responsive images #
Responsive images ensure that users on different devices have a seamless experience.
Use the srcset attribute to serve appropriately sized images for different screen resolutions.
Example:
<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="A close-up of a blooming sunflower">
Avoid text in images #
Screen readers cannot interpret text within images. If text must be included, ensure it is replicated in the alt text or nearby content.
Example:
<img src="announcement.png" alt="Grand Opening: 50% Off All Items on January 15">
Leverage SVG images for accessibility and flexibility #
Scalable Vector Graphics (SVG) are an excellent choice for web design due to their scalability, interactivity, and accessibility features.
Advantages of SVG Images #
- Scalability
SVG images are resolution-independent, meaning they look sharp on any screen size or resolution without quality loss. - Accessibility
SVGs support text within the image, which screen readers can access if properly labeled. - Interactive Features
SVGs can include interactive elements like hover effects, animations, and links, enhancing user experience. - Smaller File Sizes
SVGs are often smaller than raster images (like GIF or PNG) for icons, logos, or simple graphics, reducing load times.
Best Practices for Accessible SVGs #
- Include a Title
Use the<title>element to provide a brief description of the SVG. - Use
aria-labelledby
Reference the<title>or<desc>elements to describe the SVG to assistive technologies. - Fallback Content
Provide fallback content within the<svg>element for older browsers.
Example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-labelledby="title desc">
<title id="title">Checkmark Icon</title>
<desc id="desc">A green checkmark indicating success</desc>
<circle cx="50" cy="50" r="50" fill="green" />
<polyline points="30,50 45,65 70,35" stroke="white" stroke-width="5" fill="none" />
</svg>
By incorporating SVGs into your web design thoughtfully, you can create accessible, visually appealing, and performance-optimized graphics. Learn more about SVG accessibility.
Conclusion #
Writing accessibility-friendly markup for images ensures your content is inclusive and usable for everyone. By thoughtfully using the alt attribute, providing detailed descriptions, and leveraging semantic HTML elements like <figure> and <figcaption>, you can create a more accessible web experience. Remember to test your site with accessibility tools and screen readers to validate your efforts.
FAQ's #
Most common questions and brief, easy-to-understand answers on the topic:
What is the purpose of the
When should I leave the image alt attribute empty?
Use an empty alt attribute (alt="") for decorative images that do not add meaningful content to ensure they are ignored by screen readers.
What are the advantages of using SVG images in web design?
SVG images are scalable, resolution-independent, accessible, interactive, and often have smaller file sizes compared to raster images, making them ideal for web design.
How can I make complex images like graphs accessible?
Use aria-labelledby or aria-label for concise descriptions, and provide detailed context in nearby text or with a longdesc attribute.
Further readings #
Sources and recommended, further resources on the topic:
- W3C Web Accessibility Initiative (WAI): Images Tutorial
- Scalable Vector Graphics (SVG) 1.1
- Wikipedia: SVG
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer and developer since 2001. On top of that, his areas of expertise are in user experience, accessibility, internationalization, and domain names. See: https://www.j15k.com/License
License: WCAG: User-friendly images in websites by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.uxgem.com/articles/user-friendly-images-in-websites">WCAG: User-friendly images in websites</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the UXgem legal page.
“Less is more.”
