Accessibility in Angular OTP Input component

26 Feb 20267 minutes to read

The OTP Input component conforms to accessibility standards and guidelines, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles commonly used to evaluate accessibility.

The accessibility compliance for the OTP Input component is outlined below.

Accessibility Criteria	Compatibility
WCAG 2.2 Support
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation Support
Accessibility Checker Validation
Axe-core Accessibility Validation

- 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 following ARIA attributes are used in the OTP Input component:

Attributes	Purpose
role=group	Attributes used to form a collection of items.
aria-label	Provides the text label for the OTP inputs.

Keyboard interaction

The following keyboard shortcuts are supported by the OTP Input component.

Press	To do this
Left Arrow	Focuses the previous input in the OTP.
Right Arrow	Focuses the next input in OTP
Tab	Moves the initial focus and shifts focus to the next input of the OTP.
Shift + Tab	Moves the focus to the previous input of the OTP.

Ensuring accessibility

The OTP Input component’s accessibility standards compliance is verified using the accessibility-checker and axe-core tools during automated testing. To ensure your implementation is accessible, use semantic HTML attributes, provide clear ARIA labels via the ariaLabels property, and test with assistive technologies and accessibility validators.

See also

• Accessibility in Syncfusion^® Angular components

HtmlAttributes

HtmlAttributes allow you to specify additional HTML attributes to be applied to the OTP input component.

You can pass HTML attributes as key-value pairs to the htmlAttributes property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, OtpInputModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
    <div class="wrap">
        <div id='otp-container' style="width: 350px;">
            <div ejs-otpinput [htmlAttributes]="htmlAttributes" [value]="value"></div>
        </div>
    </div>`
})

export class AppComponent {
    public htmlAttributes: { title: string } = {title : "One-Time Password"};
    public value: string = "1234"
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

index.css

/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
}

AriaLabels

AriaLabels define the ARIA-label attribute for each input field in the OTP input component. ARIA-labels enhance accessibility by providing descriptive labels for screen reader users, improving the user experience for individuals with disabilities.

You can provide an array of strings as ARIA-labels to the ariaLabels property. Each string corresponds to the ARIA-label attribute for the respective input field in the OTP input component.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, OtpInputModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
    <div class="wrap">
        <div id='otp-container' style="width: 350px;">
            <div ejs-otpinput [ariaLabels]="ariaLabels" [value]="value"></div>
        </div>
    </div>`
})

export class AppComponent {
    public ariaLabels: string[] = ['First digit', 'Second digit', 'Third digit', 'Fourth digit'];
    public value: string = "1234"
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

index.css

/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
}