Is it compliant to have the same link present twice, as both an image and as text?

Technically there is no WCAG failure associated with having multiple forms of the same link present on a page. However, to improve user experience, it is best practice to hide one of these links from assistive technologies.

Since both elements serve the same function, it's a better experience to have fewer announcements for users on assistive technology, especially fewer repetitive ones. Redundant announcements can cause cognitive overload and/or confusion when interacting with a website. However, mouse users can benefit from having both the image and the text as links, as it increases the size of the target. So, it is best to hide one of the links from assistive technologies, but keep both of them available to mouse users.

Remediation Recommendation:

One way to hide one of the links from assistive technologies is to ensure it has the aria-hidden=“true” attribute on it, which will hide the component from the accessibility tree. In addition, the tabindex attribute should have a value set to “-1” (tabindex=“-1”). This ensures the component does not receive keyboard focus. While these changes will hide the redundant link from users on assistive technology, mouse users will still be able to click either link.

Another way to avoid this user experience issue is to wrap both the image and the text in the same anchor (<a>) element and code the image as decorative. This means that only the anchor element containing the image and text will receive keyboard focus, and only the text will be announced by assistive technology. This strategy efficiently communicates the link's purpose to users of assistive technology while still allowing mouse users to click on either the image or the link text.

For a thorough review of creating accessible images, links, and other types of content, visit our Accessibility Concepts for Marketing and Content Creators course in the Accessible Web Academy.