Функция «начальная точка навигации с последовательным фокусом» определяет, где мы начинаем поиск фокусируемых элементов для навигации с последовательным фокусом ([Tab] или [Shift-Tab]), когда область фокусировки отсутствует. Это особенно полезно для функций специальных возможностей, таких как «пропуск ссылок» и управление фокусом в документе.
HTML предоставляет нам множество встроенных средств поддержки взаимодействия с клавиатурой, а это означает, что довольно легко писать страницы, которые можно использовать с помощью клавиатуры - независимо от того, мешает ли нам двигательное нарушение использовать мышь или мы просто настолько эффективны. убирая руки с клавиатуры, мы теряем драгоценные миллисекунды.
Обработка клавиатуры вращается вокруг фокуса, который определяет, где на странице будут размещаться события клавиатуры. Есть несколько ситуаций, в которых до сих пор нам приходилось проделывать дополнительную работу, чтобы пользователи клавиатуры работали хорошо. Метод focus() позволяет нам управлять фокусом, выборочно выбирая элемент для фокусировки в ответ на действие пользователя. Однако эта передовая практика страдает множеством ошибок и требует некоторых хитрых хакерских приемов JavaScript для обеспечения базового опыта.
Хотя этот метод не собирается полностью исчезнуть в ближайшее время, в Chrome 50 он будет необходим в меньшем количестве случаев благодаря начальной точке навигации с последовательным фокусом. Благодаря этому изменению хорошо написанные страницы автоматически станут более доступными без необходимости дополнительного ручного управления фокусом. Давайте посмотрим на пример.
Ссылка внутри страницы
Сайты с большим количеством текста часто ссылаются на одну и ту же страницу, чтобы помочь пользователям быстро перейти к важным разделам.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Если бы я пользовался клавиатурой (и обожал австралийскую еду), моя следующая серия действий выглядела бы примерно так:
- Дважды нажмите
Tab, чтобы перейти к ссылке «Рецепты». - Нажмите
Enter, чтобы перейти в раздел «Рецепты». - Нажмите
Tabеще раз, чтобы перейти к ссылке «Читать далее».
Давайте посмотрим это в действии, используя Chrome 49.
Ой. Что ж, всё пошло не совсем по плану, не так ли?
Вместо того, чтобы фокусировать ссылку «Читать дальше», нажатие Tab в последний раз переместило фокус на следующий элемент в оглавлении. Это связано с тем, что разработчик не установил tabindex="-1" в заголовке, чтобы сделать его фокусируемым. Таким образом, нажатие на якорь с именем #recipes не переместило фокус. Это тонкая ошибка, но она не имеет большого значения, если вы пользуетесь мышью. Но это потенциально очень важно, если вы пользуетесь клавиатурой или переключателем устройств. Подумайте о количестве ссылок на типичной странице Википедии? Было бы неприятно постоянно переключаться между всеми этими якорями!
Давайте посмотрим на тот же опыт при использовании Chrome 50.
Ух ты, это именно то, что мы хотели, и, что самое приятное, нам не пришлось менять наш код. Браузер просто определил, куда следует направить фокус, исходя из того, где мы находимся в документе.
Как это работает?
До реализации начальной точки фокуса фокус всегда перемещался либо от предыдущего элемента, находящегося в фокусе, либо от верхней части страницы. Это означает, что выбор того, что будет сфокусировано следующим, может включать перемещение фокуса на что-то, что на самом деле не должно быть фокусируемым, например элемент контейнера или заголовок. Это вызывает всевозможные странности, включая отображение кольца фокусировки, если вы случайно щелкаете по такому элементу.
Начальная точка фокуса, как следует из названия, предоставляет механизм, предлагающий, с чего начать поиск следующего фокусируемого элемента, когда мы нажимаем Tab или Shift-Tab .
Его можно установить несколькими способами: Если что-то имеет фокус, это также является начальной точкой навигации по фокусу, как и раньше. Кроме того, как и раньше, если ничто другое не установило начальную точку навигации по фокусу, то это будет текущий document или, если он доступен и поддерживается, текущий активный dialog . Если мы перейдем к фрагменту страницы, как в примере выше, это теперь установит начальную точку фокуса. Кроме того, если мы щелкнем любой элемент на странице, независимо от того, доступен ли он для фокусировки, теперь будет установлена начальная точка навигации по фокусу. Наконец, если элемент, который был начальной точкой фокуса, удаляется из DOM, его родительский элемент становится начальной точкой фокуса. Больше никакой фокусировки, ударь крота!
Другие варианты использования
Помимо приведенного выше примера, существует множество других сценариев, в которых эта функция может пригодиться.
Скрытие элементов
Могут быть случаи, когда пользователь будет сосредоточен на элементе, для которого необходимо установить visibility: hidden или display: none . Примером этого могут быть кликабельные элементы внутри карусели. В предыдущих версиях Chrome скрытие текущего элемента таким образом приводило к возврату фокуса к исходной точке по умолчанию, превращая вышеупомянутую карусель в неприятную ловушку для пользователей с нарушениями моторики. С начальной точкой последовательного фокуса это уже не так. Если элемент скрыт любым из вышеперечисленных методов, нажатие клавиши Tab просто переместит вас к следующему элементу, находящемуся в фокусе.
Пропустить ссылки
Ссылки пропуска — это невидимые якоря, доступ к которым возможен только с помощью клавиатуры. Они позволяют пользователям «пропускать» элементы навигации, чтобы сразу перейти к содержимому страницы, и могут быть чрезвычайно полезны для пользователей клавиатуры и переключения устройств. Как поясняется на сайте WebAIM.
На многих популярных веб-сайтах есть ссылки для пропуска, хотя вы, возможно, никогда их не замечали.
Поскольку ссылки пропуска называются якорями, они работают так же, как и наш исходный пример оглавления.
Предостережения и поддержка
Начальная точка навигации с последовательным фокусом в настоящее время поддерживается только в Chrome 50, Firefox и Opera. Пока он не будет поддерживаться во всех браузерах, вам все равно придется добавлять tabindex="-1" (и удалять контур фокуса) к именованным целям привязки.
Демо
Отправная точка навигации с последовательным фокусом — отличное дополнение к набору примитивов специальных возможностей браузера. Это легко понять, и на самом деле это позволяет нам удалять код из нашего приложения, одновременно улучшая работу наших пользователей. Двойная победа! Взгляните на демо-версию , чтобы изучить эту функцию более подробно.