Accessibility and Keyboard

Accessibility and keyboard

Chosen preserves the native select for form submission and exposes the enhanced control as a combobox and listbox. It copies accessible names, descriptions, and relevant ARIA attributes from the source select while managing live expansion and selection state itself.

Labels

Use a normal label with a matching for and id:

<label for="country">Country</label>
<select id="country" class="chosen-select">
  <!-- options -->
</select>

Label clicks focus the generated control. The open_on_label_click option controls whether that focus also opens the dropdown. By default, a label opens a multiple select and only focuses a single select. Dragging across label text selects the text without activating Chosen. Pointer clicks on the control's border count as clicks inside Chosen; they do not immediately dismiss a newly opened dropdown. Set the option explicitly to make them behave alike.

Keyboard behavior

Key	Behavior
Tab / Shift+Tab	Move into or away from the control
Enter	Open a focused closed dropdown or choose the highlighted result
Escape	Close the dropdown without escaping to an ancestor control
Up / Down	Move through available results; Up from the first result closes a list with a selection
Home / End	Move to the first or last available result when search is empty
Page Up / Page Down	Move through longer result sets
Backspace / Delete	Clear a focused closed single selection when allow_single_deselect is enabled with a blank first option; Backspace also removes an eligible multiple choice
Command/Ctrl+A	Select all when bulk actions are enabled and search is empty
Command/Ctrl+Shift+A	Deselect all when enabled and search is empty

When search is disabled on a single select, typing letters moves to a result with that prefix. When search is enabled, typing on a focused single select opens the dropdown and starts filtering immediately. With multiselect_allow_tab_to_select: true, Tab selects a highlighted multiple-select result. With deselect_selected_results: true, Enter on an enabled selected result removes it.

When a search field contains text, editing keys keep their native text-field behavior. These single-select shortcuts work in the jQuery, Prototype, Vanilla, and React editions. Keyboard navigation scrolls the highlighted result into view. Pointer hover highlights a result without moving the list, so a partly visible option stays under the pointer.

Chosen announces the number of available results through a live status element. Use results_count_text(count) to localize that message. Keep a meaningful label on the native select; Chosen copies its accessible name and description to the generated control.

Dynamic attributes

After changing the source select’s label, ARIA attributes, disabled, or readonly state, trigger an update:

$("#country").attr("aria-describedby", "country-help").trigger("chosen:updated");

Readonly and disabled

• disabled prevents interaction and disables the original form control.
• readonly is a Chosen extension that prevents editing while keeping the source select enabled for form submission.

Selected disabled options remain visible and cannot be removed through Chosen.

Testing guidance

Test the source select’s submitted value, visible keyboard focus, screen-reader announcements, and application-specific validation. Automated accessibility checks are useful, but they do not replace keyboard and assistive-technology testing in the browsers your application supports.