Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)
Я не начну эту подсказку с привычного: "В эти дни люди посещают ваш сайт с разных устройств", но это все-таки правда Многие мобильные устройства отлично справятся с распознаванием телефонных номеров в вашем HTML, сделая их кликабельными, так, что будет возможность напрямую срауз позвонить по номеру, но не всегда.
Что случится, если телефон пользователя не сможет распознать номер телефона, как тот, на который можно позвонить? Например может произойти так, что то, как вы ввели номер просто не распознается платформой. Упущенная возможность!
(Ознакомьтесь со списком шаблонов Марка Хаммонда, которые будут распознаваться iOS и Android)
Сделайте номер телефона кликабельным
Самый простой способ: засуньте ваш номер телефона в ссылку, но вместо того, чтобы использовать http* (или что вы используете для ссылок), используйте tel: или tel://. Таким образом, даже если вы используете какой-то нераспознаваемый шаблон, устройство все равно будет знать, что делать.
1 |
<a href="tel:+4411122233344">+44 (0)111 - 222 333 44</a> |
Неподдерживающие браузеры (например такие, как на вашем настольном компьютере) не знают что делать с tel: протоколом до тех пор, пока у пользователя не будет какого-нибудь расширения типа Skype для распознавания номеров телефонов. Google Chrome благополучно проигнорирует ваш клик, в то время как другие браузеры начнут плакать. Другие устройства без модуля связи (как iPad) распознают номер телефона, предлагая пользователю добавить контакт в их адресную книгу – это было бы отличным подходом и для браузеров на компьютерах.
Украшаем телефонные номера
В дополнение, давайте сделаем более понятными номера телефонов, задав стили каждому из них. Мы используем свойство атрибута, затронув только псевдо-элемент :before для контейнера, который содержит наш tel: .
1 |
a[href^="tel:"]:before { |
2 |
content: "\260E"; |
3 |
display: block; |
4 |
margin-right: 0.5em; |
5 |
}
|
Маленький символ ^ здесь означает, что мы ищем элементы, href атрибут которых начинается с нужной нам строки tel: и tel:// нам как раз подходят Мы используем маленькую иконку телефона из юникода \260E;, так что нам не придется использовать веб иконки. Отлично.
color: tomatoЗдесь мы закончили, во имя доступности, попробуйте это сделать!
Дальнейшее чтение
By
