Фокус стилі на інтерактивних елементах?

16

Від автора: у квітні Heather Migliorisi розповідала про доступність плавної прокрутки. Давайте в цьому зв’язку розглянемо питання фокус стилів на інтерактивних елементах.

Для плавної прокрутки необхідно:

перевірити, щоб кликнутая посилання була #jump-посиланням;

відключити поведінку браузера з миттєвим перепрыгиванием на елемент на сторінці;

анімувати перейдіть до елемента, на який посилається #jump-посилання.

На другому етапі виникають проблеми з доступністю. #jump-посилання більше не фокус на зазначений елемент. Тому Heather додали пункт 4: переміщати фокус на елемент, зазначений у #jump-посиланням.

Тим не менш, JS не вміє переміщувати фокус на всі елементи. Іноді необхідно примусово дати фокус елементу, що вона зробила за допомогою tabindex=»-1″.

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

Фокус стилі на інтерактивних елементах?

Зверніть увагу на світиться синій контур навколо заголовків, на які прокручується сторінка.

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

По цій темі навіть створили окремий сайт:

Фокус стилі на інтерактивних елементах?

Ви можете змінити фокус стилі, якщо хочете, однак з точки зору доступності краще, щоб фокус стилі для елементів у фокусі відрізнялися. Не можу уявити, навіщо потрібно залишати фокус стилі.

Але але але

Заголовки – не фокусируемые елементи.

Це не інтерактивні елементи. Ми не звикли, щоб фокус стилі задавалися на інтерактивні елементи. Однак зараз ми знайшли в інтернеті техніку плавної прокрутки, і отримали такі стилі. Це зробив tabindex=»-1″.

Я написав Heather з цього приводу.

«Стилі :focus для заголовків і інших інтерактивних елементів можна видалити. Вибір стоїть за розробниками сайту, залишити їх чи ні. У деяких випадках я сама видаляла такі стилі, в інших я їх писала. Тут все на ваш розсуд.»

На мій подив я дізнався, що можна видаляти фокус стилі з елементів, які примусово отримали фокус і не є інтерактивними. Останнє речення дуже важливо, і Heather пояснює: «Якщо заголовки представлені не у вигляді посилань…;)»

Якщо ви ненавидите фокус стилі, то можете зробити наступне:

h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus {
outline: 0;
}

Ви убезпечили себе. Навіть у випадках

і

у посилання будуть фокус стилі.

Це не просто заголовки

Якорі можуть вести на будь-який елемент, а в розмітці повно нефокусируемых за замовчуванням елементів. У цій ситуації можна використовувати іншу класичну техніку, «yellow fade». Скажімо, замість заголовків ми посилаємося на
. Коли секція отримує фокус, її можна стилізувати наступним чином:

section:focus {
outline: 0;
animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
from { background: lightYellow; }
to { background: white; }
}

Що дасть нам:

Фокус стилі на інтерактивних елементах?

Це адаптація техніки, яка часто використовується для :target.