Stepper and Stepper Item - Ensure custom controls provide proper textual name, role, and state information - (2036570226)

[dqateam]

Module:

31 Stepper and Stepper Item

Violation:

Ensure custom controls provide proper textual name, role, and state information

WCAG Reference:

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

Instance ID:

2036570226

Severity:

7

Description:

[Issue]
The current step information is not communicated to JAWS users

[User Impact]
Screen reader users will have difficulty determining the purpose and state of these controls.

[Code Reference]

<calcite-stepper-item item-title="Error property" error="" aria-expanded="true" layout="horizontal" scale="m" tabindex="0" calcite-hydrated="" active="">Step 2 contains an "error" property.</calcite-stepper-item>

Note:

[Suggestion]
Ensure custom controls provide proper textual name, role, and state information.

A control's state indicates several possible pieces of information. Common states include expanded, current, selected, checked, and disabled. Most are indicated with similarly named ARIA attributes. Certain states can only be used with certain roles. For a list of roles and their allowed states, see the ARIA specification: https://www.w3.org/TR/wai-aria/#role_definitions

A proper ordered list can also be used with a list item that includes every step and it's respective text. Visually hidden text can be used to indicate the current and completed steps.

[Compliant Code Example]

<calcite-stepper-item error="" aria-expanded="true" layout="horizontal" scale="m" tabindex="0" calcite-hydrated="" active="">
<span class="visuallyhidden">Current: </span>
Step 2 contains an "error" property.
</calcite-stepper-item>

[Recommended Reading]
More information on how to indicate progress, reference approach 4 in "Multi-page forms" best practices:
https://www.w3.org/WAI/tutorials/forms/multi-page/

More information about the correct use of ARIA states, roles and properties can be found on the Level Access website:

https://www.levelaccess.com/how-not-to-misuse-aria-states-properties-and-roles/

Media Type:

Custom Controls

Additional Resources:

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

[geospatialem]

cc #5603, #5604

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on the main branch with NVDA (provides current step and completed step) and JAWS (provides current step).