Перейти к содержимому
Яша.dev — Учим код

15. Keyboard Navigation

HTML: Скелет. Урок 4: Keyboard Navigation

Заголовок раздела «HTML: Скелет. Урок 4: Keyboard Navigation»

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

Что такое Keyboard Navigation?

Заголовок раздела «Что такое Keyboard Navigation?»

Keyboard Navigation (навигация с клавиатуры) — это возможность перемещаться и взаимодействовать с элементами веб-страницы, используя только клавиатуру. Обычно для этого используются клавиши Tab, Shift+Tab, Enter, Space, и стрелки. Основная цель - обеспечить доступность для всех пользователей.

Как это работает в HTML?

Заголовок раздела «Как это работает в HTML?»

По умолчанию, некоторые элементы HTML, такие как ссылки (<a>) и кнопки (<button>), поддерживают навигацию с помощью клавиши Tab. Браузер автоматически выделяет эти элементы, позволяя пользователю с ними взаимодействовать.

<a href="#">Ссылка 1</a>
<button>Кнопка 1</button>
<a href="#">Ссылка 2</a>

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

Атрибут tabindex

Заголовок раздела «Атрибут tabindex»

Атрибут tabindex позволяет контролировать порядок табуляции и включать элементы, которые по умолчанию не поддерживают навигацию с клавиатуры.

  • tabindex="0": Элемент становится доступным для табуляции в естественном порядке DOM. Это хороший способ добавить поддержку табуляции к элементам, которые изначально ее не имеют.
  • tabindex="1" (и выше): Определяет явный порядок табуляции. Не рекомендуется использовать значения больше 0, так как это может запутать пользователей и сделать навигацию непредсказуемой.
  • tabindex="-1": Элемент не доступен для табуляции, но может быть сфокусирован с помощью JavaScript.
<div tabindex="0">Этот div теперь доступен для табуляции</div>
<p tabindex="-1">Этот параграф не доступен для табуляции, но может быть сфокусирован JS</p>

Практический пример

Заголовок раздела «Практический пример»

Давайте создадим простой список, в котором все элементы будут доступны для табуляции:

<!DOCTYPE html>
<html>
<head>
  <title>Keyboard Navigation Example</title>
</head>
<body>


  <ol>
    <li tabindex="0">Пункт 1</li>
    <li tabindex="0">Пункт 2</li>
    <li tabindex="0">Пункт 3</li>
  </ol>


  <button onclick="alert('Кнопка нажата!')">Нажми меня</button>


</body>
</html>

В этом примере, каждый элемент списка <li> имеет tabindex="0", что позволяет пользователю перемещаться между ними с помощью клавиши Tab. Кнопка также доступна для навигации по умолчанию.

Жизненный пример

Заголовок раздела «Жизненный пример»

Многие современные веб-сайты и фреймворки активно используют tabindex и другие методы для улучшения доступности. Например:

  • React UI libraries (Material-UI, Ant Design): Компоненты часто используют tabindex для обеспечения правильной навигации по сложным интерфейсам.
  • Accessibility overlays: Существуют инструменты, которые автоматически добавляют и настраивают tabindex на веб-сайтах для улучшения доступности.
  • ARIA attributes: В сочетании с tabindex, ARIA (Accessible Rich Internet Applications) атрибуты предоставляют дополнительную информацию для скринридеров, делая веб-сайты более доступными для людей с ограниченными возможностями.

Ключевые моменты

Заголовок раздела «Ключевые моменты»
  • Keyboard Navigation – важная часть доступности веб-сайта.
  • Используйте клавишу Tab для навигации между интерактивными элементами.
  • Атрибут tabindex позволяет контролировать порядок табуляции.
  • tabindex="0" делает элемент доступным для табуляции в естественном порядке.
  • Избегайте использования tabindex со значениями больше 0.
  • Комбинируйте tabindex с ARIA атрибутами для максимальной доступности.

Интерактивный пример

Заголовок раздела «Интерактивный пример»