Керування фокусом користувача за допомогою :focus-visible

Це буде друга публікація в невеликій серії, яку ми робимо про доступність форм. Якщо ви пропустили перший пост, перегляньте Доступні форми з псевдокласами. У цій публікації ми розглянемо :focus-visible і як використовувати його на своїх веб-сайтах!

Фокус Touchpoint

Перш ніж рухатися вперед із :focus-visible, давайте переглянемо, як :focus працює у вашому CSS. Фокус — це візуальний індикатор того, що з елементом взаємодіють за допомогою клавіатури, миші, трекпада або допоміжних технологій. Певні елементи природно інтерактивні, наприклад посилання, кнопки та елементи форми. Ми хочемо переконатися, що наші користувачі знають, де вони знаходяться та як взаємодіють.

Пам’ятайте, що не робіть цього у своєму CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Коли ви знімаєте фокус, ви знімаєте його для ВСІМ! Ми хочемо переконатися, що ми зберігаємо фокус.

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

Що таке focus-visible?

Псевдоклас, :focus-visible, схожий на наш за умовчанням :focus псевдоклас. Це дає користувачеві індикатор того, що на сторінці щось фокусується. Те, як ти пишеш :focus-visible нарізається та сушиться:

:focus-visible {
  /* ... */
}

При використанні :focus-visible з певним елементом синтаксис виглядає приблизно так:

.your-element:focus-visible {
  /*...*/
}

Чудова річ у використанні :focus-visible ви можете виділити свій елемент, яскраво і сміливо! Не потрібно хвилюватися про те, що буде показано, якщо елемент клацнув/торкнувся. Якщо ви вирішите не реалізовувати клас, за замовчуванням буде кільце фокусування агента користувача, що для деяких є небажаним.

Передісторія focus-visible

Раніше ми мали :focus-visible, буде застосовано стиль агента користувача :focus до більшості елементів на сторінці; кнопки, посилання тощо. До елемента, який можна сфокусувати, буде застосовано контур або «кільце фокусування». Це було визнано потворним, більшості не сподобалося кільце фокусування за замовчуванням, надане браузером. Через те, що кільце фокусування було незручним для перегляду, більшість авторів видалили його... без альтернативи. Пам'ятайте, коли ви знімаєте :focus, це зменшує зручність використання та робить досвід недоступним для користувачів клавіатури.

У поточному стані Інтернету браузер більше не відображає фокус навколо різних елементів, коли вони мають фокус. Натомість браузер використовує різні евристики, щоб визначити, коли це допоможе користувачеві, надаючи у відповідь кільце фокусу. Відповідно до Khan Academyевристика - це «техніка, яка керує алгоритмом для пошуку хороших варіантів».

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

У перші дні Росії :focus-visible ми використовували a поліфіль щоб керувати кільцем фокусування, створеним Алісою Боксхолл і Браяном Карделлом, Mozilla також випустила власний псевдоклас, :moz-focusring, до офіційної специфікації. Якщо ви хочете дізнатися більше про перші дні фокус-кільця, перегляньте A11y Відливки з Робом Додсоном.

Зосередьтеся на важливості

Є багато причин, чому у вашій заявці важливий фокус. По-перше, як я вже зазначав вище, ми, як посли Інтернету, маємо переконатися, що надаємо найкращий доступний досвід. Ми не хочемо, щоб будь-хто з наших користувачів здогадувався, де вони знаходяться, під час навігації через досвід.

Одним із прикладів, який завжди спадає на думку, є Сайт «Два сліпі брати».. Якщо ви перейдете на веб-сайт і клацнете/торкнетеся (це працює на мобільних пристроях) закритого ока в нижньому лівому куті, ви побачите око відкритим і почнеться симуляція. Обидва брати, Бредфорд і Брайан Меннінг, у молодому віці отримали діагноз «хвороба Старгардта». Хвороба Штаргардта є формою дегенерації жовтої плями ока. З часом обидва брати повністю осліпнуть. Відвідайте сайт і натисніть око, щоб побачити, як вони бачать.

Якби ви були на їхньому місці і вам довелося переміщатися сторінкою, ви б хотіли переконатися, що точно знаєте, де ви знаходитесь протягом усього досвіду. Кільце фокусування дає вам цю силу.

Демонстрація

Наведена нижче демонстрація показує, як це зробити :focus-visible працює при додаванні до вашого CSS. Перша частина відео демонструє навігацію за допомогою миші, друга – навігацію лише за допомогою клавіатури. Я також записав себе, щоб показати, що я перейшов від використання миші до клавіатури.

Браузер передбачає, що робити з кільцем фокусування на основі мого введення (клавіатура/миша), а потім додає кільце фокусування до цих елементів. У цьому випадку, коли я переміщаюся цим прикладом за допомогою клавіатури, все отримує фокус. Під час використання миші лише введення отримує фокус, а кнопки – ні. Якщо видалити :focus-visible, браузер застосує стандартне кільце фокусування.

Застосовується наведений нижче код :focus-visible до елементів, які можна сфокусувати.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Якщо ви хочете вказати label або кнопку отримання :focus-visible просто додайте перед класом input or button відповідно.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Підтримайте

Якщо браузер не підтримує :focus-visible ви можете повернутися на місце, щоб впоратися з взаємодією. Наведений нижче код походить від Дитячий майданчик MDN. Ви можете використовувати @підтримує при-правило або «запит на функцію» щоб перевірити підтримку. Слід пам’ятати одну річ: правило слід розміщувати у верхній частині коду або вкладати в іншу групу at-rule.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Подальші проблеми з доступністю

Проблеми доступності, про які слід пам’ятати, створюючи свій досвід:

• Переконайтеся, що кольори, які ви вибрали для свого індикатора фокусу, все ще доступні відповідно до інформації, задокументованої в WCAG 2.2 Non-text Contrast (рівень AA)
• Когнітивне перевантаження може викликати у користувача дистрес. Переконайтеся, що стилі різних інтерактивних елементів узгоджені

Підтримка браузера

зв'язку

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• PlatoData.Network Vertical Generative Ai. Додайте собі сили. Доступ тут.
• PlatoAiStream. Web3 Intelligence. Розширення знань. Доступ тут.
• ПлатонЕСГ. вуглець, CleanTech, Енергія, Навколишнє середовище, Сонячна, Поводження з відходами. Доступ тут.
• PlatoHealth. Розвідка про біотехнології та клінічні випробування. Доступ тут.
• джерело: https://css-tricks.com/managing-user-focus-with-focus-visible/