Управление клавиатурой

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

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

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

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

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

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

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

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

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

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

Правильно

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

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

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

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

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

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

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

После того как элемент активирован, фокус или активную область внутри него можно перемещать клавишей Tab или стрелками ↓ ↑. Правила работы с клавиатурой для каждого типа компонента описаны в WAI-ARIA Authoring Practices.

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

• В группе радиокнопок фокус перемещается стрелками ↑ ↓ ← →. Радиокнопка выбирается сразу, как только получает фокус. Перемещение зацикливается: с последней радиокнопки фокус перейдёт на первую. Клавиша Tab выводит фокус из группы — к следующему элементу интерфейса.
• В списке чекбоксов фокус перемещается клавишей Tab, а состояние чекбокса меняется только клавишей Space. Стрелки между чекбоксами фокус не переключают.

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

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

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

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

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

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

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

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

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

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

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

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