Как фокус помогает

5 июля 2017

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

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

Ссылки тоже могут быть в фокусе, их тогда можно открыть энтером, а если в фокусе кнопка, то её можно нажать пробелом. Если в фокусе одна радиокнопка из списка, селект или ручка диапазона, то перебирать списки или двигать ручку можно стрелками клавиатуры. И речь не только о встроенных элементах — вы тоже можете создавать интерактивные элементы, которые попадают в фокус или управляются с клавиатуры.

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

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

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

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

Главный аргумент для отключения, мол, некрасиво и нет такого в дизайне. И я даже понимаю тех, кому некрасиво — и правда бывает мимо, хотя обычно в рамках знакомого системного стиля. Но ведь можно не только отключить, можно переназначить! Сделать другой outline, заменить его на border, box-shadow или даже фоновый цвет элемента. Главное, чтобы он недвусмысленно говорил: я сейчас в фокусе.

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

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники