От автора: раньше для меня составляло проблему сделать доступными для ссылки мобильных номеров, при этом оставив их функциональными. Руководство 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.