Require images to have alternative text (wcag/h37
)
Both HTML5 and WCAG requires all images to have an alternative text. Assistive technology such as screenreaders relies on the alt-text to provide a description of the image.
Purely Decorative images must use empty (null
) alt=""
attribute (preferred)
or be excluded from accessibility tree with role="presentation"
or
aria-hidden="true"
.
Rule details
Examples of incorrect code for this rule:
<img>
Examples of correct code for this rule:
<img alt="...">
Options
This rule takes an optional object:
{
"allowEmpty": true,
"alias": []
}
allowEmpty
Sometimes images are used in context where the image only adds to the user experience but is already clear from an A11Y perspective.
When true
this allows empty <img alt="">
to be used to prevent errors and to
signal that the image is not meant to be read.
Examples of correct code for this rule:
<span>The task was successfully completed! <img src="thumbsup.png" alt=""></span>
alias
If javascript is used to set the attribute on-the-fly (e.g. using
angular-translate
) the alternative attributes can be listed here.
Examples of correct code when alias
is ["data-alt"]
:
<img data-alt="...">