SSL - Единый стандарт для ссылок

Определения

Стандарт SSL определяет требования к семантике, доступности и логике работы ссылок.

Структура и Семантика

Элемент ссылки и навигация

• Для перехода к другому адресу используется <a href="/destination">. Для действия, которое не выполняет навигацию, используется <button>.
• Не следует заменять ссылку элементом <div> или <span> с обработчиком клика: теряются нативная семантика ссылки, стандартная клавиатурная навигация и браузерные действия, например открытие адреса в новой вкладке или копирование ссылки.

Назначение и текст ссылки

• Назначение ссылки должно определяться по её тексту или по тексту вместе с программно связанным контекстом. Формулировки вроде Подробнее или Нажмите здесь подходят только тогда, когда окружающий контекст однозначно указывает, куда ведёт ссылка.
• Текст ссылки должен описывать цель перехода. Атрибут title можно использовать как дополнительное пояснение, но не как замену понятному тексту ссылки: его доступность и отображение зависят от устройства и способа взаимодействия.
• Для ссылки, состоящей только из иконки или изображения, задаётся доступное имя: через текст ссылки, визуально скрытый текст или aria-label; для изображения также используется alt. aria-label нужен, когда видимой подписи нет, и не должен без необходимости заменять существующий текст ссылки. Декоративную иконку следует скрывать от скринридеров.

Адрес и структура URL

• Для внутренних переходов подходят относительные адреса, например /about. Для внешних ресурсов указывается полный URL; при наличии HTTPS предпочтителен протокол https://.

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

  <!-- Внутренняя ссылка -->
  <a href="/about">О компании</a>
  
  <!-- Внешняя ссылка -->
  <a href="https://example.com/pricing">Тарифы</a>

Фрагментные ссылки и допустимые адреса

• Для перехода к разделу страницы используется ссылка с идентификатором фрагмента, например href="#contacts". Значение должно совпадать с уникальным id целевого элемента.
• Пустой href, href="#" в роли заглушки и протокол javascript: не используются. Для действий без навигации предназначена кнопка.
• Адреса, полученные из CMS, пользовательского ввода или внешнего источника, необходимо проверять по разрешённым протоколам. Непроверенный адрес может привести к переходу на небезопасную схему.

Ссылки на файлы

• Текст ссылки или ближайший контекст должен указывать тип файла; размер файла указывается, если он влияет на решение о загрузке.

• Для файла, который должен загружаться, можно использовать атрибут download. Он работает для ресурсов того же origin и схем blob: и data:; заголовки ответа и настройки браузера могут повлиять на результат. Для внешнего ресурса загрузку нельзя гарантировать одним атрибутом.

  <a href="/files/guide.pdf" download>Руководство (PDF, 2 МБ)</a>

Доступность и Безопасность

Визуальное оформление и фокус

• Внутритекстовая ссылка должна отличаться от обычного текста не только цветом, например подчёркиванием или другим постоянным визуальным признаком. Одного эффекта при наведении недостаточно.
• Состояние клавиатурного фокуса должно оставаться заметным. Для его оформления подходит :focus-visible; удалять системный контур outline без равноценной замены не следует.

Пропуск повторяющихся блоков

• Для обхода повторяющихся блоков, например навигации, предусматривается механизм пропуска. Ссылка «К основному содержимому» — распространённый вариант: её фрагмент должен соответствовать существующему id основного блока; если ссылка скрыта в обычном состоянии, при получении фокуса она должна становиться хорошо заметной.

Состояние посещённой ссылки

• Псевдокласс :visited позволяет визуально отличать ссылки, адреса которых уже открывались в текущем браузере. Он применим и к внутренним, и к внешним ссылкам; браузерные ограничения связаны с защитой истории посещений, а не с типом адреса.
• Браузер ограничивает стилизацию и программное чтение состояния :visited из соображений конфиденциальности. Такое состояние необязательно и не должно быть единственным способом сообщить значимую информацию. Цвет не должен быть единственным визуальным признаком, отличающим ссылку от окружающего текста.

Открытие внешних ссылок

• Внешние ссылки обычно открываются в текущей вкладке. target="_blank" используется только при обоснованной необходимости и с предварительным обозначением открытия новой вкладки или окна.

• Для target="_blank" рекомендуется явно задавать rel="noopener". В современных браузерах _blank уже не предоставляет новой странице доступ к window.opener, однако явный атрибут фиксирует требование и поддерживает старые реализации.

• rel="noreferrer" дополнительно запрещает передачу заголовка Referer и подразумевает noopener. Его следует добавлять, когда сокрытие источника перехода является отдельным требованием конфиденциальности, а не автоматически для каждой внешней ссылки.

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

  <a href="https://partner.example" target="_blank" rel="noopener">
    Сайт партнёра
    <span aria-hidden="true">↗</span>
    <span class="sr-only">(откроется в новой вкладке)</span>
  </a>

sr-only — пример служебного класса для визуально скрытого текста; в проекте используется соответствующий класс дизайн-системы.

Атрибуты rel для поисковой квалификации

• sponsored используется для платных и спонсируемых ссылок, ugc — для ссылок в пользовательском контенте. nofollow указывается, когда требуется обозначить отсутствие одобрения ссылки или квалифицировать её для поисковых систем.
• Эти значения rel не заменяют noopener и не являются механизмами защиты от window.opener. Для обычных внешних ссылок не требуется автоматически добавлять nofollow.
• Для Google Search эти значения служат подсказками и не гарантируют, что URL не будет обнаружен или проиндексирован.

Ссылки на почту и телефон

Ссылки mailto:

• Для перехода к созданию письма используется схема mailto:.
• Несколько адресатов указываются через запятую без пробелов. Для дополнительных полей применяются параметры URI, например subject и body.
• Значения параметров кодируются для URI в UTF-8 с процентным кодированием. Перенос строки в теле письма представляется как %0D%0A. При генерации URI в JavaScript кодируется значение каждого параметра, а не вся ссылка целиком.
• В HTML-разметке символ &, разделяющий параметры, записывается как &. Ссылка вызывает почтовую программу, настроенную в системе; наличие и поведение такой программы сайтом не гарантируется.

Ссылки tel:

• Для перехода к вызову используется схема tel:. В href рекомендуется указывать нормализованный номер в международном формате: знак + и цифры без пробелов, скобок и дефисов.

• RFC 3966 допускает визуальные разделители в номере. В стандарте SSL для единообразия используется нормализованная запись без разделителей.

• В примерах телефонный номер заменён маской xxx-xxx-xxx. href с tel:[normalized-number] показан как шаблон: перед использованием вместо placeholder указывается реальный нормализованный номер. Видимая маска не является номером для вызова.

  <!-- Шаблон: заменить [normalized-number] реальным номером -->
  <a href="tel:[normalized-number]">xxx-xxx-xxx</a>

Проверка

• Назначение ссылки понятно по её тексту или доступному контексту.
• Ссылки доступны с клавиатуры, а фокус имеет заметное визуальное состояние.
• Состояние :visited не зависит от скриптов и не раскрывает историю браузера; цвет не является единственным признаком ссылки.
• Новая вкладка обозначается заранее; noopener применяется при использовании target="_blank".
• Фрагменты ведут к существующим элементам; ссылки на файлы доступны и сообщают формат, а ссылки с внешним или пользовательским URL проверены.
• URL использует согласованную каноническую форму, а mailto: и tel: содержат корректно сформированные адреса и номера.

Итоговые примеры

Внутренняя ссылка:

<a href="/about">О компании</a>

Ссылка на раздел страницы:

<a href="#contacts">Контакты</a>
<section id="contacts">...</section>

Ссылка для пропуска повторяющейся навигации:

<a class="skip-link" href="#main-content">К основному содержимому</a>
<main id="main-content">...</main>

Ссылка на файл для загрузки:

<a href="/files/guide.pdf" download>Руководство (PDF, 2 МБ)</a>

Внешняя ссылка в той же вкладке:

<a href="https://example.com">Сайт организации</a>

Внешняя ссылка в новой вкладке с доступным предупреждением:

<a href="https://partner.example" target="_blank" rel="noopener">
  Сайт партнёра
  <span aria-hidden="true">↗</span>
  <span class="sr-only">(откроется в новой вкладке)</span>
</a>

Письмо двум адресатам с темой и телом:

<a href="mailto:manager@example.com,ceo@example.com?subject=%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81%20%D0%BF%D0%BE%20%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D1%83%20XYZ&amp;body=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5!%0D%0A%0D%0A%D0%A3%20%D0%BC%D0%B5%D0%BD%D1%8F%20%D0%B2%D0%BE%D0%B7%D0%BD%D0%B8%D0%BA%20%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81.">
  Написать руководству
</a>

Ссылка для звонка (шаблон):

<!-- Шаблон: заменить [normalized-number] реальным номером -->
<a href="tel:[normalized-number]">xxx-xxx-xxx</a>