Фокусировка на стилях focus CSS
Дата публикации: 2018-04-11
От автора: не все просматривают интернет с помощью мыши. Если вы читаете эту статью на смартфоне, вот вам и пример! Стоит отметить, что люди используют и другие формы ввода. Этим формам нужны стили focus CSS.
Люди сложные. Мы не всегда выполняем одно и то же действие одинаково, мы не всегда принимаем решения, которые имеют смысл, глядя со стороны. Иногда мы вообще делаем что-либо просто… чтобы делать что-то. Нам быстро становится скучно: мы возимся, откапываем и подталкиваем вещи, кастомизируем их, чтобы они лучше подходили под наши нужды, независимо от их предназначения.
Люди смертны. Мы можем заболеть, нас можно ранить. Иногда и то и другое. Иногда это на какое-то время, иногда – постоянно. Это значит, что иногда мы не в состоянии делать то, что мы хотим или так, как мы это привыкли делать.
Люди живут в мире. Иногда мы попадаем в окружение, внешние факторы которого сговорились помешать нам сделать что-то так, как мы привыкли это делать. Вы когда-нибудь застревали дома у родителей на праздники, и вам приходилось использовать их старый, но все еще рабочий компьютер? Вот так бывает.
Мышь и ввод через касание предоставляют индикатор для взаимодействия. Для касания все очевидно: ваш палец служит мостом, соединяющим ваши мысли с элементами на экране, которые нужно активировать. У мыши курсор замещает ваш палец.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Однако это не единственные формы ввода, доступные нам. Всегда есть клавиатуры, которые способны на все то, что может мышь и ввод касанием, если вы знаете все правильные клавиши и их порядок. Иногда это даже быстрее и легче, чем использовать мышь!
Подумайте, когда вы последний раз пользовались копированием, вставкой и сохранением? Может, вы работали с таблицей? Вы переключались между вводом мышью и вводом клавиатурой для максимально эффективного ввода? Скорее всего, вы не обращали внимания на это, но это хороший пример переключения ввода налету для наилучшего достижения цели. Возможно вы даже успели немного «расслабиться» и поставить лайк в facebook на смартфоне.
Если вы не можете использовать руки, вам доступны другие варианты: палочки, переключатели, устройства зажима и стяжки, распознавание речи и технология отслеживания глаз могут быть способом ввода в цифровой системе. Эти устройства определят область контента и активируют ее. Это похоже на нажатие Tab на клавиатуре, и после этого подсвечивается следующая ячейка в таблице, показывая, что на нее перешел фокус, и она готова к редактированию.
На видео выше видео редактор и консультант по доступности Christopher Hills демонстрирует возможности Switch Control, ПО, помогающего людям с нарушениями моторики использовать аппаратные переключатели для управления вычислительными устройствами.
Нужно отметить, что когда-нибудь вам могла бы понадобиться эта технология, даже если чуть-чуть. Может, вы сломаете обе руки, катаясь на горном велосипеде, и захотите заказать себе что-нибудь, пока выздоравливаете. А может, вы за рулем и хотите безопасно написать текст своей семье. Или вы постарели. Несложно придумать другие примеры, люди любят поразмышлять.
Если это интерактивно, у него должны быть стили focus
Мы не можем знать, кто посещает наши сайты и веб-приложения, зачем они это делают, что они будут делать там, каких условий они ожидают, что они чувствуют или какой способ ввода они могут использовать. Это могут подсказать аналитики, но и они не составят всю картину. Было бы глупо, если бы хвост вилял собакой. Поэтому оптимизировать весь опыт на основе ограниченной информации тоже глупо.
Важно знать, что не все, кто использует вспомогательные технологии, хотят, чтобы их считали пользователями, которые используют вспомогательные технологии. Они не хотят раскрывать это. Продвинутые пользователи – люди, которые используют сочетания клавиш, специализированное ПО и расширения браузера – могут, как правило, перемещаться как пользователи со вспомогательными технологиями и не быть инвалидами. Люди сложные!
Мы можем создать предварительный опыт, который работает для всех, независимо от возможностей и обстоятельств.
Определение и активация
:focus
Как с помощью альтернативных форм ввода определить что-то, чтобы показать, что это можно активировать? К счастью, эту проблему решил CSS – необходимо использовать селекторы :focus и :active.
Синтаксис простой. Хотите обводить ссылку оранжевым, когда пользователь получил ее фокус? Как это сделать:
Обводка появится, когда пользователь переведет на ссылку фокус, будь-то клик или нажатие пальцем, нажатие Tab на клавиатуре или переключатель.
Распространенное неправильное понятие, что focus стили могут использовать только свойство outline. :focus – это селектор, как и любой другой. Значит, он принимает весь диапазон CSS свойств. Мне нравится играться с цветом фона, подчеркиванием и другими техниками, которые не меняют текущий размер компонента, тем самым не сдвигая макет страницы при активации селектора.
Затем, например, мы хотим удалить подчеркивание ссылки при активации, чтобы сообщить о сдвиге состояния. Не забывайте: ссылки используют подчеркивания!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Важно убедиться, что изменения состояния отличаются друг от друга: от resting до focused до activated. То есть каждый переход должен быть уникальны по сравнению с другими состояниями компонента, чтобы пользователь понял, что произошло изменение.
Мы также хотим убедиться, что эти изменения состояния полагаются не только на цвет, чтобы лучше подстраиваться под людей с дальтонизмом и/или плохим зрением. Ниже показано, как только цветовое изменение состояния видит человек с дейтеронопией или красно-зеленым дальтонизмом:
Я специально удалил подчеркивание и нативное фокусное кольцо браузера со ссылки в видео, чтобы лучше проиллюстрировать проблему. Если нажимать Tab, чтобы определить интерактивные элементы страницы, не сразу становится понятно, что здесь присутствует ссылка. Если учитывать дальтонизм, то изменение состояния при наведении курсора не будет очевидным, это также касается людей с катарактой.
:focus-within
:focus-within – focus псевдокласс с очень «умиротворительным» названием – может применять стили к родителю, когда один из его дочерних элементов получает фокус. Событие focus всплывает до тех пор, пока не наткнется на CSS правило, которое просит применить стили.
Общий пример использования такого селектора – применение стилей ко всей форме, когда одно из ее полей получает фокус. В примере ниже я немного увеличиваю размер всей формы, если пользователь не изъявил желания отказаться от анимации:
Этот селектор относительно новый. Уверен, что со временем мы получим больше умных приложений.
Политика
У людей есть мнение. К сожалению, иногда они об этом не знают. Вне практики доступности есть преобладающее представление о том, что стили focus «страшные», и многие дизайнеры и разработчики удаляют их ради красоты. Иногда они даже не знают, что распространяют чье-то мнение – множество CSS resets включают полное удаление стилей focus, это без вопросов подключается как основная зависимость проекта.
Такое решение исключает людей. Веб-сайты и веб-приложения не являются закрытыми трофеями, которые отображаются без контекста в профиле dribbble, это не статичные скриншоты на гладкой корпоративной торговой площадке. Они существуют, чтобы их читали и работали с ними. Существуют правила, которые гарантируют, что это смогут сделать максимальное число людей.
:focus-visible
Дело в том, что иногда люди будут настаивать на удалении стилей focus и будут иметь достаточное влияние, чтобы заставить команду сделать это. Это противоречит правилам, которые предусматривают, что механизмы focus должны быть видимы на сайтах, чтобы те были действительно доступны. Для этого у нас есть псевдоселектор :focus-visible.
Стили псевдоселектора :focus-visible активируются, когда браузер определяет, что сработало событие фокуса, и эвристика браузера сообщает, что используется non-pointer ввод. Это причудливый способ сказать, что браузер показывает фокус при активации с помощью ввода не мышью и не пальцем.
Видео этого CodePen демонстрирует, как разные стили применяются на основе типа ввода, который получает ссылка. Когда на ссылку наводится курсор и делается клик мышью, подчеркивание ссылки удаляется, а сама ссылка немного сдвигается вниз. При нажатии Tab на клавиатуре :focus-visible применяет резкий фоновый цвет к ссылке.
Chromium недавно анонсировал, что хочет реализовать :focus-visible. Поддержка этого псевдоселектора крайне ограничена, но уже существуют полифилы. Он и :focus-within находятся в Selectors Level 4 Editor’s Draft и, возможно, получат нативную поддержку в основных браузерах.
Вы можете знать :focus-visible под его другим именем :-moz-focusring. Этот вендорный псевдоселектор – реализация Mozilla, которой предшествовало предложение 7 лет назад о :focus-visible. В отличие от другого CSS с префиксами, нам не придется думать о поддержке автопрефиксов! Firefox отличает объявление :focus-visible и :-moz-focusring, обеспечивая четкость имен селекторов между двух браузеров.
Шаг вперед, шаг назад
Поддержка в браузерах очень плохая – веб это не только Chrome и Firefox. Полифилы могут обеспечить поддержку, если нативная отсутствует, но это загрузка дополнительных данных, сложность в обслуживании и дополнительный мусор.
Стоит отметить тот факт, что устройства сейчас менее бинарны по своим типам ввода, чем раньше. Surface, флагманский компьютер от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и тачскрин прямо из коробки. WebAIM’s 2017 Screen Reader Survey показал, что мобильные устройства можно дополнить клавиатурой. Эвристика – это хорошо, но, как и аналитика может не давать всей картины.
Стили focus могут быть желательными для пользователей мыши. Их наличие является ясным и однозначным признаком интерактивности – отличный выбор для людей с низким зрением, проблемами мышления и для тех, кто плохо разбирается в технике. Гуру технологий, те, кто глубоко понимают скрин ридеры и знают много сочетаний клавиш как Vim для GUI, они захотят, чтобы состояние focus было очевидным, потому что они танцуют по экрану с помощью клавиатуры.
Процесс создания надежной и устойчивой сети включает создание сильного базового опыта, который работает во всех браузерах. Селектор :focus пользуется как широкой, так и глубокой поддержкой в той степени, что даже экзотические браузеры используют его.
Мир полон вещей, которые для некоторых будут смотреться страшно, а для других красиво. Лично мне focus стили не кажутся уродством. Как дизайнер, я думаю, что это фундаментальная часть создания надежной системы дизайна. Для меня, как для разработчика, описание состояния – это что-то очень привычное. Как человеку мне нравится помогать поддерживать открытость и доступность веба. Это то, каким он должен был быть.
Автор: Eric Bailey
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Наведение, фокус и другие состояния
Использование утилит для стилизации элементов при наведении, фокусе и т. д.
Обзор
Подобно тому, как Tailwind обрабатывает адаптивный дизайн, стилизация элементов при наведении курсора, фокусе и т. д. может выполняться с помощью префикса утилит с соответствующим вариантом состояния.
Не все варианты состояния включены для всех утилит по умолчанию из-за соображений размера файла, но мы постарались сделать все возможное, чтобы включить наиболее часто используемые комбинации из коробки.
Полный список вариантов, включенных по умолчанию, смотрите в справочной таблице в конце этой страницы.
Если вам нужно настроить таргетинг на состояние, которое Tailwind не поддерживает, вы можете расширить поддерживаемые варианты, написав вариант плагина.
Hover
Добавьте префикс hover: чтобы использовать утилиту только при наведении курсора.
По умолчанию вариант hover включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты hover для плагина в разделе variants Вашего файла tailwind.config.js :
Focus
По умолчанию вариант focus включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты focus для плагина в разделе variants Вашего файла tailwind.config.js :
Active
По умолчанию вариант active не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли active варианты для плагина в разделе variants Вашего файла tailwind.config.js :
Group-hover
Если вам нужно стилизовать дочерний элемент при наведении курсора на определенный родительский элемент, добавьте класс group к родительскому элементу и добавьте префикс group-hover: к утилите на дочернем элементе.
Создайте новый проект из множества начальных шаблонов.
По умолчанию вариант group-hover включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты group-hover для плагина в разделе variants Вашего файла tailwind.config.js :
Group-focus
Вариант group-focus работает так же, как group-hover за исключением фокуса:
По умолчанию вариант group-focus не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты group-focus для плагина в разделе variants Вашего файла tailwind.config.js :
Focus-within
По умолчанию вариант focus-within включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты focus-within для плагина в разделе variants Вашего файла tailwind.config.js :
Focus-visible
Обратите внимание, что focus-visible в настоящее время требует полифиллов JS и PostCSS для достаточной поддержки браузером.
По умолчанию вариант focus-visible не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты focus-visible для плагина в разделе variants Вашего файла tailwind.config.js :
Motion-safe
Например, эта кнопка будет анимироваться только при наведении курсора, если пользователь не включил «Уменьшить движение» в своей системе.
По умолчанию вариант motion-safe не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты motion-safe для плагина в разделе variants Вашего файла tailwind.config.js :
Motion-reduce
Например, эта кнопка по умолчанию будет анимировать при наведении курсора, но анимация будет отключена, если пользователь включил «Уменьшить движение» в своей системе.
По умолчанию вариант motion-reduce не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты motion-reduce для плагина в разделе variants Вашего файла tailwind.config.js :
Disabled
По умолчанию вариант disabled не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты disabled для плагина в разделе variants Вашего файла tailwind.config.js :
Visited
По умолчанию вариант visited не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты visited для плагина в разделе variants Вашего файла tailwind.config.js :
Checked
По умолчанию вариант checked не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты checked для плагина в разделе variants Вашего файла tailwind.config.js :
First-child
Важно отметить, что вы должны добавлять любые утилиты first: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант first-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты first для плагина в разделе variants Вашего файла tailwind.config.js :
Last-child
Важно отметить, что вы должны добавлять любые утилиты last: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант last-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты last для плагина в разделе variants Вашего файла tailwind.config.js :
Odd-child
Важно отметить, что вы должны добавлять любые утилиты odd: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант odd-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты odd для плагина в разделе variants файла tailwind.config.js file:
Even-child
Важно отметить, что вы должны добавлять любые утилиты even: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант even-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты even для плагина в разделе variants Вашего файла tailwind.config.js :
Комбинирование с адаптивными префиксами
Варианты состояния также являются адаптивными, что означает, что вы можете делать такие вещи, как, например, изменять стиль наведения элемента в разных контрольных точках.
Чтобы применить вариант состояния к определенной контрольной точке, сначала добавьте префикс ответа перед префиксом состояния:
Создание вариантов для пользовательских утилит
Вы можете сгенерировать варианты состояния для Ваших собственных пользовательских классов CSS, заключив их в директиву @variants :
Создание собственных вариантов
Вы можете создавать свои собственные варианты для любых состояний, которые Tailwind не поддерживает по умолчанию, написав собственный вариант плагина.
Например, этот простой плагин добавляет поддержку варианта псевдокласса required :
Узнайте больше о написании альтернативных плагинов в документации по вариантам плагинов.
Справочник вариантов по умолчанию
Из-за соображений размера файла Tailwind по умолчанию не включает все варианты для всех утилит.
Чтобы настроить, какие варианты включены для Вашего проекта, смотрите документацию по настройке вариантов.
Оформляйте стили наведения, фокуса и активного состояния по-разному
Вот пример кода, который всегда использовал.
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Стилизация наведения (:hover)
:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Стилизация фокуса (:focus)
:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
Две особенности, которые следует принять к сведению:
Стили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
Добавление этого кода изменит поведение нажатия кнопок на следующее:
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
Для пользователей мыши:
Для пользователей клавиатуры:
Лучшее из обоих миров!
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
Управление фокусом и атрибут inert
Множество вспомогательных технологий используют навигацию с клавиатуры для помощи в восприятии и взаимодействии с контентом. Один из способов подобной навигации — клавиша Tab. Возможно, вы знакомы с ним, если используете Tab для быстрого перемещения между полями формы, не дотягиваясь до мышки или трекпада.
Tab будет перемещаться по интерактивным элементам в том порядке, в котором они отображаются в DOM. Вот почему так важно, чтобы порядок исходного кода соответствовал визуальной иерархии вашего дизайна.
Список интерактивных элементов, по которым можно пройтись клавишей Tab:
Интерактивный элемент получает состояние фокуса, когда:
Фокус похож на ховер, поскольку так мы определяем элемент, с которым хотим провзаимодействовать. Вот почему визуально очевидные стили для фокуса имеют огромное значение.
Фокус следует по домашней странице. Начиная с логотипа, затем к товарам, услугам, вакансиям, блогу, контактам и останавливается на кнопке «Learn more».
Управление фокусом Скопировать ссылку
Управлять фокусом — значит определять, какие элементы могут его получать, а какие нет. Это один из самых сложных аспектов при разработке веб-интерфейсов, но он важен для доступности сайтов и приложений.
Полезные практики управления фокусом Скопировать ссылку
В 99% случаев вам стоит оставить порядок фокуса в покое. Не устану это повторять.
Состояние фокуса будет работать без дополнительных усилий, если вы используете для кнопок, для ссылок, для полей форм и т. д.
В редких случаях вам может понадобиться добавить фокус к элементам, к которым обычно событие focus не применимо. Вот некоторые рекомендации относительно того, как реализовать это доступно и интуитивно понятно для пользователя.
✅ Следует: узнать побольше про атрибут tabindex Скопировать ссылку
tabindex делает элементы фокусируемыми. В качестве значения он принимает число, в зависимости от которого меняется поведение фокуса.
❌ Не следует: устанавливать tabindex=»0″ там, где это не надо Скопировать ссылку
Нет необходимости устанавливать tabindex для интерактивных элементов, которые могут получать фокус с клавиатуры (например, ). Кроме того, вам не нужно прописывать tabindex неинтерактивным элементам, чтобы их могли прочесть вспомогательные устройства (на самом деле, отсутствие роли и доступного имени является ошибкой с точки зрения WCAG). На самом деле, это даже усложняет навигацию для тех, кто использует вспомогательные устройства. У таких пользователей уже есть другие, ожидаемые ими способы чтения контента.
✅ Следует: устанавливать tabindex=»-1″ для фокуса с помощью JavaScript Скопировать ссылку
❌ Не следует: использовать положительное значение tabindex Скопировать ссылку
❌ Не следует: создавать собственный порядок фокусировки Скопировать ссылку
Пройтись по интерактивным элементам можно только в том порядке, в котором они следуют друг за другом. Не следует создавать множество tabindex со значением, которое увеличивается для каждого последующего элемента, в соответствии с вашим представлением о том, как пользователь должен читать ваш сайт. Позвольте DOM сделать это за вас.
Ловушка фокуса Скопировать ссылку
Иногда есть необходимость запретить состояние фокуса. Хороший пример запрета — это ловушка фокуса, которая временно ограничивает событие фокуса у родительского элемента и у его дочерних элементов.
Ловушку фокуса не стоит путать с ловушкой клавиатуры. Ловушки клавиатуры — это ситуации, когда невозможно закрыть виджет или перейти к другому компоненту из-за вложенного цикла плохо прописанной логики.
Практический пример того, как вы могли бы использовать ловушку фокуса — это модальное окно:
Фокус проходит по странице и открывает модальное окно, чтобы продемонстрировать отмену фокуса. Далее фокус двигается в рамках контента модального окна, на кнопку «Play», кнопку «Cancel», кнопку «Purchase» и кнопку закрытия (всё это время фокус на странице заблокирован). После закрытия модального окна он возвращается к исходному положению на странице до его открытия.
Почему это важно? Скопировать ссылку
Удержание фокуса в пределах модального окна помогает понять, что является его контентом, а что нет. Это аналогично тому, как зрячий человек может видеть, как окно всплывает поверх контента сайта или приложения. Это важная информация, если:
Как это сделать? Скопировать ссылку
Надёжно управлять фокусом — дело сложное. Нужно прибегнуть к JavaScript, чтобы:
Зачем нам это? Скопировать ссылку
Не стану врать: все эти действия отнимают много времени. Но всё же, управление фокусом и удобный порядок фокусировки являются частью WCAG (руководства по обеспечению доступности веб-контента). Тема достаточна важна, чтобы считать её частью международного правового стандарта о юзабилити.
Видимость Скопировать ссылку
Существует небольшой трюк, с помощью которого можно легко ограничить видимость и интерактивность элемента.
У скринридеров есть режим взаимодействия, который позволяет им проходить по странице или просматривать её с помощью виртуального курсора. А ещё виртуальный курсор позволяет пользователю скринридера обнаруживать неинтерактивные части страницы (заголовки, списки и т. д.). В отличие от использования Tab, виртуальный курсор доступен только пользователям скринридера.
При управлении фокусом может потребоваться ограничить возможность обнаружения содержимого виртуальным курсором. В нашем примере с модальным окном это значит предотвратить случайный выход пользователя за рамки окна при чтении контента.
Знакомство с inert Скопировать ссылку
Атрибут inert — глобальный атрибут в HTML, позволяющий легко убирать и восстанавливать видимость интерактивных элементов, а также их возможность получать состояние фокуса. Вот пример:
Я намеренно избегаю использования для модального окна из-за многочисленных проблем с поддержкой.
Помните: событие закрытия модального окна может быть вызвано не только нажатием на кнопки внутри нашего модального окна из примера, но и при нажатии на Esc. А ещё некоторые модальные окна могут быть закрыты по клику на оверлей.
Поддержка inert Скопировать ссылку
Вдобавок хочется обратить внимание на пометку в README полифила:
Перемещение по DOM подразумевает, что JavaScript в полифиле требует высокой вычислительной мощности и, следовательно, в конечном итоге замедлит использование.
Для устройств с низким энергопотреблением, таких как бюджетные Android-смартфоны и устаревшие ноутбуки, а также тех, что выполняют сложные задачи (например, запуск нескольких приложений сразу), это может привести к зависанию или сбоям. Нативная браузерная поддержка делает такие процессы менее затратными в этом плане, так как у браузера есть доступ ко всем частям DOM, в отличие от JS.
Safari Скопировать ссылку
macOS и iOS всегда имели хорошую поддержку доступности, а поддержка вспомогательных технологий — важная часть их маркетинговой кампании. Поддержка inert представляется как естественное продолжение миссии Apple ввиду того, что сама эта функция смогла бы облегчить разработку доступных веб-интерфейсов в разы.
К сожалению, Apple держит в тайне, когда появится поддержка этого атрибута. Поэтому поддержка inert — всё ещё открытый вопрос.
Igalia Скопировать ссылку
Igalia — компания, работающая над функциями браузеров. Сейчас они проводят эксперимент, в котором каждый может проголосовать за те возможности браузеров, которые ему хотелось бы видеть. Конечно, моя статья совсем не про это, но вы можете узнать больше в Smashing Magazine.
Итог Скопировать ссылку
Управление фокусом требует некоторых навыков и осторожности, но это того стоит. Атрибут inert значительно облегчит эту задачу.
