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

kit
  • 161
  • 1
  • 1
  • 2
  • 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 https://stackoverflow.com/ – Roux Martin Aug 30 '18 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 05 '22 at 14:02
  • Closing questions like this is so incredibly counterproductive. – foobarbecue Mar 02 '22 at 16:18

3 Answers3

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.

Rob
  • 2,823
  • 1
  • 18
  • 21
  • 2
    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
  • 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 '21 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 '21 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 '21 at 19:43
  • @pbarney The W3C is no longer at odds with the WHATWG and re-publishes their standard as their own. It is your choice to follow the standard or your own. I'm betting those who don't follow the standard will have far more issues than those who do. But these types of discussions I used to have in the early 2000s and thought lessons were learned back then but I see there is at least one straggler around who wants to follow his own path to his own peril. – Rob Aug 18 '21 at 21:24
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>
insertusernamehere
  • 157
  • 1
  • 10
-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.)

slugolicious
  • 3,265
  • 8
  • 14
  • 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 06: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