Vue Autocomplete Component Accessibility

Autocomplete Accessibility

Detailed overview of the accessibility features implemented in CoreUI Vue Autocomplete, ensuring compliance with WAI-ARIA guidelines.

On this page

Accessibility

The Vue Autocomplete component includes several accessibility features:

  • ARIA attributes: Proper role, aria-expanded, aria-haspopup, and aria-autocomplete attributes
  • Screen reader support: Descriptive labels and announcements for state changes
  • Keyboard navigation: Full keyboard support with arrow keys, Enter, Escape, and Tab
  • Focus management: Proper focus handling and visual focus indicators
  • Semantic markup: Uses appropriate HTML elements and structure

Keyboard shortcuts

KeyAction
Arrow DownNavigate to the next option or open dropdown
Arrow UpNavigate to the previous option
EnterSelect the highlighted option
EscapeClose the dropdown and clear focus
TabAccept hint completion (when hints are enabled)
Backspace/DeleteClear input and trigger search