Доступный выпадающий список, 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 застревает внутри списка подсказок.
Списки сортировки или языка, перезагружающие страницу при изменении, так что пользователи клавиатуры при просмотре вариантов перескакивают на новую страницу.
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