Избавьтесь от головной боли, связанной с управлением фокусом

Rob Dodson

Функция «начальная точка последовательной навигации фокуса» определяет, где мы начинаем искать фокусируемые элементы для последовательной навигации фокуса ([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.

Ой. Ну, все пошло не совсем по плану, да?

Вместо того, чтобы сфокусироваться на ссылке Read More, нажатие Tab в последний раз переместило фокус на следующий элемент в таблице содержания. Это потому, что разработчик не установил tabindex="-1" для заголовка, чтобы сделать его фокусируемым. Поэтому нажатие на якорь с именем #recipes не переместило фокус. Это тонкая ошибка, и не такая уж большая проблема, если вы пользуетесь мышью. Но это потенциально очень большая проблема, если вы пользуетесь клавиатурой или устройством Switch. Подумайте о количестве взаимосвязей на типичной странице Википедии? Было бы неприятно постоянно переходить вперед и назад по всем этим якорям!

Давайте рассмотрим тот же опыт, но с использованием Chrome 50.

Ого, это именно то, что мы хотели, и самое лучшее, что нам не пришлось менять код. Браузер просто вычислил, куда следует переместить фокус, основываясь на том, где мы находились в документе.

Как это работает?

До внедрения начальной точки фокуса фокус всегда перемещался либо с предыдущего сфокусированного элемента, либо с верхней части страницы. Это означает, что выбор того, что будет сфокусировано следующим, может включать перемещение фокуса на что-то, что на самом деле не должно быть сфокусированным, например, на элемент контейнера или заголовок. Это вызывает всевозможные странности, включая отображение кольца фокуса, если вы случайно нажмете на такой элемент.

Начальная точка фокуса, как следует из названия, предоставляет механизм, предлагающий, где начать поиск следующего фокусируемого элемента при нажатии Tab или Shift-Tab .

Его можно задать несколькими способами: Если что-то имеет фокус, это также начальная точка навигации фокуса, как и раньше. Также, как и раньше, если ничто другое не установило начальную точку навигации фокуса, то это будет текущий document или, если он доступен и поддерживается, текущий активный dialog . Если мы перейдем к фрагменту страницы, как в примере выше, это теперь установит начальную точку навигации фокуса. Кроме того, если мы щелкнем любой элемент на странице, независимо от того, фокусируется ли он, это теперь установит начальную точку навигации фокуса. Наконец, если элемент, который был начальной точкой фокуса, удаляется из DOM, его родительский элемент становится начальной точкой фокуса. Больше никаких фокус-бей-крота!

Другие варианты использования

Помимо приведенного выше примера, существует множество других сценариев, в которых эта функция может оказаться полезной.

Скрытие элементов

Могут быть случаи, когда пользователь будет сфокусирован на элементе, для которого необходимо задать значение visibility: hidden или display: none . Примером этого могут служить кликабельные элементы в карусели. В предыдущих версиях Chrome скрытие текущего сфокусированного элемента таким образом сбрасывало фокус обратно в начальную точку по умолчанию, превращая вышеупомянутую карусель в неприятную ловушку для пользователей с нарушениями моторики. С последовательной начальной точкой фокуса это больше не так. Если элемент скрыт одним из вышеперечисленных методов, нажатие клавиши Tab просто переместит к следующему сфокусированному элементу.

Пропустить ссылки

Ссылки пропуска — это невидимые якоря, к которым можно получить доступ только с помощью клавиатуры. Они позволяют пользователям «пропускать» элементы навигации, чтобы сразу перейти к содержанию страницы, и они могут быть чрезвычайно полезны для пользователей клавиатуры и переключателя устройств. Как объясняется на сайте WebAIM

На многих популярных веб-сайтах реализованы ссылки для пропуска, хотя вы, возможно, никогда их не замечали.

Поскольку ссылки пропуска называются якорями, они работают так же, как и наш исходный пример оглавления.

Предостережения и поддержка

Начальная точка последовательной навигации фокуса в настоящее время поддерживается только в Chrome 50, Firefox и Opera. Пока она не будет поддерживаться во всех браузерах, вам все равно придется добавлять tabindex="-1" (и удалять контур фокуса) к вашим именованным якорным целям.

Демо

Начальная точка последовательной навигации фокуса — это отличное дополнение к набору примитивов доступности браузера. Это легко понять, и на самом деле это позволяет нам удалять код из нашего приложения, одновременно улучшая опыт для наших пользователей. Двойной выигрыш! Взгляните на демо , чтобы изучить эту функцию более подробно.