How can I help you?
Accessibility in React Maskedtextbox component
21 Feb 20263 minutes to read
The MaskedTextBox 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 MaskedTextBox 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 MaskedTextBox 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 MaskedTextBox 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 MaskedTextBox. |
| aria-valuenow | The aria-valuenow property specifies the current value of the MaskedTextBox. |
| 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 MaskedTextBox has no value. |
| aria-labelledby | The aria-labelledby property indicates the floating label element of the MaskedTextBox. |
Ensuring accessibility
The MaskedTextBox component’s accessibility is validated using the accessibility-checker and axe-core tools during automated testing.
The accessibility compliance of the MaskedTextBox is demonstrated in the following sample. Open the sample in a new window to evaluate the MaskedTextBox with accessibility tools.