Action Pad and Action - Provide valid, concise, and meaningful alternative text for image buttons - (2036569767)

[dqateam]

Violation:

Provide valid, concise, and meaningful alternative text for image buttons

WCAG Reference:

• 1.1.1 Non-text Content
• 4.1.2 Name, Role, Value

Severity:

6

Media Type:

Forms

---

Areas for Remediation:

• Title: Action Pad and Action - Provide valid, concise, and meaningful alternative text for image buttons - (2036569767)

• Module: Action Pad and Action
  Issue
  There are expand/collapse image buttons that do not provide the complete accessible names. The expand/collapse state is defined using an accessible name. Examples include:

• Action pad

• Action pad small scale

• Action pad expanded

• Action pad horizontal layout

• Action pad grid layout

User Impact
Without meaningful alternative text, any information conveyed by these image buttons will not be conveyed to screen reader users and they will be announced as unlabeled buttons.

Code Reference

<button aria-busy="false" aria-disabled="false" aria-label="Expand" class="button">
 <div aria-hidden="true" class="icon-container">
   (...)
 </div>
 <div class="text-container">Expand</div>
</button>

Suggestion
Ensure that image buttons provide meaningful alternative text. This can be achieved by providing an aria-label for <button> elements.

Compliant Code Example

<button aria-busy="false" aria-disabled="false" aria-label="Action pad Expand" class="button">
 <div aria-hidden="true" class="icon-container">
   (...)
 </div>
 <div class="text-container">Expand</div>
</button>

---

Additional Resources:

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

[driskull]

Seems like an app issue. Can use the label property here.

[geospatialem]

This has been mitigated prior to 2.0.0 with the "expand-tooltip" slot to provide specific context when the action-pad is collapsed to provide context on expansion, and also provides the "collapse" context. Both the "expand" and "collapse" strings can be modified by the developer for additional configuration.