[Bug] Generated HTML img elements have no "alt" attribute for accessibility

dijitali commented 6 months ago

Description

Generated HTML snippet fails the W3C HTML validation checks due to missing alt attribute.

Reproduction

Generate any licence via the Chooser tool: https://creativecommons.org/choose/
Copy the generated HTML into the W3C Validator: https://validator.w3.org/nu/#textarea
See error per screenshot below.

Expectation

As these images are considered decorative, they should have alt="" attributes set (see WAI guidance).

For example:

<p xmlns:cc="http://creativecommons.org/ns#">This work is licensed under <a
    href="http://creativecommons.org/licenses/by-nc/4.0/?ref=chooser-v1" target="_blank"
    rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC 4.0 <img
      style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
      src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
      alt="">
    <img
      style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
      src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"
      alt="">
    <img
      style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
      src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"
      alt=""> </a>
</p>

Screenshots

Resolution

[ ] I would be interested in resolving this bug.

possumbilities commented 6 months ago

If the images in question are duplicating the same information found within the adjacent text then they would be considered decorative and would therefore not need alt text to be included. Since each icon is a stand-in for the text CC BY and SA then they would fall under decorative use.

Note: Scanners are helpful, but give a lot of false positives on Accessibility violations, which is why an element of human judgement is almost always needed to evaluate any flagged items in question.

dijitali commented 6 months ago

I think the guidance for decorative images would then be to set a null alt attribute to communicate that fact, rather than simply omitting it:

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

From https://www.w3.org/WAI/tutorials/images/decorative/

possumbilities commented 6 months ago

@dijitali Yeah, that's a fair and accurate distinction, reopening. Feel free to modify the original issue details for setting it as null and I'll move it to status: ready for work

dijitali commented 6 months ago

Thanks 🙏, all done.

possumbilities commented 6 months ago

@dijitali thanks for this! and for pushing back when I closed it!

dijitali commented 6 months ago

~Never touched Vue before but happy to have a shot, if you'd like to assign this to me @possumbilities?~

Whoops, misread contribution guidelines. PR incoming.

PrajwalLokhande2003 commented 6 months ago

I want to work on this issue please assign me this issue

possumbilities commented 6 months ago

@PrajwalLokhande2003 Hi, we don't usually assign issues prior to PR resolution, and there's an active PR that's being resolved right now. For more info, please see the Contribution Guidelines

creativecommons / chooser