Кликабельный телефон в Тильде: что в href и как назвать иконку

Задача звучит как одна настройка: сделать номер телефона кликабельным, чтобы посетитель нажал на него с мобильного и попал в звонилку. Настройки с таким названием в Тильде нет — есть поле ссылки, и всё решает то, что в него написано. Разберём, что именно попадает из этого поля в готовую страницу: ниже — разметка четырёх телефонных ссылок, снятая с живого сайта, и замер того, как её читает браузер.

Короткий ответ

Номер телефона становится кликабельным тогда, когда он ссылка, а в поле адреса написано tel: и сам номер без пробелов: tel:+79277704433. Красивая запись — «+7 927 770-44-33» — живёт в тексте ссылки и на звонок не влияет. Иконке с трубкой обязательно нужно описание: без него скринридер и клавиатура получают безымянный элемент.

Что попадает в href: двадцать одна ссылка с живого сайта

Первое, что стоит знать про поле ссылки: Тильда не проверяет и не исправляет то, что в него написали. Доказательство лежит на одной и той же странице.

Двадцать одна телефонная ссылка на двух страницах — и все двадцать одна с пробелом после двоеточия, ни одной без. А почтовая ссылка, набранная в том же блоке и с тем же оформлением (style="color: inherit"), пробела не имеет. Объяснить это поведением Тильды нельзя: она обрабатывала оба поля одинаково. Значит, разница пришла из того, что напечатал человек, — и это ровно то, что попало в страницу.

Отсюда практический вывод, который важнее самого пробела: поле ссылки — это прямая запись в href. Ошибка в схеме, лишний символ, забытая цифра приедут на опубликованный сайт как есть, и Тильда об этом не скажет.

Пробел после двоеточия: браузер его оставляет

Дальше вопрос, который сам собой возникает: этот пробел — ошибка или мелочь? Замер в Chromium, все формы прогнаны через свойства ссылки и через разбор адреса:

Точкой посередине здесь показан пробел. Читается таблица так:

Схема разбирается в любом случае. Ссылка остаётся телефонной, браузер не считает пробел поводом сломать адрес. То есть страница из-за него не «перестаёт работать» — иначе на разобранном сайте телефон не работал бы нигде.

Пробел после двоеточия остаётся внутри адреса. В пути лежит ·88002222824 — вместе с пробелом. Дальше эту строку получает операционная система, и что сделает с ней конкретное приложение звонков, браузером не проверить: измерить можно разбор адреса, а не поведение звонилки. В описании схемы tel: пробел разделителем не назван — там перечислены дефис, точка и скобки, — так что полагаться на снисходительность приложения не стоит.

Пробел в конце отсекается, а после двоеточия — нет. Строка tel:8800 222 28 24· приходит в адрес без хвостового пробела: этот случай браузер чистит сам. Тот, что стоит сразу после схемы, не чистит никто.

Вывод простой и дешёвый: в поле пишем только цифры и +. Всё остальное — скобки, дефисы, пробелы для красоты — пишем в тексте ссылки, где они ни на что не влияют.

Опечатка в самой схеме, telephone: вместо tel:, тоже не вызывает никакой ошибки: браузер честно разбирает неизвестную схему и передаёт её системе, которая о ней не знает. Внешне это выглядит точно так же, как «ссылка не работает».

Четыре места, где номер телефона делают кликабельным

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

Первые три — записи типа 396, то есть Zero Block. Четвёртая нашлась в записи типа 450, мобильном меню: <!-- t450 -->, оверлей, кнопка закрытия с aria-label="Close menu". То есть кнопка «позвонить» в выезжающем меню — это тот же самый механизм: поле ссылки, в него написан tel:.

Где стоит код и как он попадает на страницу — отдельный разбор; для телефонной ссылки код не нужен вовсе, она делается настройками.

Иконка с трубкой, у которой нет имени

Здесь измеренное расходится с ожидаемым, и в невыгодную сторону. Две из четырёх форм разметки телефон в дереве доступности не показывают. Замер — дерево через протокол отладки Chromium, контролем в той же выборке стоит обычная текстовая ссылка, у которой имя обязано найтись:

Две средние строки — это и есть та самая иконка с трубкой в шапке. У первой role="img" перебивает роль ссылки: элемент объявлен картинкой, хотя по нему можно нажать и позвонить. Пустой aria-label при этом не «ничего не задаёт», а задаёт пустое имя — и подпись из содержимого уже не подставится, потому что содержимого нет: картинка фоновая. У второй формы роль ссылки сохраняется, а имени всё равно нет: единственное содержимое — <img> с пустым alt.

