Vue One-Time Password Input Component Accessibility

One-Time Password Input Accessibility

Detailed overview of the accessibility features implemented in CoreUI Vue One-Time Password Input, ensuring compliance with WAI-ARIA guidelines.

On this page

Accessibility

The one-time password input component is designed with accessibility in mind and follows WCAG guidelines for form inputs.

ARIA Labels: Each input field automatically receives descriptive aria-label attributes
Role Attribute: The container has role="group" to indicate related form controls
Keyboard Navigation: Full keyboard support with arrow keys, tab, and backspace
Screen Reader Support: Clear announcements when values change or validation occurs
Focus Management: Automatic focus handling for seamless navigation

Customizing accessibility

You can customize the aria-label generation function to provide more specific descriptions:

<COneTimePassword
  :aria-label="(index, total) => `Enter digit ${index + 1} of your ${total}-digit verification code`"
>
  <COneTimePasswordInput />
  <COneTimePasswordInput />
  <COneTimePasswordInput />
  <COneTimePasswordInput />
</COneTimePassword>

Keyboard support

The one-time password input component provides comprehensive keyboard navigation support:

Key	Action
`Arrow Right`	Move focus to next input field
`Arrow Left`	Move focus to previous input field
`Backspace`	Delete current character and move to previous field (if empty)
`Tab`	Move to next focusable element (respects linear mode)
`Shift` + `Tab`	Move to previous focusable element
`Ctrl` + `V` / `Cmd` + `V`	Paste clipboard content and auto-fill fields