Доступний випадний список, select і combobox

Оновлено 14 жовтня 2026 · 5 хв читання

«Випадний список» означає багато речей: нативний select, власний віджет лише для вибору, поле пошуку з підказками, меню навігації. Ця сторінка охоплює випадні списки у формах — нативний select і combobox за APG. Випадні списки навігації — інший патерн: див. меню навігації. Ця сторінка входить до серії доступні UI-патерни.

Коли що використовувати

Нативний <select> для вибору одного значення зі сталого списку: країна, розмір, кількість, порядок сортування. Назва, роль, значення та підтримка клавіатури вбудовані. Сам APG зазначає, що «елемент HTML select із size="1" подається допоміжним технологіям як combobox».
Звичайне підписане текстове поле, коли довільний текст прийнятний, а підказки не суттєві.
Combobox на ARIA лише тоді, коли потрібне те, чого select не вміє: підказки під час пошуку, фільтрація довгого списку під час введення, багаті варіанти. Це один із найскладніших для правильної реалізації патернів APG.

Відповідні критерії WCAG

4.1.2 Назва, роль, значення (A): відкрито назву, роль, стан розкриття та поточне значення.
3.3.2 Маркування або інструкції (A): видима мітка, а не лише плейсхолдер.
2.1.1 Клавіатура (A) і 2.1.2 Повне керування з клавіатури (A).
3.2.2 Під час введення (A): зміна значення не повинна змінювати контекст (нова сторінка, нове вікно), якщо користувачів не попередили заздалегідь. Помилка W3C F37 стосується нових вікон, що відкриваються при зміні select.
1.3.5 Призначення полів уведення (AA): autocomplete на полях, що збирають особисті дані, наприклад країну.
4.1.3 Повідомлення про статус (AA): «Доступно 5 підказок» або «Нічого не знайдено» оголошується без переміщення фокуса.
1.4.13 Вміст під час наведення курсора чи встановлення фокуса (AA), якщо спливна панель з'являється при фокусі.

Приклад коду

<!-- 1. Native select: usually all you need -->
<label for="country">Країна</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Оберіть країну</option>
  <option value="PL">Польща</option>
  <option value="DE">Німеччина</option>
</select>

<!-- 2. Editable combobox with a listbox popup (APG pattern) -->
<label for="search">Пошук товарів</label>
<input id="search" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off">
<ul id="search-list" role="listbox" aria-label="Підказки" hidden>
  <li id="opt-1" role="option">Кросівки для бігу</li>
  <li id="opt-2" role="option">Шкарпетки для бігу</li>
</ul>
<div id="search-status" role="status" class="visually-hidden"></div>

Що має робити скрипт за APG:

Коли спливна панель відкривається: покажіть список, задайте aria-expanded="true" і aria-controls="search-list" (APG каже, що aria-controls потрібно задавати лише поки спливну панель видно).
Коли варіант виділено стрілками: DOM-фокус лишається на полі введення, а aria-activedescendant="opt-1" вказує на варіант; позначте його aria-selected="true" і видимим виділенням.
Коли вона закривається: сховайте список, aria-expanded="false", приберіть aria-activedescendant.
Оновлюйте область статусу кількістю підказок після введення.
aria-autocomplete дорівнює none, list або both відповідно до того, що робить ваш віджет. APG наводить чотири поведінки автозавершення: жодної, список з ручним вибором, список з автоматичним вибором і список із вбудованим доповненням.

Взаємодія з клавіатури

З патерну combobox APG:

Клавіша	Фокус на combobox	Фокус у спливній панелі listbox
Стрілка вниз	Переходить у спливну панель, якщо вона є	Наступний варіант
Стрілка вгору	Необов'язково: останній варіант у спливній панелі	Попередній варіант
Alt + стрілка вниз	Необов'язково: відкриває спливну панель без переміщення фокуса	—
Enter	Приймає вибрану підказку (редагований combobox)	Приймає варіант, закриває спливну панель, вставляє значення в поле
Escape	Закриває спливну панель; за бажання очищає поле, якщо вона вже закрита	Закриває спливну панель, повертає фокус на combobox
Введення тексту	Фільтрує підказки	—

