image inside a link for accessible users

Question

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?

Answer 1

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.

Answer 2

The alt attribute is mandatory

Note that according to the H30 technique of the WCAG

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

You can use aria-label to give specific alternative intended to be used by assistive technologies.

For instance:

 <a href="http://theblablasite.com/" target="_blank"
     aria-label="Visit The Blabla Site Dot Com (opens in a new window)">
       <img src="logo_or_whatever.png" alt="The Blabla site" /></a>

The title attribute can be used to give a tooltip for mouse users if you have visual information to give.

 <a href="http://theblablasite.com/" target="_blank"
     title="opens in a new window"
     aria-label="Visit The Blabla Site Dot Com (opens in a new window)">
       <img src="logo_or_whatever.png" alt="The Blabla site" />
       <i class="arrow"></i>
 </a>

Note, that as this information is not accessible by keyboard only users not using any assistive technology, it can only be used if this comes in complement to any other visual cue (in this example, the title attribute can be used to explicit the meaning of a small arrow).