Сторінка може чудово реагувати на наведення миші й водночас залишати людину з клавіатурою без жодної підказки. Після натискання Tab десь з’являється фокус, але яка саме кнопка активна — не видно. Це не косметична дрібниця: користувач не знає, що спрацює після Enter. Видимий фокус потрібно проєктувати разом із формами, посиланнями й кнопками.
Почніть з елементів, які вже вміють працювати
Для переходу використовуйте <a href="…">, а для дії — <button>. Ці елементи мають усталену поведінку та потрапляють у звичайну клавіатурну навігацію. Намальована кнопка на основі <div> потребує окремого керування клавішами, станами та фокусом. Додавання одного лише tabindex="0" не робить її повноцінною кнопкою.
Підписи полів залишайте видимими. Placeholder може зникати під час введення, тому він не замінює <label>. Не використовуйте додатні значення tabindex, щоб підлаштувати порядок переходу під макет: краще виправте порядок HTML. Інакше наступне редагування сторінки легко розділить її візуальну та клавіатурну логіку.
<form action="/poshuk/" method="get">
<label for="site-query">Знайти матеріал</label>
<input id="site-query" name="q" type="search">
<button type="submit">Шукати</button>
</form>
<a href="/css/kaskad-i-spetsyfichnist/">Перейти до основ CSS</a>Задайте помітний індикатор
Псевдоклас :focus-visible застосовується, коли браузер вважає, що фокус потрібно показати. Зазвичай це важливо під час роботи клавіатурою, але рішення спирається на евристики, а не лише на останню натиснуту клавішу. Наприклад, текстове поле може зберігати індикатор і після натискання мишею. Не використовуйте цей селектор як спосіб приховати корисний стан від користувача.
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid #172033;
outline-offset: 3px;
}
@media (forced-colors: active) {
:where(a, button, input, select, textarea):focus-visible {
outline-color: Highlight;
}
}Приклад розрахований на світле тло. Для темної поверхні оберіть інший колір індикатора та перевірте його поруч із реальними кольорами компонента. Відступ між елементом і контуром допомагає відокремити індикатор від межі кнопки. Не покладайтеся лише на box-shadow: у режимі примусових кольорів тінь може зникнути, тоді як контур із системним кольором залишається корисним.
Перевірте фон, а не назву кольору
Темний контур на світлому тлі зазвичай помітніший за тонку світло-сіру лінію. Для авторських візуальних ознак стану WCAG розглядає нетекстовий контраст; орієнтир для відповідних ознак — щонайменше 3:1 щодо суміжних кольорів. Водночас один вдалий контур не означає відповідності всього інтерфейсу WCAG: там є інші критерії та умови перевірки.
Оцінюйте всі поверхні, на яких може опинитися елемент. Контур, видимий на білому полотні, може загубитися на фотографії чи в повідомленні про помилку. Не обмежуйте стан фокусу короткою анімацією: підказка повинна залишатися видимою, поки елемент має фокус.
Не дайте оформленню обрізати фокус
Контур може зникнути через overflow: hidden у батьківського контейнера. Рухайтеся клавішею Tab по першому й останньому елементах картки та перевіряйте її краї. Якщо обрізання потрібне лише для зображення, перенесіть його на окрему обгортку зображення. Не обрізайте весь інтерактивний компонент без потреби.
Окремо перевірте закріплену шапку, банер унизу та відкриті панелі. Браузер може прокрутити елемент у видиму область, але ваше накладене меню все одно його закриє. Для фрагментних переходів і прокручування корисний запас scroll-margin-block-start, проте його розмір залежить від реальної висоти шапки й не замінює перевірку всього сценарію.
Перевіряйте не лише порожню форму. Введіть довгий запит, відкрийте повідомлення про помилку та повторіть переходи. Якщо після дії вміст змінюється, людина повинна розуміти, де вона опинилася. Це потребує узгодження CSS із поведінкою інтерфейсу, особливо коли частина сторінки зникає або замінюється.
Пройдіть короткий маршрут без миші
- Перейдіть усі елементи через Tab, а потім поверніться через Shift+Tab.
- Перевірте Enter для посилань та Enter або пробіл для звичайних кнопок.
- Збільште масштаб і повторіть маршрут у вузькому вікні.
- Переконайтеся, що індикатор не губиться біля краю прокручуваного контейнера.
- Перевірте помилки форми та повернення фокусу після закриття діалогового вікна, якщо воно є на сторінці.
Так ви перевірите не абстрактну властивість CSS, а здатність людини завершити дію. Видимий фокус, логічний порядок і коректні HTML-елементи працюють разом; жоден окремий селектор не замінює решту.