Accessibility in Blazor OTP Input component
30 Apr 20253 minutes to read
The Blazor OTP Input component 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 Blazor 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 | ![]() |



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 following keyboard shortcuts are supported by the OTP Input component.
Windows | Mac | Actions |
---|---|---|
← | ← | Focuses the previous input in the OTP. |
→ | → | Focuses the next input in OTP |
Tab | Tab | Moves the initial focus and shifts focus to the next input of the OTP. |
Shift + Tab | ⇧ + Tab | Moves the focus to the previous input of the OTP. |
See also
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.
@using Syncfusion.Blazor.Inputs
<SfOtpInput HtmlAttributes=@attrs ></SfOtpInput>
@code {
Dictionary<string, object> attrs = new Dictionary<string, object>()
{
{"title", "One-Time Password" }
};
}
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.
@using Syncfusion.Blazor.Inputs
<SfOtpInput AriaLabels=@label></SfOtpInput>
@code {
private string[] label = ["First digit", "Second digit", "Third digit", "Fourth digit"];
}