Action - Ensure CSS background images that convey meaning have textual and visible equivalents - (2036569747)

[dqateam]

Module:

04 Action

Violation:

Ensure CSS background images that convey meaning have textual and visible equivalents

WCAG Reference:

• 1.1.1 Non-text Content

Instance ID:

2036569747

Severity:

8

Description:

[Issue]
The "blue" meaningful CSS indicator with no textual equivalents.

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

[Code Reference]

CSS:
constructed stylesheet
:host([indicator]
.button::after {
   content: "";
   position: absolute;
   block-size: 0.5rem;
   inline-size: 0.5rem;
   border-radius: 9999px;
   border-width: 2px;
   background-color: var(--calcite-action-indicator-color);
   border-color: var(--calcite-ui-foreground-1);
   inset-block-end: 0.75rem;
   inset-inline-end: 0.75rem;
}

Note:

[Suggestion]
Ensure CSS background images that convey meaning have textual and visible equivalents.

The best way to do this is to use a real <img> or SVG element. To provide a textual equivalent for an <img> element, add an alt attribute set to the desired text. To provide a textual equivalent for an SVG, add role="img" to the <svg> element and add an aria-label attribute set to the desired text.

[Compliant Code Example]

N/A

Media Type:

Images

Additional Resources:

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

[geospatialem]

Closing in favor of #4813, as we have more discussion, context, and information through the original issue.