Руководство по созданию правильных ссылок для сайтов и электронных писем

Это может улучшить пользовательский опыт, помочь вашим SEO-усилиям и, что самое главное, улучшить пользовательский опыт. Также полезно знать, что некоторые программы чтения с экрана обрабатывают все ссылки на странице и представляют их за один раз. Если абзац имеет фиксированную ширину, составьте текст так, чтобы все ссылки помещались в строки, например, попробуйте расположить одну из них в самом начале абзаца. Но помните, что браузеры и устройства по-разному отображают контент, поэтому в некоторых случаях ссылки все равно будут смещаться.

Руководство по созданию правильных ссылок для сайтов и электронных писем

Они также могут негативно повлиять на SEO и исключают тех, кто пользуется вспомогательными технологиями, такими как считыватели экрана. Прямой язык побуждает пользователей совершить 4friends.ru желаемое действие, а в маркетинге надежный призыв к действию имеет решающее значение. Например, при предоставлении справочных ссылок более уместен описательный текст. Гиперссылки “Нажмите здесь” исключают тех, кто пользуется вспомогательными технологиямиИнтернет предназначен для всех. Но для тех, у кого проблемы со зрением, просмотр веб-страниц может быть связан с использованием вспомогательных технологий, таких как программы чтения с экрана, которые обычно читают текст на странице вслух.

• Прямой язык побуждает пользователей совершить желаемое действие, а в маркетинге надежный призыв к действию имеет решающее значение.
• Доступные ссылки — не только те, которые выглядят аккуратно и понятно, они также должны правильно работать.
• Когда пользователи просматривают веб-страницу, они сознательно (или подсознательно) сканируют текст в поисках релевантных ссылок, которые приведут их дальше по пути.

К счастью, здесь на помощь приходит HTML-атрибут aria-label, который позволяет добавить пояснительный текст для пользователей скринридеров. Одно из требований WCAG — не полагаться исключительно на цвет, если вы хотите выделить в тексте кнопку или ссылку. Окрасить ссылки в синий или другой цвет недостаточно, так как они все равно могут остаться невидимыми для людей с дальтонизмом. Мы признаем, что бедное старое “нажмите здесь” в этой статье блога получило жесткую критику! Хотя мы считаем это оправданным, мы также хотели бы подчеркнуть, что “нажмите здесь” – не единственный виновник плохого пользовательского опыта.

Комбинация веб-адреса (URL) и кликабельного элемента (чаще всего это слово или фраза, иногда изображение). Хотя это обширная тема, мы сосредоточимся на текстовых ссылках, а именно на их юзабилити и доступности. Например, на веб-странице один и тот же URL-адрес может быть прикреплен к заголовку статьи, главному изображению и вводному предложению.

Им приходится тратить время на то, чтобы определить, какая ссылка приведет их к нужной информации. В этой статье мы рассмотрим, почему эти гиперссылки – плохая идея и что следует писать, чтобы улучшить пользовательский опыт. Но этот аспект пользовательского опыта – язык, используемый в гиперссылках – часто упускается из виду. Нередко можно встретить фразы типа “нажмите здесь” или “читайте дальше”, хотя они далеко не оптимальны. Зрячие люди могут догадаться, что “Подробнее…” относится к ближайшему заголовку, а для людей с нарушениями зрения нужно более продуманное решение.

Эмоциональные потребности пользователей и как с ними работать

За исключением случаев, когда ссылка побуждает к действию (например, подписаться на рассылку), в гиперссылках лучше избегать глаголов и использовать описательные существительные. Это не означает, что вы никогда не должны использовать глагольные фразы в своих рекламных текстах или призывах к действию, но в большинстве случаев вам следует избегать их в тексте с гиперссылками. Теперь мы убедились, что гиперссылки “нажмите здесь” следует избегать любой ценой, а что лучше всего использовать вместо них? Самый простой ответ – использовать описательный якорный текст, который говорит пользователям о том, что находится на другом конце ссылки.

Помимо доступа к информации, продуктам и услугам онлайн, пользователи также хотят быстро перемещаться по веб-сайтам, чтобы найти то, что им нужно. Для этого эффективные гиперссылки являются такой же частью дизайна, как макет или цветовая схема сайта. Пользователи с нарушениями зрения не видят веб — они слушают его с помощью “скринридеров”, вспомогательных программ, которые преобразуют письменный текст в быструю роботизированную речь. Они пользуются клавиатурой и помнят десятки полезных шорткатов для перемещения между заголовками, кнопками или ссылками, вместо того чтобы покорно слушать весь контент на странице.

Из данной статьи вы узнаете, как создать ссылку на онлайн-контент различными способами. Можно скопировать и вставить адрес веб-сайта, чтобы создать ссылку на сайт; можно добавить ссылку в электронное письмо и скрыть адрес под текстом; можно разместить ссылку на веб-сайте с помощью HTML-кода. Доступные ссылки — не только те, которые выглядят аккуратно и понятно, они также должны правильно работать. Одной из самых распространенных таких практик является практика “нажмите здесь” для гиперссылок. Вместо того чтобы писать “нажмите здесь”, почему бы не попробовать использовать описательный якорный текст, который точно описывает, куда ведет ссылка?

Ссылки vs. кнопки

Однако не забывайте о языке, который вы используете, и вы сможете улучшить пользовательский опыт на вашем сайте или в приложении для всех ваших пользователей. Это повысит эффективность вашего контента и, возможно, даже поднимет ваш бизнес. В этом посте мы рассмотрели, почему лучше избегать гиперссылок типа “нажмите здесь”.

В этом году онлайн-институт технологий и творчества Projector запустит 5 курсов по веб-доступности. К сожалению, на некоторых сайтах разработчики удаляют фокус вручную или настраивают его таким образом, что выбранная ссылка выглядит еще менее заметной, например, исчезает. Как и все интерактивные компоненты, ссылки должны иметь видимый индикатор фокуса. Все популярные браузеры по умолчанию имеют встроенный доступный фокус (вы точно видели толстую синюю рамку вокруг полей ввода, раскрывающихся списков, кнопок и ссылок в Google Chrome).