Accessibility in EJ2 JavaScript OTP Input control

18 Jul 20248 minutes to read

The OTP Input control followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the OTP Input control 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 control:

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 following keyboard shortcuts are supported by the OTP Input control.

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 control’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

See also

HtmlAttributes

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

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

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    value: 1234,
    htmlAttributes: { title : "One-Time Password"}
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_input');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_input"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
  visibility: hidden;
  margin: 50px auto;
  width: 350px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

AriaLabels

AriaLabels define the ARIA-label attribute for each input field in the OTP input control. 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 control.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    value: 1234,
    ariaLabels: ['First digit', 'Second digit', 'Third digit', 'Fourth digit']
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_input');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_input"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
  visibility: hidden;
  margin: 50px auto;
  width: 350px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}