General alt

Description

The alt attribute in HTML is used to provide alternative text for images. This text serves as a substitute for the image content, ensuring that users who cannot see the image can still understand its purpose and meaning. The alt attribute is crucial for accessibility, as it allows screen readers to convey the content and function of images to users with visual impairments. Proper use of the alt attribute enhances the overall user experience by making web content more inclusive and accessible.

Disabilities impacted

• Visual impairments: users with visual impairments rely on screen readers to read out the alt text, allowing them to understand the content and purpose of images.
• Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive alt text, which helps them understand the context and importance of images.
• Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices can benefit from alt text, especially when images are links or buttons.

Why it matters

Providing meaningful alt text for images ensures that all users, particularly those using assistive technologies, can access and understand the content. Without alt text, users who cannot see the images are left without context, leading to confusion and a poor user experience. Properly implemented alt text also improves SEO, as search engines use this information to index and rank web content.

Coding problems and solutions

Common coding problems

• Missing alt attribute: images lack the alt attribute, leaving users with visual impairments without context or information.
• Empty alt attribute for informative images: using an empty alt attribute (alt="") for images that convey important information.
• Non-descriptive alt text: providing alt text that is vague or does not adequately describe the image content or function.
• Redundant alt text: using alt text that duplicates surrounding text content, leading to redundancy for screen reader users.

How to fix it

Include the alt attribute for all images

Ensure that every <img> element includes an alt attribute.

<img src="logo.png">

<img src="logo.png" alt="Company Logo">

Use empty alt for decorative images

Use an empty alt attribute (alt="") for images that are purely decorative and do not convey important information.

<img src="decorative-line.png" alt="Decorative line">

<img src="decorative-line.png" alt="">

Provide descriptive alt text for informative images

Ensure the alt text is descriptive and conveys the image’s content or function.

<img src="team-photo.jpg" alt="Photo">

<img src="team-photo.jpg" alt="Photo of the company team at the annual meeting">

Avoid redundant alt text

Ensure that alt text adds value and does not simply repeat surrounding content.

<p>Visit our <a href="contact.html"><img src="contact-icon.png" alt="Contact Us"></a> Contact Us page for more information.</p>

<p>Visit our <a href="contact.html"><img src="contact-icon.png" alt="Contact Us"></a> page for more information.</p>

Known limitations

• Complex images: for complex images such as charts or infographics, provide a longer description or a link to a more detailed explanation if necessary.
• Dynamic content: ensure that dynamically loaded images also have appropriate alt attributes.
• Testing across devices: test across different devices and screen readers to ensure the alt text is correctly interpreted and useful.

Resources

• MDN Web Docs – <img> element
• W3C Web Content Accessibility Guidelines (WCAG) 2.1 – Non-Text Content
• Best practices for writing good alt text