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.