Accessibility in Angular Numeric Textbox
25 Sep 20265 minutes to read
The Angular Numeric Textbox 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 Angular Numeric Textbox 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 Angular Numeric Textbox 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 spin button elements.
The Angular Numeric Textbox uses the spin button 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 Numeric TextBox. |
| aria-readonly | Indicates the read-only state of the Numeric TextBox. |
| aria-valuenow | Specifies the current value of the Numeric TextBox. |
| aria-invalid | Indicates that the user input is incorrect or outside acceptable ranges. |
| aria-label | Provides an accessible label for the Numeric TextBox. |
Keyboard interaction
The Angular Numeric Textbox 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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Ensuring accessibility
The Angular Numeric Textbox component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Angular Numeric Textbox component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Angular Numeric Textbox component with accessibility tools.