Как сделать элемент HTML недоступным для фокуса: <a> tag

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

Если вам необходимо исключить HTML-элемент из последовательности перехода по клавишам, используйте атрибут tabindex="-1". Элементы форм могут быть сделаны недоступными для фокусировки с помощью атрибута disabled.

Пример:

<span tabindex="-1">Я не доступен для перехода по клавише Tab.</span>
<input type="text" disabled>

Регулировка фокусировки и почему это важно

Настройка фокусировки – ключевой аспект доступности веб-контента. tabindex="-1" эффективно исключает элементы из навигации клавиатурой, однако в некоторых случаях, особенно для форм и интерактивных компонентов, потребуется настроенный подход.

• Неинтерактивные элементы: Для того чтобы элемент был видим, но не участвовал в навигации клавиатурой, используйте атрибут readonly.
• JavaScript для управления фокусом: Вы могут использовать скрипты для динамического управления tabindex в ответ на действия пользователя или изменения состояния приложения.

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

Представьте навигацию по Tab как процессию HTML-элементов. Значение tabindex="-1" позволяет элементу отступить в сторону этой процессии.

👀🎭👤🎭👤
(Теперь замкнутый элемент 👤 укрывается от взглядов 👀, став похожим на ниндзя)
После использования `tabindex="-1"`:
👀🎭🎭👤🎭

Управление фокусировкой интерактивных элементов

Интерактивные элементы, такие как <a> и <button>, могут быть сделаны недоступными для клавиатурного фокусирования.

• Элементы <a> и <button>: Примените tabindex="-1", чтобы исключить их из очереди переходов Tab, сохраняя возможность фокуса посредством программных методов.
• Управление динамическим контентом: Изменяя tabindex с помощью JavaScript, вы сможете контролировать фокусировку динамически появляющихся элементов.
• Обработка событий: Отслеживание события focusin и применение e.target.blur() помогают убедиться, что элементы не будут получать фокус.

Доступность для разработанных виджетов и элементов управления

Создание доступных пользовательских компонентов требует специального подхода:

• Экранные читалки: Для гарантирования корректной работы с читалками и вспомогательными технологиями, управление tabindex должно быть осмотрительным. Не забудьте, что отрицательный tabindex позволяет фокусировку при использовании читалок.
• Программное управление фокусом: Используйте JavaScript-методы element.focus() и element.blur() для сложных взаимодействий.
• Исключение «ловушек фокуса»: В событиях фокусировки используйте event.relatedTarget для корректировки нового объекта фокуса и предотвращения создания «ловушек фокуса».

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

1. tabindex – HTML: HyperText Markup Language | MDN — Подробная информация об использовании атрибута tabindex.
2. HTML Standard — Официальная спецификация атрибута tabindex в HTML.
3. Understanding Success Criterion 2.1.2 | Understanding WCAG 2.0 — Разъяснение стандартов доступности для клавиатурной навигации.
4. WebAIM: Keyboard Accessibility — Методические указания по созданию сайтов с доступностью для клавиатурного управления.
5. ARIA Authoring Practices Guide | APG | WAI | W3C — Список лучших практик для управления фокусом в веб-приложениях.
6. Newest 'html+focusable' Questions – Stack Overflow — Обсуждения участников сообщества о создании элементов, недоступных для фокусировки.
7. Introduction to Focus | Articles | web.dev — Статья о особенностях реализации фокусировки при веб-разработке.