Интерфейс полностью управляется с клавиатуры: мышь нигде не обязательна. Документ описывает, что делают клавиши в каждом элементе.
Общие правила
Их достаточно, чтобы пользоваться интерфейсом, не заглядывая в разделы ниже.
Tab и Shift+Tab переходят между элементами. Один элемент — одна остановка, даже если внутри него несколько кнопок. Группа переключателей, список, календарь проходятся одним Tab, а не десятью.
Стрелки ходят внутри элемента. Как только Tab привёл вас в группу, дальше работают стрелки: по кнопкам группы, по пунктам списка, по дням календаря. Стрелки упираются в край и не перескакивают на другой конец — так видно, что группа кончилась и дальше нужен Tab. Home и End прыгают на первый и последний пункт.
Подсветка появляется только при работе с клавиатуры. Когда вы нажимаете Tab или стрелку, элемент под фокусом обводится рамкой. При клике мышью рамки нет — она бы мешала и ничего не сообщала. Если вы кликнули, а потом нажали стрелку, рамка появится снова. Исключение — поля ввода: у них рамка видна всегда, чтобы было понятно, куда попадёт набранный текст.
Пробел и Enter выполняют действие, но не всегда оба:
| элемент | Пробел | Enter | |
|---|---|---|---|
кнопка, пункт меню |
выполняет |
выполняет |
|
флажок, тумблер |
переключает |
уходит в форму (отправляет её) |
|
переключатель из набора |
подтверждает выбранный |
уходит в форму |
|
ссылка |
прокручивает страницу |
переходит по ссылке |
Escape закрывает — меню, список, календарь, диалог. Фокус возвращается на тот элемент, с которого вы открывали.
Элементы по отдельности
Флажок и тумблер
Tab — до элемента, Пробел — переключить. Enter здесь намеренно не работает: внутри формы он отправляет форму, и перехватывать его нельзя.
Переключатель из набора (radio, сегментированный переключатель)
Вся группа — одна остановка Tab, фокус попадает на выбранный пункт.
Дальше стрелки сразу меняют выбор — отдельно подтверждать не нужно: переместиться и выбрать здесь одно и то же действие. Пробел подтверждает текущий пункт.
В отличие от остальных групп, стрелки здесь идут по кругу: с последнего пункта переходят на первый. Так устроены переключатели в браузере, и менять это было бы неожиданно.
Группа кнопок (toggle-group)
Одна остановка Tab, дальше стрелки. Что делают стрелки, зависит от того, сколько кнопок можно включить одновременно:
-
можно выбрать только одну — стрелка сразу переносит выбор, как у переключателя;
-
можно включить несколько — стрелка только переводит фокус, включает и выключает Пробел.
Рамка идёт по конкретной кнопке, а не вокруг всей группы, — видно, на чём вы стоите. Отключённые кнопки стрелками пропускаются.
Меню, выпадающий список, навигационное меню
Одинаково у всех трёх:
-
Стрелка вниз, Enter или Пробел на закрытом элементе — раскрыть. Фокус сразу переходит на первый пункт, отдельно заходить внутрь не нужно.
-
Стрелки вверх/вниз — по пунктам, Home и End — на первый и последний.
-
Enter — выбрать пункт.
-
Escape — закрыть; фокус возвращается на кнопку, которая открывала.
В выпадающем списке работает набор по первым буквам: наберите начало названия, и фокус перейдёт на подходящий пункт.
Очистить выбранное в списке — Delete или Backspace, когда список закрыт и фокус на нём. Это то же самое, что крестик справа, только с клавиатуры.
Поле с подсказками (combobox)
Обычное текстовое поле: набирайте, список фильтруется сам. Стрелки вверх/вниз — по подсказкам, Enter — выбрать, Escape — закрыть список. Чтобы очистить выбранное, сотрите текст.
Календарь
Enter на кнопке календаря — открыть. Дальше стрелка вниз заводит в сетку дней, и:
-
стрелки — по дням во все стороны, неделя вверх и вниз;
-
Page Down и Page Up — следующий и предыдущий месяц;
-
Home и End — начало и конец недели;
-
Enter — выбрать дату;
-
Escape — закрыть.
Дату можно и просто набрать в поле, не открывая календарь.
Дерево
Одна остановка Tab, дальше:
-
стрелки вверх/вниз — по строкам, включая раскрытые вложенные;
-
стрелка вправо — раскрыть папку;
-
стрелка влево — свернуть папку, а на вложенной строке — перейти к родительской;
-
Home и End — первая и последняя строка;
-
Enter — выбрать строку.
Текущая строка подсвечивается фоном, а не рамкой: строка широкая, и рамка вокруг неё читалась бы как таблица.
Таблица (Grid)
Клик по заголовку сортируемой колонки переключает сортировку по кругу: возрастание → убывание → без сортировки. Shift + клик по другому заголовку добавляет его к сортировке, не сбрасывая уже выбранные колонки (до трёх одновременно) — рядом со стрелкой направления появляется номер, показывающий очерёдность. Несортируемые колонки не реагируют на клик и курсор над ними остаётся обычным.
Разделитель панелей (splitter)
Tab — до разделителя, дальше:
-
стрелки — двигать границу на шаг; Shift + стрелка — крупным шагом;
-
Home и End — свернуть панель до минимума и растянуть до максимума;
-
Enter — свернуть или вернуть панель;
-
F6 — перейти к следующему разделителю, если их несколько.
Диалог
Пока диалог открыт, Tab ходит только внутри него: дойдя до последнего элемента, он возвращается на первый, и случайно уйти на страницу под диалогом нельзя. Escape закрывает, фокус возвращается на кнопку, которая открывала диалог.
Если что-то не работает
Tab не доходит до элемента. Скорее всего он заблокирован — такие элементы намеренно пропускаются. Причину блокировки обычно видно рядом или в подсказке.
Стрелки ничего не делают. Проверьте, что вы уже внутри элемента: стрелки работают после того, как Tab привёл фокус в группу. Если фокус стоит между элементами, сначала нажмите Tab.
Не видно, где фокус. Подсветка появляется только после нажатия клавиши. Нажмите Tab или стрелку — рамка появится на текущем элементе.
В Safari на macOS Tab пропускает кнопки. Это системная настройка, а не особенность интерфейса: включите «Программы» → «Safari» → «Дополнения» → «Нажатие Tab выделяет каждый объект на веб-странице».