Alternative texts for Images – Make your content accessible and user-friendly
Alt texts, or alternative texts, are short descriptions of images used to make visual communication (images) accessible to everyone. They can be read aloud by screen readers to describe what an image depicts and are displayed when an image fails to load. By using alt texts, you help users understand the content of your images. A good alt text is short, clear, and highlights the image's main message. Writing effective alternative texts for images can be challenging, but it is a crucial part of making your communication accessible and user-friendly for all. Here, we explain why alternative texts are important, when to use them, and how to create them effectively.
Why Are Alternative Texts Important?
-
Accessibility: For people with visual impairments, alternative texts are essential. Screen readers read the text aloud, enabling everyone to understand the content even if they cannot see the image.
-
Search Engine Optimization (SEO): Alt texts help search engines understand and index image content, improving your website’s visibility.
-
Comprehension for all: Alt texts are also helpful for users with slow internet connections or technical issues preventing images from loading.
-
Legal requirements: In some countries, such as Sweden under the DOS law (Law 2018:1937), public entities are required to provide accessible digital services, including alternative texts.
When, and how to use alternative texts
-
Meaningful Images: If an image conveys essential information or contributes to the content, it must have a descriptive alt text. Focus on the image’s purpose and describe the most important aspects.
-
Decorative Images: If an image is purely decorative and does not add value to the content, leave the alt attribute empty (alt=""). This allows screen readers to skip over it.
-
Text-Based Images: If the image contains text already presented elsewhere on the page, you do not need to duplicate the information in an alt text.
Examples of good Alt texts:
- A person holding a camera and taking a photo.
- A dog joyfully running in a lush green park.
- A recipe for a delicious chocolate cake with frosting and sprinkles.
- A beautiful sunset with red and orange hues over the ocean.
- A pair of running shoes with excellent cushioning and grip for various terrains.
Alt Texts for charts and complex images
For charts and other images with detailed information, focus on summarizing the primary message. Mention the chart type, key figures, and trends. If additional details are required, provide supplementary text or a table near the chart.
A flexible approach
The relevance of an image depends on its context. For example, a photo of tulips may be meaningful in an article about flowers but decorative in a recipe for cooking. Always tailor alternative texts to the image’s purpose and audience.
Tips for Effective Alt Texts:
- Keep it short and clear: A good alt text is usually no longer than 15 words.
- Focus on the main point: What is the image’s purpose?
- Avoid redundancy: You don’t need to start with “Image of…” – screen readers already indicate the element is an image.
By taking the time to create thoughtful alternative texts, you enhance both the accessibility and overall user experience of your website. It’s an effort that makes a significant difference!