6

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?

franenos
  • 237
  • 3
  • 11
  • alt text advice in HTML5 may be helpful https://w3c.github.io/html/semantics.html#a-link-or-button-containing-nothing-but-an-image – Steve Faulkner Feb 04 '16 at 22:46

2 Answers2

6

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).

Adam
  • 15,932
  • 27
  • 48
  • 1
    note: the alt attribute is required except in very particular circumstances, refer to https://w3c.github.io/html/semantics.html#when-a-text-alternative-is-not-available-at-the-time-of-publication – Steve Faulkner Feb 04 '16 at 22:48
  • thanks for the note @SteveFaulkner . I must admit that I totally ignored the *When a text alternative is not available at the time of publication* situation, but I promise you not to tell anyone. It will be become the first argument used by people to omit the `alt` attribute *until later* ;-) – Adam Feb 05 '16 at 08:09
4

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.

unpollo
  • 716
  • 4
  • 15
  • 1
    Yes, thanks. Just found this. Perhaps some will find this useful too: `If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.` source: https://www.w3.org/TR/WCAG20-TECHS/H2.html – franenos Feb 04 '16 at 14:27
  • 1
    I agree with this solution, But I also would point out that typically images that are links should specify in the alt tag: Link to "The Blab Site.com." Typically nowadays, logos link to the homepage so the alt, in that case, would be: "Link to Some website homepage" – Gcamara14 Jun 29 '17 at 21:09