If a link contains both an image and text with the same accessible name (for example, an image with alt="Level Access Home" and link text “Level Access Home”), screen readers may announce the content twice.
Avoid making both the image and the text independently focusable or announced, as this creates a redundant and confusing experience.
To prevent this, expose only one meaningful label:
- Mark the image as decorative when the link text already conveys the purpose. In this case, the image does not add additional meaning and should not be announced.
- Alternatively, separate the image from the link (for example, through a div or a table) so that they are not treated as a single accessible element.
If the image is decorative:
- Remove it from the accessibility tree (for example, by using an empty
alt=""attribute). - Ensure keyboard users can focus only on the link itself, not the image.
Comments
0 comments
Article is closed for comments.