How can I help you?
Accessibility in React NumericTextBox component
21 Feb 20266 minutes to read
The NumericTextBox component adheres to the highest accessibility standards, including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles. These standards ensure the component is accessible to all users, including those using assistive technologies.
The accessibility compliance for the NumericTextBox component is outlined in the table below. A checkmark (✓) indicates full feature compliance, while partial or absent support is noted accordingly.
- 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 NumericTextBox features comprehensive ARIA accessibility support, enabling seamless interaction with screen readers and other assistive technologies. This component implements the practices outlined in WAI-ARIA Spinbutton specifications, ensuring users with disabilities can access all functionality.
The NumericTextBox uses the spinbutton role and following ARIA properties to its element based on its state.
| Property | Functionality |
|---|---|
| aria-live | The aria-live attribute indicates the priority of updates to a live region |
| aria-valuemin | The aria-valuemin property specifies the minimum allowable range of the NumericTextBox. |
| aria-valuemax | The aria-valuemax property specifies the maximum allowable range of the NumericTextBox. |
| aria-disabled | The aria-disabled property indicates disabled state of the NumericTextBox. |
| aria-readonly | The aria-readonly property indicates the read-only state of the NumericTextBox. |
| aria-valuenow | The aria-valuenow property specifies the current value of the NumericTextBox. |
| aria-invalid | The aria-invalid property indicates that the user input is incorrect or not within acceptable ranges. |
| aria-label | The aria-label property indicates a string value that labels the NumericTextBox. |
Keyboard interaction
The NumericTextBox keyboard interactions follow WAI-ARIA Spinbutton practices, providing full accessibility via keyboard without requiring a mouse. Users can navigate and control the component entirely through keyboard input.
The following table describes the keyboard shortcuts and their corresponding actions:
| Keyboard Shortcut | Action |
|---|---|
| Arrow Up | Increments the numeric value |
| Arrow Down | Decrements the numeric value |
[Class-component]
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10} />
,document.getElementById('numericContainer'));[Functional-component]
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
return <NumericTextBoxComponent value={10}/>;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
return <NumericTextBoxComponent value={10} />;
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));Ensuring accessibility
The NumericTextBox component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the NumericTextBox component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the NumericTextBox component with accessibility tools.