Типові помилки в інтернет-магазинах

Власний «select» для розміру чи кількості, побудований з елементів div, що відкривається лише кліком миші.
Плейсхолдер замість мітки («Пошук…»), який зникає під час введення.
Підказки пошуку, які ніколи не оголошуються: немає повідомлення про статус, немає aria-expanded, немає aria-activedescendant.
Стрілки прокручують сторінку замість переходу по підказках, або Tab потрапляє в пастку всередині списку підказок.
Select сортування чи мови, що перезавантажують сторінку при зміні, тож користувачі клавіатури стрибають на нову сторінку, переглядаючи варіанти.
role="combobox" на обгортковому div замість поля введення, що отримує фокус.
Спливна панель закривається, коли мишу наводять на неї, або закриває наступне поле без способу її відхилити.

Що знаходить автоматична перевірка, а що — ручне тестування

Автоматично (правило axe-core)	Що знаходить
`select-name`	`select` без мітки
`label`, `aria-input-field-name`	Текстове поле або `role="combobox"` / `listbox` без назви
`aria-required-attr`	Combobox без обов'язкового атрибута, як-от `aria-expanded`
`aria-valid-attr-value`	`aria-controls` чи `aria-activedescendant`, що вказують на відсутній ID, недійсні значення
`aria-required-children`, `aria-required-parent`	`listbox` без дочірніх `option`, `option` поза listbox
`autocomplete-valid`	Недійсні значення `autocomplete` у полях з особистими даними

Усі вони є картками в нашій бібліотеці правил. Сканування бачить сторінку такою, якою вона завантажується, тож відкритий список підказок не тестується; розширення для браузера перевіряє сторінку в стані, у якому ви її лишили, тож спершу введіть щось у пошук. Ручне тестування: користуйтеся лише клавіатурою (введення, стрілки, Enter, Escape, Tab) і послухайте програмою зчитування з екрана, що кількість підказок та виділений варіант оголошуються.

Запустіть безкоштовну перевірку однієї сторінки. Це автоматична перевірка, а не повний аудит.

Часті запитання

Чи доступний нативний елемент select?

Так, з міткою. Браузери й допоміжні технології добре його підтримують; APG зазначає, що select із size="1" подається допоміжним технологіям як combobox. Це найнадійніший вибір для країни, розміру чи порядку сортування.

Що таке combobox?

В APG — це віджет введення зі спливною панеллю, що дає користувачеві змогу обрати значення з набору. Він може бути лише для вибору або редагованим, наприклад поле пошуку з підказками.

Які атрибути ARIA потрібні combobox?

role="combobox" на полі введення, aria-expanded зі значенням true чи false, aria-controls, що вказує на спливну панель, поки її видно, aria-activedescendant для виділеного варіанта та aria-autocomplete відповідно до поведінки. Спливна панель — зазвичай listbox із варіантами.

Чи може select переходити на іншу сторінку, коли змінюється значення?

Лише якщо користувачів попередили заздалегідь. Критерій 3.2.2 «Під час введення» не дозволяє змінювати контекст при зміні без попереднього повідомлення. Просте рішення — окрема кнопка «Перейти» або «Застосувати».

Чи може автоматична перевірка протестувати combobox?

Вона знаходить select або combobox без мітки, відсутні обов'язкові атрибути ARIA і посилання на відсутні ID. Вона не може перевірити стрілки, чи оголошуються підказки або чи працює Escape.

Джерела

W3C WAI, APG Combobox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
W3C WAI, APG Developing a Keyboard Interface (aria-activedescendant): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
W3C, Understanding 4.1.3 Status Messages: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html