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.