6

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

Improve this question
3
  • 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
    – Roux Martin
    Aug 30, 2018 at 13:35
  • why would we want the image description and the aria label ? the image as used in this context is a functional image, and the text alternative should define what function the image would do, which can be acheived by aria label alone or alt alone
    – gaurav5430
    Feb 5, 2022 at 14:02
  • Closing questions like this is so incredibly counterproductive.
    – foobarbecue
    Mar 2, 2022 at 16:18

3 Answers 3

Reset to default
3

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.

Improve this answer
6
  • 2
    As suggested by the a11y project, alt has to be empty if the image is for decorative purpose.
    – kit
    Aug 30, 2018 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, 2018 at 13:01
  • That's pretty pedantic @Rob. As designers and developers, we're required to walk the line between multiple and sometimes competing standards and requirements. It is widely known that HTML standards are less rigid in practice than accessibility standards, so something has to give for the benefit of the most users.
    – pbarney
    Aug 13, 2021 at 22:00
  • @pbarney I don't get where you say there are multiple competing standards as there is only one HTML standard and that standard is clear on what is required. Stating a fact is not being pedantic. This is computer science, not art.
    – Rob
    Aug 13, 2021 at 22:03
  • @Rob, there are the W3C standards and the WHATWG standards. W3C has the notoriety, but WHATWG is what browser vendors are actually following, and they are often at odds. Also, I don't think you can fairly say we're in "computer science" territory here... we're not talking about algorithms, cache invalidation or the N-vs-NP problem; we're talking about HTML pages. It becomes pedantic when we pick a single standard or methodology without regard to how it affects end users who are the entire reason we're making web sites.
    – pbarney
    Aug 18, 2021 at 19:43
3

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>
Improve this answer
-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.)

Improve this answer
3
  • 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, 2018 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, 2018 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, 2018 at 15:14

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