Отключение перехода по ссылке через Tab в HTML без JavaScript

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

Чтобы исключить ссылку из навигации по нажатию клавиши Tab, установите атрибуту tabindex значение -1 в теге <a>:

<a href="#" tabindex="-1">Клавиша Tab меня обойдет стороной 😢</a>

Таким образом, вы отмените фокусировку на элементе, и клавиша Tab пропустит данную ссылку.

При применении CSS вы сможете стилизовать ссылку таким образом, чтобы она выглядела как активный элемент интерфейса, но при этом не становилась доступной для переключения с помощью клавиши Tab:

.linkButNotTabbable {
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

<a class="linkButNotTabbable" tabindex="-1">Я выгляжу активно, но клавиша Tab меня проигнорирует 😎</a>

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

Вообразите каждый элемент <a> на вашей странице как остановку на гоночной трассе:

[🏎--🏁--🏁--🏁]

Чтобы проигнорировать остановку, примените tabindex="-1" к элементу <a>:

<a href="#ticketBooth" tabindex="-1">Не стоит здесь останавливаться 🚫</a>

Ваш гоночный болид пронесется мимо, продолжая движение без остановок:

[🏎--🏁--💨--🏁]

«Гоночный автомобиль» фокуса перепрыгнет данную ссылку, не оставив возможности пользователю с помощью клавиши Tab остановиться на ней.

Предотвращение переключения с помощью клавиши Tab с помощью CSS и улучшение доступности

Использование CSS для исключения из навигации

Вместо tabindex можно удалить атрибут href, чтобы предотвратить фокусировку:

<span role="link" onclick="location.href='#'">Вы действительно поверили, что я – настоящая ссылка? 🃏</span>

Здесь используется элемент span с ролью link, который имитирует поведение ссылки для инструментов улучшения доступности, сохраняя при этом правильную семантику. Обработчик onclick обеспечивает возможность клика по элементу.

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

Ситуации, когда ссылки не должны быть доступны для фокуса

Есть случаи, когда ссылки не должны быть доступны для фокусировки:

1. Навигационные элементы: Пользователям мыши эти элементы для навигации табом не требуются.
2. Дублирующиеся ссылки: Это может быть оправдано, если различные элементы навигации ведут к одному и тому же ресурсу.
3. Элементы управления в пользовательском интерфейсе приложений: Они часто функционируют как кнопки, а не как стандартные гиперссылки.

Обеспечение соблюдения стандартов доступности

При работе с порядком табуляции следует учесть следующее:

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

Применение рекомендаций руководства W3C по использованию ролей ARIA и атрибута tabindex улучшит доступность ваших веб-страниц.

Обеспечение надежного пользовательского опыта

Управление видимостью фокуса

Если вам необходим контроль над видимостью фокуса, рассмотрите возможность использования:

.nowYouSeeMeNowYouDont:focus {
    outline: none;
    /* Я исчезаю, как ниндзя 🥷 */
}

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

Взаимосвязь Tabindex и скриптов

JavaScript может динамически изменять tabindex, обеспечивая возможности для развитых пользовательских взаимодействий:

document.querySelectorAll('.tabstopOptional').forEach(el => {
    el.setAttribute('tabindex', '-1');
    /* Исключены из царства клавиши Tab! 👑 */
});

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

Соблюдение стандартов

Когда вам требуется решение, всегда следуйте нормам W3C. Регулярные консультации со справочными источниками помогут вам принимать актуальные и соответствующие стандартам решения.

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

1. <a>: Элемент якоря – HTML: HyperText Markup Language | MDN — Обстоятельное руководство по использованию элементов <a>, описующее их функции в HTML.
2. HTML Standard — Основной справочник, определяющий поведение якорных элементов в спецификации HTML.
3. css – Включить :focus только при использовании клавиатуры (или нажатии клавиши Tab) – Stack Overflow — Обсуждение на Stack Overflow, связанное с управлением фокусировкой для пользователей, работающих с клавиатурой.
4. Удаление пунктирной обводки | CSS-Tricks — Инструкция по стилизации и удалению обводок фокуса для улучшения визуального оформления.
5. WebAIM: Ссылки для пропуска навигации — Рекомендации по обеспечению доступности навигации для пользователей экранных чтецов и клавиатурных навигаторов.
6. Руководство по авторским практикам ARIA | APG | WAI | W3C — Руководство W3C по применению ARIA для улучшения навигации с использованием клавиатуры.
7. Понимание критерия успешности 2.4.3: Порядок фокуса | WAI | W3C — Обзор требований WCAG касательно порядка фокуса и логической структуры содержимого.