Разметка телефонных номеров в 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>