Блог Perkova&Perkova

Ссылки с понятным текстом: почему «подробнее» мешает навигации

Несколько одинаковых ссылок «Подробнее» на странице заставляют читателя каждый раз восстанавливать контекст. Это особенно неудобно, если человек просматривает список ссылок с помощью вспомогательной технологии. Название должно объяснять, что откроется после перехода.

Заменяйте неопределённое действие результатом

В учебном примере на странице курса стоят три ссылки: «Подробнее», «Подробнее», «Подробнее». Они ведут к программе, требованиям и работам учеников. Замените подписи на «Программа курса», «Что потребуется для занятий», «Примеры учебных работ». Теперь назначение видно без чтения соседней карточки.

Название не обязано повторять весь заголовок целевой страницы. Достаточно сохранить её задачу. Если ссылка ведёт к PDF, полезно сообщить формат: «Скачать программу курса — PDF». Если открывается форма, «Обсудить создание сайта» точнее, чем обещание немедленного готового расчёта, которого форма не предоставляет.

Отредактируйте ссылку в Tilda

  1. Откройте страницу и найдите повторяющиеся неопределённые подписи в меню, карточках и тексте.
  2. Для пункта меню измените название в «Контенте», сохранив правильную публичную ссылку.
  3. Для обычной кнопки измените текст её подписи и проверьте поле ссылки. В Zero Block это отдельные настройки выбранной кнопки.
  4. В тексте выделите содержательную фразу и назначьте ей ссылку вместо одинокого слова «здесь».
  5. Опубликуйте страницу и проверьте, что длинная новая подпись не обрезается и соответствует назначению.

Если карточка целиком кликабельна, проверьте её реальную область действия. Не размещайте внутри неё противоречащие переходы, если выбранный блок не поддерживает такую структуру. Например, нажатие на название не должно вести к одному материалу, а почти соседнее пустое место — к другому.

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

Не вставляйте ключевые запросы ради повторения. «Создание сайтов Москва недорого заказать сайт» плохо объясняет переход и не заменяет содержательное предложение. Подпись выбирают по реальному содержанию: «Обсудить сайт компании» или «Посмотреть проекты интернет-магазинов».

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

Проверьте список вне контекста

Выпишите все подписи страницы отдельно. Для каждой попробуйте назвать ожидаемый результат. Затем откройте ссылки и сравните ожидание с фактической страницей. Повторяющиеся «Документы» замените на конкретные названия, если они ведут к разным документам.

На телефоне проверьте переносы и расстояния между текстовыми ссылками. С клавиатуры последовательно пройдите переходы: видимый фокус позволяет понять текущую цель. Проверка в скринридере полезна для важных маршрутов и собственных нестандартных блоков.

Принципы семантических ссылок описаны в руководстве MDN по доступному HTML. Настройку адресов дополняет инструкция про внутренние URL, а выбор дальнейшего чтения — материал про связанные статьи. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.

Практика Tilda