При этом обе попадают под клавиатурный обход — в замере фокус встал на все пять элементов. То есть человек, идущий по странице табом, останавливается на безымянной картинке и не узнаёт, что это кнопка звонка.

Лечится это не кодом, а заполнением поля с описанием картинки: последняя строка таблицы — та же разметка с непустым aria-label, и имя в дереве появляется. Формулировка «Позвонить: 8 800 …» лучше, чем «телефон» или «иконка»: имя читают вместо картинки, а не вместе с ней.

Соседний случай, где Тильда так же отдаёт разметку без учёта настроек доступности, разобран в статье про анимацию и prefers-reduced-motion.

target="_blank" на телефонной ссылке

Кнопка из мобильного меню приезжает с target="_blank". Это не случайность разметки: собственный код Тильды, который собирает группу социальных ссылок, делает то же самое — для телефона он строит <a href="…" target="_blank">.

Ничего страшного тут нет, но и смысла нет. target говорит браузеру, в каком окне открыть документ, а tel: документ не открывает: адрес уходит системе. На телефоне звонилка запустится независимо от target. На компьютере, где обработчика нет, поведение зависит от браузера — и в лучшем случае не произойдёт ничего, а в худшем останется пустая вкладка. Если поле «открывать в новом окне» у вас под рукой, для телефонной ссылки его лучше выключить.

Сама Тильда номера в ссылки не превращает

Частая надежда: написать номер текстом, а Тильда его «поймёт». Не поймёт. В её рантайме нет ни одного места, которое искало бы телефоны в тексте страницы: поиск по тридцати файлам даёт слово phone только в проверке браузера по userAgent, а tel: встречается ровно в одной функции — той, что собирает группу социальных ссылок. То есть ссылку делает человек, а не движок.

Функция социальных ссылок, впрочем, полезная: она узнаёт 37 видов адресов — tel:, mailto:, телеграм, вотсап, вайбер, скайп и так далее — и для телефона рисует трубку. В её коде видно и два ограничения, о которых в интерфейсе не сказано:

var dataLinks = socialAttr.split(',');
if (dataLinks.length > 7) { dataLinks = dataLinks.slice(0, 7); }

Список делится по запятой — значит, запятая внутри адреса разорвёт его на две части. И всё после седьмой ссылки отбрасывается: без ошибки, без предупреждения, просто восьмая иконка не появится.

Как найти все телефоны на странице

Это нужно, когда телефон меняется и надо проверить, что он поменялся везде. Первое желание — искать по точному адресу, и оно не работает: в замере селектор a[href="tel:88002222824"] не нашёл ни одной ссылки из пяти. Мешает пробел.

Работают два способа — по началу адреса и по разобранному свойству:

// по началу адреса: пробел не мешает, он дальше
document.querySelectorAll('a[href^="tel:"]');

// по свойству: браузер уже разобрал схему за вас
[...document.querySelectorAll('a')].filter((a) => a.protocol === 'tel:');

Оба в замере нашли все пять форм разметки. Второй способ надёжнее: он не зависит от того, как именно записан адрес в атрибуте.

Только не пишите найденное обратно через textContent — так теряется и сама ссылка, и переносы строк, и это ломает страницу молча.

Телефон в форме — совсем другая задача

Ссылка tel: и поле «телефон» в форме — разные вещи, и путать их дорого. Ссылка служит для того, чтобы позвонить вам; поле в форме — для того, чтобы номер записался в заявку. У поля свои беды: Тильда проверяет его по своему правилу, и короткий номер она пропускает. Это разобрано отдельно — почему Тильда не проверяет длину телефона, там же готовый код маски. Сами моды для форм лежат в каталоге, в разделе форм и квизов.

Что проверить у себя

1. В поле адреса — tel:, цифры и +. Без пробела после двоеточия, без скобок и дефисов: они уместны в тексте ссылки, а не в адресе.
2. Проверка — с телефона. На компьютере телефонная ссылка чаще всего не делает ничего, и это не признак ошибки.
3. У иконки с трубкой заполнено описание. Пустое — значит безымянный элемент под клавиатурным обходом.
4. Номер в адресе тот же, что в тексте. Разметка их не связывает: текст можно поменять, а адрес оставить старым, и ошибки не будет.
5. «Открывать в новом окне» для телефона выключено.
6. Номер поменяли — проверьте все места. Ищите a[href^="tel:"], а не точный адрес; на разобранном сайте одна и та же ссылка повторялась в трёх записях.

Если телефонных ссылок много, они разбросаны по блокам и должны меняться в одном месте — это уже задача на код, и она решается модом под задачу.