Многие пользователи используют клавиатуру для навигации по приложениям — от пользователей с временными и постоянными двигательными нарушениями до пользователей, которые используют сочетания клавиш для большей эффективности и продуктивности. Наличие хорошей стратегии навигации по клавиатуре для вашего приложения создает лучший опыт для всех.
Фокус и порядок табуляции
В определенный момент фокус относится к тому, какой элемент в вашем приложении (например, поле, флажок, кнопка или ссылка) в данный момент получает ввод с клавиатуры. Помимо получения событий клавиатуры, сфокусированный элемент также получает содержимое, вставленное из буфера обмена.
Чтобы переместить фокус на странице, используйте TAB для перемещения «вперед» и SHIFT + TAB для перемещения «назад». Текущий сфокусированный элемент часто обозначается кольцом фокуса , и различные браузеры оформляют кольца фокуса по-разному. Порядок, в котором фокус перемещается вперед и назад по интерактивным элементам, называется порядком табуляции .
Интерактивные элементы HTML, такие как текстовые поля, кнопки и списки выбора , неявно фокусируются : они автоматически вставляются в порядок табуляции на основе их положения в DOM . Эти интерактивные элементы также имеют встроенную обработку событий клавиатуры. Такие элементы, как абзацы и div, неявно фокусируются, поскольку пользователям обычно не нужно взаимодействовать с ними.
Реализация логического порядка табуляции является важной частью предоставления вашим пользователям плавного опыта навигации с помощью клавиатуры. При оценке и корректировке порядка табуляции следует учитывать две основные идеи:
- Расположите элементы в DOM в логическом порядке
- Правильно настройте видимость закадрового контента, который не должен получать фокус
Расположите элементы в DOM в логическом порядке
Чтобы проверить, логичен ли порядок вкладок вашего приложения, попробуйте пролистывать страницу. В общем, фокус должен следовать порядку чтения, перемещаясь слева направо, сверху вниз вашей страницы.
Если порядок фокуса кажется неправильным, следует переставить элементы в DOM, чтобы сделать порядок вкладок более естественным. Если вы хотите, чтобы что-то появилось визуально раньше на экране, переместите его раньше в DOM .
Попробуйте переходить по двум наборам кнопок ниже, чтобы сравнить логичный порядок табуляции с нелогичным:
Логический порядок табуляции
Нелогичный порядок табуляции
Ниже приведено сравнение кода этих двух примеров:
Логический порядок табуляции
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Нелогичный порядок табуляции
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Будьте осторожны при изменении визуального положения элементов с помощью CSS, чтобы избежать создания нелогичного порядка табуляции. Чтобы исправить нелогичный порядок табуляции выше, переместите плавающую кнопку «Киви» так, чтобы она находилась после кнопки «Кокос» в DOM, и удалите встроенный стиль.
Правильно настройте видимость закадрового контента
Иногда интерактивные элементы за пределами экрана должны быть в DOM, но не в порядке вкладок. Например, если у вас есть адаптивная боковая навигация, которая открывается при нажатии кнопки, пользователь не должен иметь возможности сфокусироваться на боковой навигации, когда она закрыта.
Чтобы предотвратить получение фокуса определенным интерактивным элементом, необходимо присвоить элементу одно из следующих свойств CSS:
-
display: none -
visibility: hidden
Чтобы добавить элемент обратно в порядок вкладок, например, при открытии боковой панели навигации, замените указанные выше свойства CSS на:
-
display: block -
visibility: visible
Следующие шаги
Для пользователей, которые работают на компьютере почти исключительно с помощью клавиатуры или другого устройства ввода, логичный порядок табуляции имеет важное значение для того, чтобы сделать ваше приложение доступным и удобным в использовании. В качестве хорошей привычки для проверки порядка табуляции попробуйте переходить по приложению перед каждой публикацией .