Vue Multi Select Component Accessibility

Vue Multi Select Accessibility

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

On this page

Accessibility

The Vue Multi Select component is designed with accessibility in mind, implementing WAI-ARIA standards to ensure compatibility with screen readers and assistive technologies.

ARIA Attributes

The component automatically includes the following ARIA attributes:

role="combobox" on the main container to identify it as a combobox control
aria-haspopup="listbox" indicates that the control has an associated listbox popup
aria-expanded reflects the current state of the dropdown (true when open, false when closed)
aria-owns establishes ownership relationship between the input and dropdown when teleport is enabled
role="listbox" on the dropdown container to identify it as a list of options
aria-labelledby connects the dropdown to the component’s label
aria-multiselectable indicates whether multiple selections are allowed
role="option" on each selectable option
aria-selected on options to indicate their selection state

The component supports full keyboard navigation:

Key	Action
`Tab`	Navigate to/from the component
`Enter/Space`	Open dropdown or select focused option
`Arrow Up/Down`	Navigate through options
`Escape`	Close the dropdown
`Backspace/Delete`	Remove last selected item (when search is empty)

All interactive elements have appropriate accessible names
Selection changes are announced to screen readers
Loading states are properly communicated
Option groups are properly labeled and associated

Customizable Labels

You can customize the accessible labels for better user experience:

<CMultiSelect
  :options="options"
  aria-cleaner-label="Remove all selected items"
  aria-indicator-label="Open options menu"
/>

Best Practices

Always provide a meaningful label prop for the component
Use descriptive option labels that make sense when read by screen readers
Consider the placeholder text as it may be announced by some screen readers
Test with actual screen readers to ensure the experience meets your users’ needs