Оновлено: .

Нативний select — доцільна відправна точка для звичайного вибору. Кастомний компонент має бути виправданий завданням продукту, але разом із зовнішнім виглядом ви берете на себе його семантику, керування клавіатурою, фокус, стани та сумісність із допоміжними технологіями.

Почніть із поля, яке вже вміє бути полем

<label for="topic">Тема звернення (обов’язково)</label>
<select id="topic" name="topic" required>
  <option value="">Виберіть тему</option>
  <option value="design">Дизайн інтерфейсу</option>
  <option value="development">Розробка</option>
</select>

Це завершена основа вибору, а не візуальна заглушка, яку потрібно приховати від скринридера. Їй усе ще потрібні хороше компонування, контраст, зрозумілі варіанти й обробка помилок, але базову модель взаємодії надає платформа.

Чому перемикання між двома select ненадійне

Іноді пропонують показувати нативний select за :focus-visible, залишаючи кастомний для кліку. Такий підхід створює дві версії одного поля й не гарантує доступності жодної з них. Спосіб введення не визначає наявності допоміжної технології: скринридер на телефоні працює з жестами, а людина може чергувати мишу та клавіатуру.

opacity: 0 не вилучає елемент із дерева доступності чи порядку фокуса. pointer-events: none змінює обробку вказівника, але не розв’язує решти питань. aria-hidden приховує семантику, однак сам собою не запобігає фокусу. У результаті можна отримати невидимий елемент, здатний отримувати фокус, або два подання одного поля з різними значеннями.

Гібрид можливий лише як окремо спроєктована й протестована архітектура. Потрібні єдине джерело значення, коректні reset, disabled, required, валідація та надсилання форми. Сама наявність прихованого нативного поля не доводить доступності кастомної частини.

Що входить до вимог до кастомного вибору

Перш ніж писати обробники, виберіть точний патерн. Вибір зі списку без введення та combobox із пошуком — не те саме. Не змішуйте ролі menu, listbox і combobox лише тому, що всі вони візуально розкриваються вниз.

  • Доступне ім’я, роль і поточне значення мають бути зрозумілими.
  • Розкритий стан і зв’язок зі списком мають відображатися програмно.
  • Вибраний варіант і активний варіант — різні стани; їх не можна плутати.
  • Клавіші відкриття, переміщення, підтвердження, скасування та пошуку мають відповідати вибраному патерну.
  • Фокус або переміщується за узгодженою моделлю, або залишається на контролі з коректним aria-activedescendant.
  • Надсилання, скидання, помилки й недоступні варіанти не повинні розходитися з видимим інтерфейсом.

Використовуйте патерн combobox в APG як специфікацію поведінки. Це не обіцянка, що будь-який скопійований приклад однаково працюватиме з усіма браузерами та скринридерами: APG окремо вимагає перевірки сумісності.

Помилка має пояснювати шлях до виправлення

«Неправильне значення» змушує вгадувати. «Укажіть email у форматі [email protected]» пропонує дію. Не замінюйте label плейсхолдером: він зникає під час введення. Зберігайте вже введені дані після невдалого надсилання та пов’язуйте пояснення з конкретним полем.

<!-- Приклад стану після виявленої помилки -->
<label for="email">Електронна пошта</label>
<input id="email" name="email" type="email" value="name@"
  autocomplete="email" aria-invalid="true"
  aria-describedby="email-error">
<p id="email-error">Укажіть email у форматі [email protected].</p>

aria-invalid не потрібно заздалегідь установлювати всім порожнім полям. Після виправлення помилки прибирайте помилковий стан і оновлюйте повідомлення. За кількох помилок корисний загальний список із посиланнями на поля; за успішного надсилання — зрозуміле підтвердження, доступне без візуального пошуку.

Модальне вікно керує не лише картинкою

Під час відкриття діалогу потрібен осмислений початковий фокус. У модальному стані Tab не має переходити у фоновий вміст, а той не має залишатися інтерактивним. Потрібні зрозуміле ім’я та доступний спосіб закрити вікно; після закриття фокус зазвичай повертається до ініціатора або наступного логічного місця, якщо ініціатор зник.

Не призначайте aria-modal="true" вікну, яке лише виглядає модальним. Атрибут не реалізує утримання фокуса та блокування фону. У довгому діалозі не завжди доцільно одразу ставити фокус на перше поле: людина може пропустити заголовок та інструкцію.

Автентифікація — теж частина доступності

Не блокуйте вставлення пароля й роботу менеджерів паролів. Для одноразових кодів перевіряйте вставлення цілого коду та автозаповнення: шість декоративних комірок не повинні вимагати шести окремих зусиль. Критерій 3.3.8 AA обмежує обов’язкові когнітивні тести під час входу, але містить умови та винятки — це не абсолютна заборона всіх CAPTCHA або паролів.

Перевіряйте переходи між станами

Для одного поля потрібні щонайменше стани «порожньо», «введено», «помилка», «виправлено», «надсилається» і «готово». Для списку додаються «відкрито», «немає результатів» і «вибрано варіант». У кожному перевіряйте: що видно, що оголошено, де фокус, яке значення буде надіслано, як скасувати дію.

Така таблиця станів виявляє більше реальних дефектів, ніж порівняння закритого select із макетом. Особливо уважно перевіряйте затримку мережі: зникнення кнопки надсилання може призвести до втрати фокуса, а повторна активація — створити дублікат запиту. Рішення має зберігати зрозумілий статус і передбачуване керування.

Джерела та статус стандартів перевірено 5 листопада 2026 року.

Застосувати правила з ШІ-агентом

За результатами дослідження ми створили відкриті скіли для Codex і Claude Code, які допомагають аналізувати й покращувати сайти та застосунки. Accessible UI спрямовує агента під час перевірки семантики, керування клавіатурою, фокуса, форм і контрасту; Adaptive Interfaces допомагає адаптувати інтерфейс до розмірів вікна, масштабу тексту, клавіатури та складаних пристроїв. Агент вивчає поточний проєкт, пропонує обґрунтовані покращення та перевіряє погоджені зміни. Скіли не замінюють перевірку з користувачами й допоміжними технологіями.

Практичні правила цієї серії зібрано у скілі Accessible UI на GitHub: семантика, клавіатура, фокус, форми, контраст і перевірка результату. Інструкції написані англійською. Встановлення та приклади виклику описані на початку серії.