Accessibility in React Input Mask
4 Sep 20263 minutes to read
The React Input Mask component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and common WAI-ARIA roles used to evaluate accessibility.
The accessibility compliance for the React Input Mask component is outlined below.
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The React Input Mask provides complete ARIA accessibility support, enabling access through screen readers and other assistive technologies. This component follows the guidelines in WAI-ARIA Accessibility practices.
The React Input Mask uses the textbox role and the following ARIA properties based on its state:
| Property | Functionality |
|---|---|
| aria-live | The aria-live attribute indicates the priority of updates to a live region. |
| aria-disabled | The aria-disabled property indicates the disabled state of the React Input Mask. |
| aria-valuenow | The aria-valuenow property specifies the current value of the React Input Mask. |
| aria-invalid | The aria-invalid property indicates that the user input is incorrect or not within the acceptable ranges. |
| aria-placeholder | The aria-placeholder is a short hint to help the users with data entry when the React Input Mask has no value. |
| aria-labelledby | The aria-labelledby property indicates the floating label element of the React Input Mask. |
Ensuring accessibility
The React Input Mask component’s accessibility is validated using the accessibility-checker and axe-core tools during automated testing.
The accessibility compliance of the React Input Mask is demonstrated in the following sample. Open the sample in a new window to evaluate the React Input Mask with accessibility tools.