Accessibility in Blazor OTP Input
14 Aug 20264 minutes to read
The Blazor OTP Input component follows established accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, 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 | AA |
| Section 508 Support |  |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
- All features of the component meet the requirement.
- Some features of the component do not fully 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 |
Applied to the container to group the OTP input fields. |
aria-label |
Provides a text label for the OTP input fields that assistive technologies can announce. |
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 the 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. |
Accessibility configuration
The following properties allow you to enhance the accessibility of the OTP Input component by adding custom HTML attributes and descriptive labels for assistive technologies.
HTML attributes
The HtmlAttributes property allows specifying additional HTML attributes to be applied to the OTP input component for improved semantics and accessibility. 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" }
};
}Aria labels
The AriaLabels property defines the aria-label attribute for each input field in the OTP input component. You can provide an array of strings as aria-label values to the AriaLabels property. Each string in the array corresponds to the aria-label attribute for the respective input field, providing descriptive labels for screen reader users.
@using Syncfusion.Blazor.Inputs
<SfOtpInput AriaLabels=@label></SfOtpInput>
@code {
private string[] label = ["First digit", "Second digit", "Third digit", "Fourth digit"];
}