Image Alt
Critical - WCAG Level A
The issue at hand is the absence of 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 analtattribute with a meaningful description of the image.If the image is purely decorative and does not convey any information, you can set the
altattribute to an empty stringalt="") or userole="presentation"orrole="none". This tells assistive technologies to ignore the image, preventing unnecessary interruptions.
Best practices:
Write 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:
Leaving the
altattribute empty for informative imagesUsing overly verbose descriptions
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.