#frontend #a11y
Полноценная навигация по веб-интерфейсу и его элементам управления возможна не только с помощью мыши. Современные браузеры позволяют перемещать фокус и манипулировать элементами управления веб-страницы в ее контентной области, используя только клавиатуру. Это повышает скорость и качество работы пользователей с ограниченными возможностями или пользователей, работающих со специфическими промышленными интерфейсами.
Обеспечить правильное и понятное поведение перемещения фокуса при нажатии клавиши Tab не сложно — достаточно использовать семантически верные HTML-сущности. Кнопки, ссылки и элементы формы имеют нативную поддержку фокусного состояния.
Но иногда нам необходимо исключить из навигации некоторую контентную часть страницы, нарушающую поведенческие ожидания пользователя по изменению фокуса. Например, модальное окно или выпадающее меню. В случае с этими элементами фокус может не очевидно для пользователя перемещаться в зоне скрытого контента.
Не лучшим решением проблемы является исключение таких элементов или блоков из фокусной цепочки с помощью
display: none;. Существует даже специализированный атрибут HTML-элементов inert, позволяющий исключать нужный элемент из цепочки навигации. Но поддержка такого атрибута браузерами, судя по MDN-документации, крайне низка.В этом случае нам поможет полифил inert, который обеспечит драгоценное 💎 поведение пропуска элемента в большинстве браузеров.