Від автора: у квітні 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.
