Input, Input Message - Provide alternative text for images - (2036569944)

[dqateam]

Module:

16 Input & Input Message

Violation:

Provide alternative text for images

WCAG Reference:

• 1.1.1 Non-text Content

Instance ID:

2036569944

Severity:

10

Description:

[Issue]
There are meaningful images without a textual equivalent. Examples include:

• "i" icon
• "Success" icon
• "warning" icon
• "error " icon

[User Impact]
Screen reader users will be unable to determine what these images represent.

[Code Reference]

<calcite-icon class="calcite-input-message-icon" aria-hidden="true" icon="information" scale="s" calcite-hydrated="">
<svg class="svg" fill="currentColor" height="100%" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg">
(...)
</svg>
</calcite-icon>

Note:

[Suggestion]
Provide alternative text for images. Meaningful images must have a concise but descriptive textual equivalent. Remove aria-hidden="true" from the <calcite> element. In the case of svg elements, it is recommended to add role="img", <title> with the text equivalent and aria-labelledby set to the id of the title element

[Compliant Code Example]

<calcite-icon class="calcite-input-message-icon" icon="information" scale="s" calcite-hydrated="">
<svg class="svg" fill="currentColor" height="100%" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title">
<title id="title">Information</title>
(...)
</svg>
</calcite-icon>

Media Type:

Images

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[geospatialem]

A similar request is needed for #5603

[geospatialem]

Mitigated in a PR prior to the 1.0.5 release, where the svg uses aria-hidden="true".