Веб-страница: запуск звонка по клику на ссылке или картинке
Быстрый ответ
Для реализации кликабельной ссылки, инициирующей звонок, используйте протокол tel:
внутри тега <a>
. Оформите телефонный номер в международном формате, начав его с символа +
и кода страны. При нажатии на ссылку с мобильного устройства произойдет немедленный набор номера.
Пример кода:
<a href="tel:+1234567890">Позвонить сейчас</a>
Этот метод прост, эффективен и обеспечивает поддержку всех мобильных браузеров.
Реализация ссылок на протокол tel:
для разнообразных устройств
Отображение исключительно на мобильных устройствах
Для того чтобы ссылки на протокол tel:
оставались видимыми только при доступе с мобильных устройств, используйте такое CSS-правило:
@media only screen and (max-width: 600px) {
.desktop-tel-link { display: none; }
}
Класс .desktop-tel-link
присвойте ссылкам на протокол tel:
, которые не предназначены для отображения на настольных компьютерах.
Поддержка на настольных платформах
В настольных браузерах ссылки на протокол tel:
могут быть не так распросранены, однако некоторые из них поддерживают интеграцию с VoIP-приложениями:
<span class="desktop-tel-link">телефон: +1234567890</span>
Форматирование международных и местных номеров
Более всего удобным и доступным форматом номера является международный. Для местных пользователей вы можете воспользоваться следующей конструкцией:
<a href="tel:123456789;phone-context=+123456">Позвонить в наш местный офис</a>
Улучшение взаимодействия пользователя с ссылками на протокол tel:
Обеспечение визуальных подсказок
Интегрируйте ссылки на протокол tel:
в элементы управления, такие как кнопки или иконки. Это поможет сделать интерфейс понятным и привлекательным:
<button>
<a href="tel:+1234567890">Связаться с нами</a>
</button>
Автоматическое определение на устройствах iOS
Браузер Safari на устройствах Apple обладает способностью обнаруживать телефонные номера автоматически, но использование префикса tel:
обеспечивает единообразие.
Обеспечение доступности
Проверяйте совместимость ссылок с вспомогательными технологиями. Убедитесь в доступности ссылок для навигации с использованием клавиатуры и голосовых команд, добавив соответствующие атрибуты alt
.
Креативное использование ссылок на протокол tel:
Использование изображений в роли кнопок звонка
Вы можете использовать изображения в качестве интерактивных кнопок звонка для улучшения пользовательского опыта:
<a href="tel:1234567890"><img src="icon.jpg" alt="Позвонить нам"/></a>
Стилизация ссылок для звонков
Стилизуйте ссылки на протокол tel:
, чтобы они составляли гармоничный комплекс с общим стилем вашего сайта или выделялись на его фоне:
a[href^="tel:"] {
color: green;
text-decoration: none;
}
Практические соображения и современные подходы
Отношение к безопасности и конфиденциальности
Отфильтровывайте использование телефонных номеров для исключения возможности инъекций и гарантирования конфиденциальности данных, если отслеживание звонков не является необходимым.
Комфортность использования – главный критерий
Размещайте ссылки на протокол tel:
в местах, где их можно легко найти и где они будут наиболее уместны: например, в подвале сайта или на странице контактов.
Тестирование – ключ к успеху
Перед внедрением ссылок внедряйте проверку их работы на разных устройствах и в различных браузерах.
Почему следует выбирать tel:
, а не callto:
?
Протокол tel:
является стандартным и широко поддерживаемым способом инициирования звонков через ссылки. callto:
более специфичен и связан с использованием Skype, что делает его менее универсальным.
Полезные материалы
<a>: Элемент якорь – HTML: язык разметки гипертекста | MDN
— подробная информация об использовании якорных тегов.HTML-тег a
— пошаговое описание процесса создания гиперссылок.Современное состояние телефонных ссылок | CSS-Tricks
— сборник лучших практик и подходов к реализации телефонных ссылок.Стандарт URL
— техническая спецификация URL-схем, ключевая для работы с различными типами ссылок, включаяtel:
.Техники HTML для Правил Доступности Веб-Содержимого 1.0
— руководство по доступности, в том числе по формированию телефонных ссылок.Исчерпывающее руководство по дизайну мобильных приложений — Smashing Magazine
— обзор мобильной разработки, в том числе раскрытие вопроса взаимодействия пользователя с телефонными ссылками.