Syncfusion AI Assistant

How can I help you?

Accessibility in React OTP Input component

21 Feb 20267 minutes to read

The OTP Input component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and common WAI-ARIA roles used to evaluate accessibility.

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

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the control meet the requirement.
Intermediate - Some features of the control do not meet the requirement.
No - The control 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 Attributes provides the text label for the OTP Inputs.

Keyboard interaction

The OTP Input component supports the following keyboard shortcuts:

Press To do this
Left Arrow Focuses the previous input in the OTP.
Right Arrow Focuses the next input in the OTP.
Tab Shifts focus to the next input in the OTP.
Shift + Tab Shifts focus to the previous input in the OTP.

Ensuring accessibility

The OTP Input component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

See also

HtmlAttributes

HTML attributes allow you to specify additional attributes to apply to the OTP Input component. These attributes provide extra customization and control over the behavior and appearance of the OTP input fields.

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

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const htmlAttributes = { title : "One-Time Password"} ;
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' value={1234} htmlAttributes={htmlAttributes}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const htmlAttributes: { [key: string]: string; } = { title : "One-Time Password"} ;
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' value={1234} htmlAttributes={htmlAttributes}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

AriaLabels

ARIA labels define the ARIA-label attribute for each input field in the OTP Input component. They enhance accessibility by providing descriptive labels for screen reader users, improving the 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 OTP input field.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const ariaLables = ['First digit', 'Second digit', 'Third digit', 'Fourth digit'];
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' value={1234} ariaLabels={ariaLables}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const ariaLables = ['First digit', 'Second digit', 'Third digit', 'Fourth digit'];
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' value={1234} ariaLabels={ariaLables}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));