Search code examples
htmlaccessibilitywai-ariawcagwcag2.0

image inside a link for accessible users

Say I wanna make a clickable image(say site-logo, or whatever) like so:

<a href="theblablasite.com"><img src="logo_or_whatever.png"></a>

If I want to make it accessible should I use aria-label for link along with alt for an image or only aria-label?

Also, there's lots of opinions about using title and alt together or not to, what is the right way to do it and why?

Solution

  • The HTML standard says:

    The alt attribute must be specified for the IMG

    Additionally, what I often see in production is providing an assistive text element that is hidden with CSS for visual users but that will be read aloud by screen readers. More on that here https://www.w3.org/TR/WCAG20-TECHS/C7.html

    So, in your example, you might do:

    <a href="theblablasite.com"><img src="logo_or_whatever.png" alt="Relevant info here"><span class="assitive-text">Relevant info here...</span></a>

.assistive-text { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

    That CSS is from the above W3 reference.