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.