콤보 상자와 자동 완성 제대로 만들기

A combobox is an input paired with a popup of suggestions. Think search boxes that drop down matching results as you type. 🔍

A combobox has a text input the user types into and a separate popup listbox of options. ARIA wires the two so screen readers connect them.

You put role="combobox" on the text input itself. This tells assistive tech that typing here will reveal a list of choices.

Use aria-controls on the input, set to the id of the popup. It links the field to the listbox it opens and closes.

Toggle aria-expanded to true when the list shows and false when it hides. Screen readers announce the popup state from this attribute.

The suggestions container takes role="listbox" and each suggestion is role="option". This gives users a familiar, navigable list.

The trick: keyboard focus never leaves the input. The user keeps typing while arrow keys move a highlight through the options.

Point aria-activedescendant on the input at the id of the highlighted option. That is how a screen reader reads the active choice without moving real focus.

Down and Up Arrow move through options, Enter selects the active one, and Escape closes the popup. These keys come straight from the APG.

Set aria-selected="true" on the highlighted option and false on the rest. Only one option should be selected at a time in a single-select combobox.

Use aria-autocomplete to describe how suggestions appear: "list" for a filtered menu or "both" when text is also completed inline.

The user arrows down through your combobox suggestions. Which attribute tells the screen reader which option is active?

A combobox is an input plus a listbox: wire them with aria-controls and aria-expanded, keep focus in the field, and track the active option with aria-activedescendant. ✅