image with alt text using aria-label incorrectly throws error

[robfentress]

An image that is given alternate text using aria-label is incorrectly flagged as an error. This is the code that threw the error:

<p><img src="x.jpg" aria-label="monkey" /></p>

The error given is:

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

[luketw]

I don't think this is a bug, for pretty much the same reasons as #156 (comment)

In short, aria-label is seen as an alternative for title, not for alt. You still need a suitable text description of the image, either in an alt attribute or in body text (with alt="").

[ironikart]

This one is a little tricky, I was able to dig up some text in WCAG documentation that supports being able to use aria-label or aria-labelledby in lieu of alternate text for images.

The Accessible Name and Description Calculation describes the order of checks:

img element accessible name calculation

1. Use aria-labelledby
2. Otherwise use aria-label
3. Otherwise use alt attribute
4. Otherwise use title attribute
5. If none of the above yield a usable text string there is no accessible name

I'd interpret this as aria-label being a valid alternative to alt for displaying an accessible name for accessibility APIs.

Note: If you dig into the usage of aria-label and alt the purpose differs (as Luke mentions above) so it would be up to the author to understand those differences and populate the content of the attribute accordingly.

[khays9]

As ironikart states above, aria-label is a valid alternative to the alt attribute for creating an accessible name for elements. It is not an alternative for the title attribute. Some of the confusion with aria-label seems to come into play when one considers that it can be used for more than an alternative for the alt attribute, such as providing a label for form fields, etc. The aria-labelledby attribute also serves to create an accessible name for elements (as ironikart's post illustrates), but the text must be visible in the page.

[robfentress]

Why must the text be visible on the page when used for <img> elements? I could understand the reasoning for things like form fields, but I don't get why this would be necessary for images.

[khays9]

Good question. It's less about images and more about the intent of aria-labelledby. As it is intended, aria-labelledby is for use when the desired label is visible elsewhere on the page. The ARIA 1.1 documentation does not explicitly state that aria-labelledby should not be used when the label is not visible; however, this is strongly implied:

"If the interface is such that it is not possible to have a visible label on the screen, authors SHOULD use aria-label and SHOULD NOT use aria-labelledby. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property."

This is further reinforced by the ARIA 10 Sufficiency Technique of WCAG 2.0 (Using aria-labelledby to provide a text alternative):

"The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element."

For images, an instance where aria-labelledby would make sense would be when a visible caption is present and its nature is such that providing a non-visible alt text description would be redundant.

In most instances, an author would want to use aria-label for images or simply supply alt text, as having a visible image description is not desired.

Interestingly, it is possible by design to use hidden text for aria-labelledby and aria-describedby (Accessible Name and Description: Computation), but this does not really fit the intent of the aria-labelledby property.