Веб-страница: запуск звонка по клику на ссылке или картинке

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

Для реализации кликабельной ссылки, инициирующей звонок, используйте протокол 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, что делает его менее универсальным.

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

1. <a>: Элемент якорь – HTML: язык разметки гипертекста | MDN — подробная информация об использовании якорных тегов.
2. HTML-тег a — пошаговое описание процесса создания гиперссылок.
3. Современное состояние телефонных ссылок | CSS-Tricks — сборник лучших практик и подходов к реализации телефонных ссылок.
4. Стандарт URL — техническая спецификация URL-схем, ключевая для работы с различными типами ссылок, включая tel:.
5. Техники HTML для Правил Доступности Веб-Содержимого 1.0 — руководство по доступности, в том числе по формированию телефонных ссылок.
6. Исчерпывающее руководство по дизайну мобильных приложений — Smashing Magazine — обзор мобильной разработки, в том числе раскрытие вопроса взаимодействия пользователя с телефонными ссылками.