HTML элементы, способные получать фокус: полный список

Быстрый ответ

Фокусируемые, или фокусабельные, элементы в HTML – это интерактивные компоненты, с которыми пользователь имеет возможность взаимодействовать. Список основных фокусабельных элементов включает:

• <a href="">: Гиперссылки.
• <button>: Кнопки на веб-странице.
• <input>: Поля для ввода данных, за исключением скрытых(type="hidden").
• <select>: Раскрывающиеся списки для выбора опции.
• <textarea>: Большие текстовые области для ввода данных.
• <iframe>: Встроенные фреймы, например видеоплееры.

Любой элемент может получить свойство фокусабельности при помощи атрибута tabindex="0". Примером служит <div tabindex="0">, на который теперь можно переключаться с помощью клавиши Tab. Пользуйтесь tabindex ответственно, поскольку он влияет на доступность контента.

Подробнее о фокусе: с использованием jQuery

Давайте углубимся в детали и рассмотрим некоторые примечательные случаи, также обсудим, как правильно управлять фокусом подобно профессионалу.

Нестандартные фокусабельные элементы

• <area> с атрибутом href используется в качестве активных областей в изображениях.
• Элементы с contentEditable="true" позволяют пользователям редактировать их содержимое.
• Еще элементы, которые сами по себе не предназначены для взаимодействия, могут стать фокусируемыми при помощи tabindex или contentEditable.

Подробнее об этом расскажет наш спикер на видео

Обеспечиваем видимость при фокусе

Переключение фокуса на элементы должно быть заметно:

/* Стандарт для веб-браузеров */
:focus-visible {
  outline: 2px solid blue;
}

Плюсы и минусы использования tabindex

• Положительное значение tabindex меняет порядок перехода между элементами, что может запутать пользователя.
• Отрицательное значение tabindex (например, tabindex="-1") делает элемент фокусируемым при использовании кода, но исключает его из порядка переключения клавишей Tab.
• Стилизовать фокусируемые элементы можно с помощью CSS:

/* В центре внимания */
[tabindex]:not([tabindex^="-"]):not([disabled]) {
  /* стили для фокусируемых элементов */
}

Активный фокус и расширенный уровень доступности

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

Зависимость от браузера

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

Проверка фокуса и улучшение доступности

• document.activeElement подскажет, какой элемент в текущий момент активен.
• Логичный порядок переключения и явное выделение элемента в фокусе улучшают доступность сайта.

Визуализация

Воспринимайте HTML элементы как персонажей в театральной постановке (🎭):

- 🎭 Персонажи НА СЦЕНЕ (Фокусируемые):
  – 👥 <input>, <button>, <select>, <textarea>
  – 🎩 <a href="...">, <area href="..."> (с указанным "href")
  – 🕴️ [tabindex]: Любой персонаж может стать заметнее благодаря `tabindex`

- 🎭 Персонажи ЗА КУЛИСАМИ (Не фокусируемые):
  – 🖼️ <img>: Реквизит, если нет [tabindex] или [usemap]
  – 🎬 <div>, <span>: Элементы сценария, пока не получат статус [tabindex]

Персонажи на сцене – доступны (фокусируются), те, что за кулисами, – ожидают свою очередь (не фокусируются).

Теория фокуса и его практическое применение

Управление фокусом в сложных веб-приложениях требует знания базовых принципов и практических навыков. Ниже приведены ключевые моменты, на которые стоит обратить внимание:

Использование JavaScript для контроля фокуса

• С помощью метода HTMLElement.focus() можно направить фокус на конкретный элемент.
• При обновлении содержимого страницы, учтите вопросы управления фокусом, чтобы пользователь не потерял активный элемент.

Мониторинг производительности

• Добавляя новые интерактивные элементы, убедитесь, что они могут получать фокус.
• MutationObserver отслеживает изменения DOM и помогает управлять фокусом в ответ на эти изменения.

Инструменты и стилизация фокусируемых элементов

• SASS или LESS могут помочь в стилизации элементов, которые получают фокус.
• Если вы заботитесь о пользователе, чей компьютер чувствителен к смещению, используйте @media (prefers-reduced-motion).

Полезные материалы

1. WHATWG HTML Standard for sequential focus navigation – Описание последовательности перехода по элементам с фокусом и значению tabindex.
2. WHATWG HTML Standard for focusable areas – Рекомендации для элементов, способных получить фокус.
3. WebAIM: Keyboard accessibility – Tabindex – Использование tabindex для обеспечения доступности навигации с помощью клавиатуры.
4. How to Meet WCAG (Quick Reference) – Принципы создания видимой навигации через фокусируемые элементы.
5. HTML5 Accessibility – Анализ поддержки HTML5 и элементов фокуса в различных браузерах.
6. CSS-Tricks: :focus – Детали стилизации псевдоклассов :focus и :active.
7. ARIA Guide to managing focus – Рекомендации по управлению фокусом в веб-приложениях с использованием ARIA.