Множество разных пользователей полагаются на клавиатуру для навигации по приложениям — от пользователей с временными и постоянными нарушениями моторики до пользователей, которые используют сочетания клавиш для большей эффективности и продуктивности. Наличие хорошей стратегии навигации с помощью клавиатуры для вашего приложения повышает удобство работы для всех.
Фокус и порядок табуляции
В данный момент фокус относится к тому, какой элемент вашего приложения (например, поле, флажок, кнопка или ссылка) в данный момент получает ввод с клавиатуры. Помимо получения событий клавиатуры, элемент в фокусе также получает содержимое, вставленное из буфера обмена.
Чтобы переместить фокус на странице, используйте 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
Следующие шаги
Для пользователей, которые почти полностью управляют своим компьютером с помощью клавиатуры или другого устройства ввода, логический порядок табуляции необходим для обеспечения доступности и удобства использования вашего приложения. В качестве хорошей привычки для проверки порядка табуляции попробуйте пролистывать приложение перед каждой публикацией .