Клавиатура

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

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

Фокус

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

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

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

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

Перемещение фокуса

Пользователь переключает фокус между интерактивными элементами клавишей Tab.

  • Tab — переключает к следующему элементу
  • Shift + Tab — к предыдущему

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

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

Неправильно

Правильно

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

При клике в пустую часть страницы фокус снимается.

Активация элементов

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

Активировать любой элемент можно с помощью клавиш Enter или Space, а деактивировать с помощью Enter, Space или Esc.

Если нет фокуса на интерактивном элементе, то с помощью Space, Page Up и Page Down скроллится страница.

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

Раскрывающийся список, ссылка, тогл и любая кнопка не активируются или не раскрываются по фокусу, они активируются клавишей Enter. Это помогает пользователю не сделать ошибку, например отправить форму, и оставляет работу с кнопками консистентной.

Ctrl / Cmd + Enter — открывает ссылку в новом окне.

Управление элементом

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

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

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

Управление внутри текстового поля

Когда фокус у поля с текстом, некоторые клавиши работают иначе.

  • Space — ввод пробела
  • Enter в многострочном поле — переход на новый абзац

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

— перемещение между буквами и строками.

Модальность

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

Закрыть модальное окно можно клавишей Esc, а также переместив фокус на крестик в правом верхнем углу, кнопку отмены в терминальной плашке и нажав Enter.

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

Отправка формы

Обычно отправка формы происходит по нажатию Enter, но в Контуре мы делаем исключение, чтобы пользователю сложнее было совершить ошибку, отправив форму случайно. Форму можно отправить, только нажав на кнопку отправки.

Стартовый фокус

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

«Контур Фокус» — стартовый фокус должен стоять на поле поиска

Клавиатурные сочетания

Не переназначайте уже знакомые пользователю действия и сочетание клавиш. Сочетание клавиш Ctrl + F — поиск на странице — очевидное и уже привычное действие по переключению, поэтому нельзя его переназначать.

Контролы и компоненты

Подробное описание и возможные исключения при взаимодействии контролов с клавиатурой читайте в разделе «Фокус и работа с клавиатурой» у каждого компонента.