Коротко: сделать ссылку неактивной в CSS можно через pointer-events: none (клики игнорируются) в связке с классом-стилем opacity и cursor. Но для доступности и корректной семантики ссылку лучше не просто «сделать неактивной», а убрать href или добавить aria-disabled="true" и tabindex="-1".
Вкладки: способы отключить ссылку
.link.is-disabled {
pointer-events: none; /* клик не срабатывает */
opacity: .5;
cursor: default;
text-decoration: none;
}Быстро и наглядно. Но ссылка остаётся в разметке активной: по ней можно перейти с клавиатуры (Tab + Enter), и она видна скринридерам как обычная ссылка.
<span class="link is-disabled">Скоро</span>Самый честный способ: если перехода нет, это не ссылка, а текст. Так делают, когда пункт точно недоступен. Тогда ни клика, ни фокуса, ни ложных ожиданий.
<a class="link is-disabled"
aria-disabled="true"
tabindex="-1"
href="#">Скоро</a>Компромисс: ссылка остаётся в контенте, но исключена из навигации с клавиатуры (tabindex="-1"), а aria-disabled говорит вспомогательным технологиям, что она неактивна.
document.querySelectorAll('.link.is-disabled').forEach(function (el) {
el.addEventListener('click', function (e) { e.preventDefault(); });
});Если нужен контроль в логике (например, по условию), блокируйте переход в обработчике через preventDefault().
href="#" с preventDefault() либо вообще замените на кнопку или текст.Как показать, что ссылка недоступна
| Признак | CSS |
|---|---|
| Приглушённый цвет | opacity: .5 или серый цвет |
| Без подчёркивания | text-decoration: none |
| Обычный курсор | cursor: default |
| Без реакции на наведение | нет :hover-стилей |
Практика: правильная «неактивная» ссылка
- Добавьте ссылке класс
is-disabled. - Пропишите для класса стили (прозрачность, курсор, без подчёркивания).
- Добавьте
aria-disabled="true"иtabindex="-1". - Проверьте: Tab не должен останавливаться на ней.
- Если пункт точно недоступен — замените на текст.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Ссылка всё равно кликается | событие на родителе | проверить обработчики, preventDefault |
| Ссылка ловит фокус с клавиатуры | нет tabindex="-1" |
добавить атрибут |
| Переход в начало страницы | href="#" без отмены |
preventDefault или убрать href |
| Скринридер читает как активную | нет aria-disabled |
добавить атрибут |
Проверьте себя
pointer-events: none со ссылкой?
Вопросы и ответы
Любая ссылка с href попадает в порядок обхода Tab. Чтобы исключить её, добавьте tabindex="-1".
У кнопки есть атрибут disabled — он полностью отключает элемент и убирает его из обхода клавиатуры. Это правильнее, чем CSS-хаки.
Само по себе — нет. Но уберите «пустые» пункты из меню: поисковик не любит ссылки-заглушки, а пользователи теряются.
Да, если не убирали href: просто удалите класс и атрибуты aria-disabled/tabindex скриптом.
Итоги
- CSS-способ (
pointer-events: none) блокирует клик, но не фокус. - Для доступности —
aria-disabledиtabindex="-1". - Если перехода нет, надёжнее заменить ссылку на текст.
- Для кнопок используйте атрибут
disabled.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.