Отключение функционала ссылок через CSS: класс current-page

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

Если вам требуется деактивировать ссылку с использованием CSS, вызовите свойство pointer-events со значением none и установите специальную стилизацию, наглядно демонстрирующую ее недоступность:

.disabled-link {
  pointer-events: none; /* Отключим взаимодействие мыши */
  color: #808080; /* Установим серый цвет как индикатор недоступности */
  text-decoration: none; /* Уберем подчёркивание */
  cursor: default; /* Выберем стандартный курсор */
  opacity: 0.6; /* Добавим полупрозрачность для создания эффекта затухания */
}

Присвойте класс disabled-link нужной ссылке в вашем HTML-коде:

<a href="#" class="disabled-link" tabindex="-1">Я выгляжу как ссылка, но таковой не являюсь.</a>

Атрибут tabindex="-1" позволяет исключить ссылку из навигационной последовательности. Однако стоит учесть, что опытные пользователи могут обнаружить href через инструменты разработчика браузера.

Изучаем детали

CSS-эффекты при наведении

Для того чтобы явно намекнуть пользователю на то, что ссылка не работает, установите следующее поведение при наведении:

.disabled-link:hover,
.disabled-link:active,
.disabled-link:focus {
  color: #808080; /* Постоянный серый цвет */
  cursor: not-allowed; /* Курсор, сигнализирующий о запрете действия */
  text-decoration: none; /* Отсутствие подчёркивания */
}

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

Доступность для всех

Применение атрибута aria-current="page" помогает информировать скринридеры о текущем элементе. Тем не менее, стоит помнить, что доступность и CSS не всегда совместимы, особенно когда речь идет об отключении функциональности.

Вопросы совместимости

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

Интеграция с Bootstrap

Если вы используете Bootstrap, вы можете применить класс .disabled, который наследует стили неактивной ссылки от шаблона фреймворка:

a.disabled-link.btn.disabled {
  pointer-events: none; /* Общение с данной ссылкой сравнимо с разговором со стеной */
  /* Стандартные стили Bootstrap */
}

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

Представим активную ссылку в виде пути для поезда (🚂):

Обычный путь: 🚂➡️🔗 (Поезд движется, работа выполнена 💼💰)

С применением CSS, можно "перекрыть" этот путь:

a.disabled-link {
  pointer-events: none; /* Стоп-сигнал, движение прекращено 🚦 */
  color: gray; /* Ссылка становится менее привлекательной */
}

Перерезанный путь: 🚂🛑⛔ (Пришлось приостановить движение поезда, поставка не выполнена 📦🚫)

Здесь CSS действует как красный сигнал, который предупреждает пользователя остаться на месте, равно как и прекращает движение поезда (🚂).

Профессиональные рекомендации: переход к полному отключению

Гарантированное отключение

Свойство pointer-events: none визуально делает ссылку неактивной, но для полной блокировки стоит рассмотреть удаление атрибута href или применение JavaScript для более жесткого ограничения.

Семантичность

Семантически правильно организованные документы всегда структурированы и осмыслены. Не путайте роли и состояния элементов: они могут быть важны по-своему, но это разные вещи.

Учет пользовательских ожиданий

Интерфейс с отключенными через CSS ссылками может вначале сбивать пользователя с толку из-за отсутствия привычных реакций. Знание особенностей вашей целевой группы и приспособление дизайна под их ожидания поможет избежать путаницы.

Полное отключение

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