Semantic Img Alt

Serious - WCAG Level AA

The issue at hand is irrelevant or vague alternate text for images, which is crucial for accessibility. Alternate text, or 'alt text', is a brief description of an image that is read aloud by screen readers, enabling users with visual impairments to understand the content and purpose of the image. Without alt text, these users miss out on important information conveyed through images, which can lead to a fragmented or incomplete understanding of the content.

To fix this issue:

Ensure that every <img> element includes an alt attribute with a meaningful description of the image.

Best practices:

  • Writing concise yet descriptive alt text that conveys the essential information of the image.

  • Avoid using phrases like "image of" or "picture of" as screen readers already announce the presence of an image. Instead, focus on what the image represents or its function within the context of the page.

Common mistakes to avoid:

  • Using overly verbose descriptions, or neglecting to update the alt text when the image content changes.

  • Do not use the filename or URL as alt text, as these do not provide meaningful information to users.

By following these guidelines, you can significantly enhance the accessibility of your web content for users with visual impairments.