Ссылки на мобильные номера телефона и их доступность

Ссылки на мобильные номера телефона и их доступность

От автора: раньше для меня составляло проблему сделать доступными для ссылки мобильных номеров, при этом оставив их функциональными. Руководство WCAG 2.0 гласит: Подчёркивание ссылок или другое нецветовое визуальное выделение являются необходимым требованием (из соображений доступности для тех пользователей, которые не различают цветов).

Давайте подумаем, какой мы обычно пишем код для того, чтобы ссылка на номер телефона срабатывала после нажатия в мобильном браузере:

<a href="tel:123-456-7890">123-456-7890</a>

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

Чего нужно избегать — так это создания двух отдельных элементов для номера телефона и использования условного CSS для отображения подходящего элемента для мобильных или настольных устройств. Если в браузере отключён CSS, то будут отображаться оба номера (да, некоторые люди отключают CSS). «Окей, друг, я понял, в чём проблема. Что можно сделать?”

Заменить элемент

Мы можем заменить элементы в DOM с помощью JavaScript. В этом скрипте, если мы создали span для номера телефона, мы можем заменить его в DOM на <a> для меньших экранов. Что мы имеем:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<span id="num">123-456-7890</span>

Можно добавить немного jQuery и использовать метод replaceWith():

$("#num").replaceWith(function () {
  return $("<a href='tel:" + $(this).html() + "'>" + $(this).html() + "</a>");
});

(Вы можете проделать то же самое с простым JavaScript, используя метод replaceChild().)

Теперь нам нужно условие, чтобы определить, когда заменять элемент. Поскольку мы выполняем это изменение основываясь на размере экрана, ширина экрана 700px в качестве триггера может обеспечить наилучшую гибкость. (Это не идеал, но никто не говорил, что создание веб-страниц – это легко)

if ($(window).width() <= 700) {
  $("#num").replaceWith(function () {
 return $("<a href='tel:" + $(this).html() + "'>" + $(this).html() + "</a>");
  });
}

Это демо-версия, демонстрирующая данную технику в случае, когда контейнер номера телефона имеет определённый размер.

Теперь у нас есть одновременно доступное и функциональное решение. Я вижу в этом смысл, хотя я слышал о проблемах, связанных с нарушением функций VoIP на немобильных экранах. Если вы хотели бы улучшить этот метод или имеете другое решение данного сценария, я бы с удовольствием о нем послушал. Удачи!

Автор: Matt Smith

Источник: http://allthingssmitty.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree