Доступность клавиатуры имеет большое значение для веб-сайтов и веб-приложений. Распространенным узким местом для интерфейсных разработчиков иногда является оптимизированная реализация доступности с клавиатуры.
Многие пользователи с ограниченными двигательными возможностями полагаются на клавиатуру. Слепые пользователи также обычно используют клавиатуру для навигации. У некоторых людей бывает тремор, который не позволяет контролировать мышцы.
Обычно пользователь может выбрать ссылку с помощью клавиши Tab и вернуться к предыдущей ссылке с помощью клавиш Shift + Tab. Есть некоторые встроенные элементы HTML, которые интерактивны с клавиатуры, например ‹a›, ‹button›, ‹input›, ‹select ›И‹ текстовое поле ›. Иногда разработчикам приходится связывать событие щелчка с ‹div›, ‹span›, или любым другим тегом HTML. В таких случаях элемент можно сфокусировать, добавив tabindex. (Чтобы узнать больше об этом, см. Практика разработки WAI-ARIA).
Первым шагом является добавление дизайна для элемента (например, тега привязки или кнопки и т. Д.), Который выбирается с клавиатуры. Для этого мы используем псевдокласс : focus. Допустим, у нас есть кнопка, на которую мы хотим добавить сфокусированный дизайн.
button:focus {
outline: none !important;
box-shadow: 0 0 2px 2px #52514f;
-webkit-box-shadow: 0 0 0 2px #52514f;
-moz-box-shadow: 0 0 0 2px #52514f;
}
При выборе элемента с помощью клавиатуры он будет выглядеть так:
Но, о-о, он также будет сфокусирован таким образом, когда пользователь щелкнет эту кнопку мышью, и будет оставаться таким, пока не будет сфокусирован другой элемент.
Итак, как нам решить эту проблему? Одним из таких решений является псевдоэлемент : focus-visible. К сожалению, этот псевдоэлемент сейчас работает только в Firefox. Для других браузеров разработчики используют различные хаки, но у всех хаков есть свои ограничения.
Найдем решение!
Чтобы решить эту проблему, я нашел простое решение в Angular using директивы. Вам просто нужно создать директиву и добавить прослушиватель событий для события mousedown в вашем элементе с помощью декоратора @hostlistener. Hostlistener объявляет событие DOM для прослушивания и предоставляет метод обработчика для запуска при возникновении этого события.
Но что мы делаем в этой директиве? При возникновении события mousedown мы просто добавляем к этому элементу класс focus-hide. Событие mousedown происходит, когда левая кнопка мыши нажимается на выбранный элемент.
@Directive({
selector: '[focusHide]'
})
export class FocusHideDirective {
@HostListener("mousedown", ["$event"])
public onMouseDownTrigger(event: any) {
event.srcElement.classList.add("focus-hide")
}
Затем мы добавим дизайн CSS в класс .focus-hide и отключим все наши дизайны фокуса.
button:focus {
outline: none !important;
box-shadow: 0 0 2px 2px #52514f;
-webkit-box-shadow: 0 0 0 2px #52514f;
-moz-box-shadow: 0 0 0 2px #52514f;
&.focus-hide {
box-shadow: none !important;
}
}
Затем добавьте свою директиву в свой HTML-тег следующим образом:
<button class="btn" focusHide>Button</button>
НЕТ! Что, если пользователь захочет выбрать этот элемент с помощью клавиатуры сейчас? Многие пользователи используют и клавиатуру, и мышь для просмотра веб-страницы. Мы создадим еще один @hostlistener для события focusout и удалим класс focus-hide (и вуаля!). Событие focusout запускается, когда элемент собирается потерять фокус.
@HostListener(“focusout”, [“$event”])
public onFocusOutTrigger(event: any): void {
event.srcElement.classList.remove(“focus-hide”)
}
Полный пример вы можете посмотреть на GitHub здесь,
Спасибо, что прочитали мой первый пост на Medium 😃 Не забывайте хлопать!
