Фокусировка для элементов с эффектом наведения мыши.

Автор статьи: Anton Peck.
Оригинал:http://antonpeck.com/journal/article/focus_on_the_hover/

Это, наверное, самый простой и понятный совет по совершенствованию процесса взаимодействия с пользователем сайта, который вы когда-либо слышали:

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

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

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

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

А вы ничего не забыли?

Давайте вернемся к сайту Gowalla. Заглянув в исходный код документа, я без труда обнаружил, что на странице применяется известный скрипт сброса настроек браузера reset.css Эрика Мейера (Eric Meyer). Присутствие этого скрипта на многих сайтах не является сюрпризом, так как его популярность очень выросла с момента его релиза.

Но ведь его автор не зря разместил следующие комментарии, предназначенные для тех, кто решил воспользоваться скриптом:

/* remember to define focus styles! */
/* не забудьте установить стили для фокуса */

Я не располагаю статистической информацией, касающейся числа веб-разработчиков, которые используют в своих проектах файл reset.css Эрика Мейера, но я думаю, что это внушительная цифра, вероятно на много больше, чем я могу предположить. Однако в нашем случае было бы намного интереснее узнать, сколько из этих самых пользователей придерживаются всех рекомендаций по определению стилей после сброса, находящихся в прилагаемой к скрипту инструкции. Как вы думаете сколько? Надеюсь, что это число больше, чем я предполагаю.

Достаточно лишь добавить псевдокласс к уже существующим селекторам.

Я уверен, что многие веб-дизайнеры, добиваясь желаемого визуального эффекта для элементов страницы, имеющих :hover эффект, выстраивают огромные цепочки из определений CSS свойств. Начиная от элементов навигации и вплоть до ссылок подвальной части сайта – везде присутствует псевдокласс :hover, и соответствующие CSS правила для оформления необходимых элементов должным образом. Так почему бы не начать с того, что уже есть? Ведь если в ваших CSS файлах дело обстоит именно так, то можно считать, что больше половины работы, необходимой для решения рассматриваемой проблемы, вы уже сделали!

Откровенно говоря, предлагаемый в статье прием не поможет вам решить какие-либо другие, интересующие вас вопросы, связанные с юзабилити сайта. Но вы, вероятно, сможете найти подходящий способ их решения на ресурсах специалистов этой области (таких как Derek FeatherstoneGlenda Sims, John F Croston III, Ann McMeekin, Joe Clark и многих других). Мой же совет прост: «Добавляя псевдокласс :focus к каждому CSS селектору, содержащему в своем составе класс :hover, вы окажете неоценимую услугу посетителям, предпочитающим пользоваться клавиатурой, позволив им с удобством перемещаться по сайту.»

Вот пример того, как я форматирую ссылки у себя на сайте (Я не использую файл reset.css, но мой способ основан на тех же принципах. Тем не менее, этот код работает):

a: hover, a:focus {
color: yellow;
text-shadow: 0 3px 5px rgb(0,0,0);
}

Как можно заметить, я просто «прицепил» селектор псевдокласса a:focus непосредственно к предыдущему a:hover. Все объясняется просто – ведь в обоих случаях (получение фокуса и наведение мыши) предусмотрено одно форматирование, описанное в пределах данного правила. Поэтому элемент страницы, получивший фокус будет отображаться так же, как он выглядит при наведении на него курсора мыши. Вы, конечно, можете применять свое форматирование, на примере лишь объясняется суть решения проблемы.

В живую увидеть работу кода, приведенного ниже, можно на примере оформления верхнего навигационному меню моего сайта:

#topnav #th_art a:hover, #topnav #th_art a:focus {
Background-position: -607px -120px;
}

Используя такой код, во время нажатия клавиши табуляции и передачи фокуса необходимой ссылке (* или другому элементу, выполняющему роль ссылки ), она примет тот же вид, какой предусмотрен при наведении на нее курсора мыши. А это позволяет в любой момент времени определить обладающий фокусом элемент страницы и делает возможным свободное перемещение по ней при помощи клавиатуры. Попробуйте несколько раз нажать клавишу Tab и вы увидите результат своими глазами. (*Автор статьи имеет в виду свой сайт.).

Идите дальше – пропагандируйте.

Ознакомившись с этой статьей вы сможете самостоятельно решить рассмотренную проблему на своем ресурсе. У меня к вам единственная просьба – делитесь этим советом с другими разработчиками. По крайней мере с теми, кто напрямую заинтересован в решении этого вопроса. И результатом такой пропаганды будет реальное улучшение юзабилити всех ресурсов Интернета в целом. Таким образом, вы будете более широко мыслить в этом направлении, и обращать внимание на другие вопросы, которые также требуют улучшения.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *