Разметка телефонных номеров в HTML: VoIP, tel: и callto:

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

Для создания на вашем сайте кликабельного номера телефона, используйте тег <a> с атрибутом href, в котором указан протокол tel::

<a href="tel:+1234567890">Звоните: +1 (234) 567-890</a>

В href указывается номер в международном формате E.164 (+1234567890). Текст ссылки может быть оформлен для удобства чтения. Для улучшения доступности рекомендуется использование атрибута aria-label. Он упрощает взаимодействие с экранными считывателями:

<a href="tel:+1234567890" aria-label="Звоните на плюс один два три четыре пять шесть семь восемь девять ноль">+1 (234) 567-890</a>

Поздравляю, вы создали доступную и управляемую ссылку для звонков!

Совместимость с различными устройствами

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

Избегайте использования устаревших протоколов

Ранее для создания активных телефонных номеров использовали метод callto:, который теперь устарел. Для обеспечения лучшего пользовательского опыта используйте протокол tel:, поддерживаемый современными VoIP-приложениями, такими как Skype и Microsoft Teams, а также браузерами вроде Chrome.

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

Экстренные номера: требуют особого поднимания

Следует учесть, что ссылки типа tel: подходят для обычных звонков, но для вызова экстренных служб они могут оказаться неудачным решением. Важно размещать отказ от ответственности или давать дополнительные инструкции для звонков в службы спасения, например 911 или 112.

Альтернативы для пользователей ПК

Простая функция JavaScript может заменить протокол tel: на callto: для версий сайта на компьютерах, улучшая таким образом совместимость и соответствие стандартам.

// Определение типа устройства: мобильное или десктоп?
if (isDesktopBrowser()) {
  // Заменяем 'tel:' на 'callto:' для ПК
  document.querySelectorAll('a[href^="tel:"]').forEach(function(link) {
    link.href = link.href.replace('tel:', 'callto:');
    link.title = "Протокол обновлён!"; // 😆
  });
}

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

Каждый протокол выполняет свою роль в контексте HTML-ссылок.

            📞           
       /        |        \     
HTML   🖂       🌐       ✉️     
 /             |             \   
tel:    href    mailto:

• tel: — это ваш директ к телефону.
• href — это ваш навигатор по Интернету.
• mailto: — это что-то вроде цифрового почтальона. (Вспомнились слова о волшебнике.)

Не забывайте о важности создания ответственных ссылок! 🖂 ↔️ 📱

Реальные сценарии

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

Настройка пользовательского опыта зависит от того, какую информацию вы имеете об используемом устройстве или браузере. В блоге GoatCounter есть полезная статья о использовании JavaScript для определения мобильных браузеров и адаптации поведения tel: ссылок.

Особенности кросс-браузерной поддержки

Поддержка URI tel: варьируется в зависимости от браузера. Если Chrome и Safari поддерживают его полностью, то Firefox и Internet Explorer могут работать иначе ожидаемого. Будьте готовы к таким ситуациям и имейте план Б.

Изменения в поддержке приложений

Было время, когда Skype использовал только callto:. Однако современные реальности и предпочтения пользователей изменили поддержку в пользу tel:. Отслеживать тренды в сфере VoIP приложений поможет избежать неожиданных сюрпризов.

Научите пользователей рыбачить

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

<p>Замечены проблемы со ссылкой? Проверьте, поддерживает ли ваше устройство вызовы, или посетите наш [Центр Помощи], где вам... эмм, помогут!🐠</p>

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