Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alternate text for image using aria-labelledby throws error #156

Closed
robfentress opened this issue Feb 29, 2016 · 2 comments
Closed

alternate text for image using aria-labelledby throws error #156

robfentress opened this issue Feb 29, 2016 · 2 comments
Labels

Comments

@robfentress
Copy link

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

<p><img src="x.jpg" aria-labelledby="monkey"/></p>
<div id="monkey">My monkey</div>

The error given is:

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

@luketw
Copy link
Member

luketw commented Mar 3, 2016

I don't agree that this is a false positive, but that's because I had a different interpretation on what the ARIA attributes are meant to be equivalents of.

HTMLCS does check for aria-labelledby, but it considers it the equivalent of the "title" attribute or a label element - what the ARIA definitions call an "accessible name" - and not the "alt" attribute.

When not used in an anchor (like "a" or image map "area"s), "alt" text is intended for an actual description of the image involved, effectively as if describing it to a visually impaired person... similar to an audio description of a video (one of the success criteria in the Audio/Video guideline, 1.2). So in this case, the "alt text" might be "a baboon sitting on a branch, amongst the leaves, in a tree" or something like that.

If #monkey was a fuller description instead, you could potentially put a blank alt attribute (alt="") and place the description in body text, optionally using aria-describedby to link #monkey with the image - but then you'd need a title or aria-label attribute. But having a totally omitted "alt" tag is always going to throw an error at this stage.

Same reasoning applies for #157, too.

However, I'm also well aware that the ARIA and WCAG2 documents are a bit vague on whether they're meant to be a label or a text alternative, and in theory could be both. Hence why I want to leave this open along with #157 #158 #159.

@robfentress
Copy link
Author

This makes some sense.

However, I am confused, then, why, in the accessible name calculation algorithm, aria-label when provided together with the alt attribute, is supposed to override the alt attribute as the accessible name. I guess I view aria-label as a more general case of alt. Indeed 'F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"' seems to pretty specifically allow for the use of aria-label and aria-labelledby as alternatives for alt. Jonathan Avila discusses the issue in his post "Is the Alt Attribute Dead? and, though not crystal clear, I view it as supporting this interpretation.

Personally, I'm not sure I see the use case for why it would not be better to just use the alt attribute, but I also, as yet, remain unconvinced that using aria-label for images is an out-and-out failure.

ironikart added a commit that referenced this issue Aug 25, 2016
…ledby and aria-label will be picked up as one of the required attributes on specified element types and checked for validity. This addresses #160 and paves the way for #159, #158, #157 and #156. Also references #162.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants