ADA Issue Non-text Content
-
Hi,
I got a ada critical issue with the plugin. The description is attached below please let me know how to solve this
Standard – WCAG
Level – A
Severity – critical
Guideline/Summary – 1.1.1 Non-text ContentRule Title – Img element contained within elements whose children can only be presentational, is missing an accessible name.
Description – One or more img elements without a mechanism that allows an accessible name to be calculated that is a child of an A element (without an ARIA-assigned role), button element (without an ARIA-assigned role), option (without an ARIA-assigned role), or an element with role=’button | checkbox | link | menuitemcheckbox | menuitemradio | option | radio | switch | tab’, not intentionally hidden in the DOM and available to assistive technologies, does not have an alt=””
Finding URL – https://livenation.hub.essentia11y.com/short-link/3puZrTc2EP5JsS54
Code Snippet – <img width=”43″ height=”43″ data-uw-rm-ignore=”” class=”si_w” aria-hidden=”true” alt=”Spinner: White decorative” src=”https://cdn.userway.org/widgetapp/images/spin_wh.svg”>
What is the problem – Img element contained within elements whose children can only be presentational, is missing an accessible name.
What to do – Provide alternative text for images. Meaningful images must have a concise but descriptive textual equivalent.
To add a textual equivalent to an <code>img</code> element, set its ‘alt’ attribute to a descriptive value.
To add a textual equivalent to an <code>svg</code> element, add a <code>title</code> child to the SVG. Place the textual equivalent in the <code>title</code>, then add an ID to the <code>title</code>. Finally, on the <code>svg</code>, add an ‘aria-labelledby’ attribute and set its value to the ID of the <code>title</code>.
Thanks
Mazid KhanThe page I need help with: [log in to see the link]
The topic ‘ADA Issue Non-text Content’ is closed to new replies.