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

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

Но что делать, если необходимо, чтобы все элементы страницы могли оказаться в фокусе? Нужно добавить атрибут HTML tabindex в код HTML тому элементу, который должен оказываться в фокусе:

Теперь при использовании табуляции для перемещения по элементам все элементы будут оказываться в фокусе и выделяться цветом фона, в том числе все текстовые элементы.

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

Это значит, что можно создать что-то наподобие следующего примера. Это игра на чистом CSS под названием «Найдите котенка»:

В этом примере используется тот же способ, что и в предыдущем: изменение стилей для элемента в фокусе, но значения атрибута HTML tabindex добавлено всем вложенным блокам, так что все они могут оказаться в фокусе как при использовании табуляции, так и при нажатии указателем мыши.

Если использовать воображение и другие свойства CSS, можно создать другие интересные эффекты.

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

Надеемся, этот способ использования атрибута HTML tabindex и псевдокласса CSS фокус показался Вам интересным, хотя он, как мы уже отмечали, вероятно, уже знаком опытным разработчикам.

Автор урока Louis Lazaris

Перевод — Дежурка

Смотрите также:

• Использование функции CSS3 calc ()
• Использование фильтров CSS
• Использование свойства CSS выравнивания текста