Semantic Role Img Alt
Serious - WCAG Level AA
The issue at hand is the use of ARIA roles to define elements as images without providing meaningful alternative text. When an element is assigned a role of 'img', it is expected to convey visual information to users. However, without alternative text, screen readers cannot interpret or communicate the content of these images to users who are visually impaired, leading to a significant accessibility barrier.
Alternative text is crucial for users relying on screen readers as it provides a textual representation of the image's content or function. Without it, users may miss out on important information or context, especially if the image conveys critical content or functionality.
To fix this issue
Ensure that any element with a role of 'img' is accompanied by an 'aria-label' or 'aria-labelledby' attribute that provides a concise and descriptive text alternative.
The 'aria-label' attribute directly assigns a text description, while 'aria-labelledby' can reference another element that contains the descriptive text.
Best practices:
Keeping alternative text concise yet descriptive, avoiding redundancy (e.g., using phrases like 'image of'), and ensuring it accurately represents the image's purpose or content.
Avoid using images as the sole method of conveying important information unless a text alternative is provided.
Common mistakes:
Using generic alternative text such as 'image', failing to update the text when the image content changes, and neglecting to provide any text alternative at all.
Always ensure that the alternative text is relevant and updated to reflect the current content of the image.