1

All of the guidelines of WCAG and some related articles suggest to always set the alt attribute on the img elements, if the image links to other page, alt should be the place the image leads to.

But why not setting the aria-label on the a element, then we can still have the image description on the img's alt?

Reference

closed as off-topic by Wanda, Ken Mohnkern, Andrew Martin, Shreyas Tripathy, JonW Aug 31 '18 at 9:30

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Wanda, Ken Mohnkern, Andrew Martin, Shreyas Tripathy, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hi kit, unfortunately we can't comment on coding solutions here. We can only tell you that you should use alt and aria tags. Anything beyond that is considered off topic. I suggest you try over at stackoverflow.com – Andrew Martin Aug 30 '18 at 13:35
2

alt on the <img> tag is used to describe the image and has nothing to do with the link. So do both, the alt and the aria-label.

alt on the <img> tag is a required attribute in HTML.

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image.

  • As suggested by the a11y project, alt has to be empty if the image is for decorative purpose. – kit Aug 30 '18 at 12:41
  • @kit I will repeat the HTML specification which the browser vendors themselves wrote and clearly states the alt attribute must not be empty. – Rob Aug 30 '18 at 13:01
1

I'd ask: Does using aria-describedBy or aria-label enhances the overall experience for all users?


Let's say your link looks like this:

<img src="" alt="Twitter logo - the illustration of a bird who is called &quot;Larry the bird&quot;">

No matter how you describe the image using the alt-attribute, for everybody it's unclear what the link actual does:

  • Does it share the page on Twitter?
  • Do I automatically follow their Twitter account, when I click?
  • Do I simply go to their Twitter account?

When you use the title-attribute on the link you increase the user experience for your whole audience:

  • The screen reader will read the title.
  • Other user's will see the title on mouseover.

However, this is still ambiguous for touch only users.


Finally, if your image is purely decorative, you can hide it from screen readers using role="presentation" or aria-hidden:

<a href="" title="Visit us on Twitter">
    <img src="" alt="" aria-hidden="true">
</a>
-1

alt is not a required attribute. While the url mentioned in another reply (html.spec.whatwg.org) might be a good resource, it is not an official spec. See the <img> tag for the official spec. There's even a section called "If the src attribute is set and the alt attribute is not", implying that you don't need the alt attribute.

Now, would I ever recommend not setting the alt attribute? No. I think it should always be set, but that doesn't mean it's required. But one of the valid values is the null string, "" (quote-quote). If an image is decorative and doesn't provide additional context, then you can have alt="".

If your anchor tag does not have any embedded text and only relies on a nested image, such as:

<a href="...">
  <img src="...">
</a>

then you can provide the appropriate context for screen readers by using either the aria-label attribute on the <a> or an appropriate alt attribute on the image.

Option 1

<a href="..." aria-label="purpose of link">
  <img src="..." alt="">
</a>

Option 2

<a href="...">
  <img src="..." alt="purpose of link">
</a>

(Notice that option 1 still has an alt attribute on the image but it's the null string.)

  • 1
    alt is required but it depends on which spec you want to read and that opens a whole 'nother can of worms. Today, browser vendors write and follow WHATWG for the HTML specification. The W3C copies the WHATWG spec and modifies it to meet their determinations. The WHATWG is not happy about that and you can find these arguments online. There are other disagreements in the spec, too, such as <hgroup> but this brings us around to what do browser vendors actually follow and that is WHATWG which is what I linked to. – Rob Aug 30 '18 at 18:21
  • 1
    I’d say that ’’ is an empty string and it’s not the same as null, as ’’ !== null. – insertusernamehere Aug 31 '18 at 6:31
  • feel free to call it whatever want. the main point is that quote-quote (no space) is a valid value and hides the image from the screen reader – slugolicious Aug 31 '18 at 15:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.