How can I help you?
Accessibility in Angular NumericTextBox component
26 Feb 20265 minutes to read
The NumericTextBox component adheres to accessibility guidelines and standards including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles. The following table outlines the accessibility compliance status of the NumericTextBox component.
- 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 includes complete ARIA accessibility support, enabling access through screen readers and other assistive technology devices. The component is designed following the WAI-ARIA Accessibility practices guidelines for spinbutton elements.
The NumericTextBox uses the spinbutton role and the following ARIA properties based on component state:
| Property | Functionality |
|---|---|
| aria-live | Indicates the priority of updates to a live region. |
| aria-valuemin | Specifies the minimum allowable value. |
| aria-valuemax | Specifies the maximum allowable value. |
| aria-disabled | Indicates the disabled state of the NumericTextBox. |
| aria-readonly | Indicates the read-only state of the NumericTextBox. |
| aria-valuenow | Specifies the current value of the NumericTextBox. |
| aria-invalid | Indicates that the user input is incorrect or outside acceptable ranges. |
| aria-label | Provides an accessible label for the NumericTextBox. |
Keyboard interaction
The NumericTextBox keyboard interaction is based on WAI-ARIA Practices guidelines for spinbutton elements, providing keyboard-only access as an alternative to mouse interaction.
The following table shows the supported keyboard shortcuts:
| Keyboard Shortcut | Action |
|---|---|
| Arrow Up | Increments the value. |
| Arrow Down | Decrements the value. |
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
@Component({
imports: [
NumericTextBoxModule,
FormsModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the NumericTextBox component
// sets value to the NumericTextBox
template: `
<ejs-numerictextbox value='10'></ejs-numerictextbox>
`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));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.