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="dialog" indicates that the control opens a dialog holding the list of options
aria-expanded reflects the current state of the dropdown (true when open, false when closed)
aria-controls points the control at the dropdown dialog and the search input at the listbox while the dropdown is open
role="listbox" on the list of options inside the dropdown
aria-labelledby names the control and the dropdown after the label: label, floatingLabel, or a <label> pointing at the component’s id, read when the component mounts or its id changes; an aria-labelledby or aria-label given to the component takes precedence. A <label> wrapping the component is left out, because its text would take in the control’s own content and selection. The search box keeps a name of its own, ariaSearchLabel
aria-required on the focused control, the search box when search is on, when required is set or an aria-required is given to the component
aria-hidden="true" on the native <select> that carries the value into the form, so assistive technology meets only the combobox
Focus that reaches the native <select>, from the browser’s validation or from the label, goes on to the control (the search box when search is on), which carries aria-invalid and the feedback-invalid description. A change of selection fires input and change on the select, as a native list does
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
`Home`	Focus the first option
`End`	Focus the last option
`Escape`	Close the dropdown
`Backspace/Delete`	In the empty search box, focus the last chip; on a chip, remove it and move the focus to the next chip, else the previous one, else the search box, or the field when there is none. Entering the chips closes an open panel. A single select and the `counter` and `text` selections remove the last selected item at once
`Arrow Left/Arrow Right`	From the start of the search box, focus the last chip; between the chips, move the focus; past the last chip, return to the search box (mirrored in right-to-left)

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-picker-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