Input, Input Message - Provide valid, concise, and meaningful alternative text for image buttons - (2036569942)

[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: Input, Input Message - Provide valid, concise, and meaningful alternative text for image buttons - (2036569942)

• Module: Input, Input Message
  Issue
  There are image buttons present besides the below mentioned input fields that do not provide an accessible name. Examples include:

• Vertical:

• Vertical with Prefix and Suffix text:

• Horizontal:

• Horizontal with Prefix and Suffix text:

• Number input error message

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 class="number-button-item" data-adjustment="up" tabindex="-1" type="button"><calcite-icon aria-hidden="true" icon="chevron-up" scale="s" calcite-hydrated=""></calcite-icon></button>

Suggestion
Ensure that image buttons provide meaningful alternative text. This can be achieved by providing any of the following:- an alt attribute for input type image

• an aria-label for nested icon font elements
• an alt attribute for nested <img> elements
• a referenced <title> element for svg images (the svg element should provide an aria-labelledby attribute that maps to the id attribute value of the nested title)

Compliant Code Example

<button class="number-button-item" data-adjustment="up" aria-label="increase number" type="button"><calcite-icon aria-hidden="true" icon="chevron-up" scale="s" calcite-hydrated=""></calcite-icon></button>

---

Additional Resources:

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

[driskull]

Seems like a pretty easy issue to address. The number increment/decrement buttons just need an aria-label set from messages.

[macandcheese]

I don't think this needs to be addressed since these are non-focusable elements that replicate the native "in-field" spinners. Similar to our in-field clear button implementation. Closing as a result cc @geospatialem