Чому «клацни тут» і «на цій сторінці» — це погано? І чи можна вживати фразу «читати далі»? Слава Шестопалов, дизайн-менеджер в Bolt, відповідає на ці питання та розповідає, як уникнути поширених помилок при формулюванні та форматуванні посилань в тексті. Оригінал статті англійською мовою – в особистому блозі Слави.

Як часто ви помічали чи навіть самі писали таке на сайтах, у застосунках й електронній пошті:

– Більше інформації за посиланням.

– Прочитати більше про правила безпеки ви зможете тут і тут.

– Заповніть форму на сайті й отримайте подарунок.

Якщо щось роблять усі – це не обов’язково правильно 

Такі фрази стали настільки звичними, що більшість людей не вбачає в них жодної хиби. У цій статті я поясню поширені помилки формулювання та форматування посилань, а також запропоную доступніші та більш інформативні варіанти.

1. Описові посилання

Почнімо з основ. Що таке посилання, або ж лінк? Це комбінація вебадреси (URL) й інтерактивного елемента, тобто слова чи фрази, а інколи зображення, на яке можна натиснути. Тема посилань дуже широка, тож цього разу ми сфокусуємося на найбільш проблемних посиланнях — текстових. Зокрема поговоримо про їхню зручність (usability) і доступність (accessibility).

Дбайливо скомпоновані лінки — своєрідний вияв поваги до читачів, а необачно написані посилання спричиняють непорозуміння та мають підозрілий вигляд. Коли посилання звучать як «тут» або «цей», по них складніше влучити пальцем чи курсором, а особливо якщо у вас англомовний текст, де слова коротші (this, that, link, site, page, form).

Але навіть якщо взяти довгеньку українську фразу «за цим посиланням», виникає інша проблема. Не зрозуміло, що там сховано: сторінка чи файл, якась стаття чи вебформа для заповнення? Людині треба перечитати все речення чи навіть абзац, щоби здогадатися.

Значно легше зрозуміти, куди веде посилання, якщо воно вбудоване в описову фразу.

Коли ж вебадреси прикріплено до конкретних описових фраз, по-перше, на них значно легше натиснути, ніж на коротке слово з 3-4 літер, а по-друге, люди будуть розуміти, куди потраплять. Ви можете помітити, що багато вдало скомпонованих лінків містять тему (безпека, подорожі, бренд, маркетинг) і тип інформації (питальник, форма замовлення, інструкція, стаття, канал). Погляньте на ці приклади:

– зазирніть у мій блог про Черкащину,

– на цьому каналі був детальний огляд злочинів радянської влади,

– форма запиту на нове обладнання працює лише з корпоративним VPN.

Вдале посилання лишатиметься зрозумілим навіть поза контекстом

2. Показ «голих» вебадрес

Безперечно, описові посилання — оптимальний вибір, але не єдиний можливий. Якщо ваша вебадреса коротка та не має вигляд нісенітниці на зразок «M$c0P88%X4LHr&dxQ1A», то інколи її показ теж допустимий, особливо якщо ви передбачаєте, що користувачі будуть її копіювати та використовувати деінде або запам’ятовувати.

Інколи демонстрація «голої» вебадреси теж непогано працює, хоча це і не найбільш візуально елегантне рішення

Але якщо ваша вебадреса радше нагадує шифр із сотні беззмістовних символів, тоді показувати її буде не надто вдалою ідеєю. У такому разі варто застосувати якийсь сервіс зі скорочення адрес, приміром, Bitly або Cuttly.

Втім, ці інструменти теж не панацея: так, ви отримаєте коротший лінк, але значущі частини заміняться на випадкові, а отже неінформативні, символи. Ви можете налаштувати скорочену вебадресу, але це часто буває платною функцією. Порівняйте:

• bit.ly/30SjUa4y (підозріло і нечитабельно);
• bit.ly/smashing-books (зазначено тему);
• smash.ing/30SjUa4y (зазначено домен);
• smash.ing/books (повністю прозоре, зрозуміле посилання).

Довгі беззмістовні вебадреси складні для розуміння й запам’ятовування. Проте інколи це може бути не найкрасивішим, але практичним рішенням для копіювання-вставляння.

3. Посилання для завантаження

До цього моменту ми говорили про посилання, які ведуть на інші вебсторінки. Але буває і так, що за посиланням можна завантажити якийсь ресурс (документ, відео, архів тощо), і тут треба дещо інше оформлення. Крім уже зазначених вище описових фраз, варто також поінформувати аудиторію про формат і розмір файлу.

• Формат підказує, що користувач зможе зробити з файлом (наприклад, чи це PDF-документ лише для читання чи Word-документ, який можна редагувати).
• Розмір файлу має значення для людей, у яких дорогий або повільний інтернет чи мало місця в локальному сховищі на комп’ютері.

Посилання для завантаження потребують зазначення формату і розміру файлу

Коли ви публікуєте групу файлів для завантаження (наприклад, у різних форматах чи різними мовами), потрібно подбати не лише про кожен окремий лінк, але про зрозумілість і структуру всього блоку посилань.

Більше сенсу, менше слів: усуваємо повтори

Як ви можете помітити на зразку вгорі, повторювані елементи посилань винесені «за дужки», щоби зменшити інформаційний шум. Хоча це вдала практика для зрячих користувачів, вона може бути шкідливою для незрячих людей. У розділі 6 цієї статті я пояснюю, як вбити двох зайців один пострілом: зберігати мінімалізм, але водночас давати достатньо підказок для людей, які покладаються на асистивну технологію.

4. «Кнопкізація» посилань

На будь-якій вебсторінці чи в мейлі завжди є головні та другорядні посилання. Автори вебконтенту часто намагаються спонукати аудиторію помітити й натиснути на найголовніше з них, тоді як другорядні можна проігнорувати. Отже, якщо ви хочете привернути увагу до певного посилання, можна оформити його у вигляді кнопки, наприклад: «Підписатися на новини», «Придбати квитки», «Отримати звіт», «Завантажити посилання».

Головне посилання може набувати вигляду «кнопки»

І оскільки я не хочу, щоб мене відлупцювали колеги — фахівці з вебдоступності, то мушу застерегти вас від сприйняття цієї поради буквально. В HTML-коді кнопка та посилання — це семантично різні елементи. Коли я кажу про оформлення лінків у вигляді кнопок, я маю на увазі саме візуальний метод, адже він має сенс для зрячих користувачів, чию увагу ви хочете привернути. А от для людей, які використовують допоміжну технологію, буде вкрай дивно натрапити на кнопку замість посилання.

Ось як розрізняти посилання та кнопки семантично:

• <button> = кнопка; виконує дію на сторінці (скажімо, зберегти, оновити, скопіювати, видалити).
• <a> = посилання; спрямовує користувача на іншу сторінку, до файлу чи розділу в межах поточної сторінки (якірні посилання).

Якщо ви не маєте технічної змоги, бажання чи часу оформити посилання як кнопку, то завжди можна наголосити на ньому інакше: винести на окремий рядок, зробити жирне накреслення шрифту, додати відступи згори та знизу тощо.

Важливе посилання можна відокремити від основного тексту за допомогою форматування

Звичайно текст на «кнопці» має відповідати звичним патернам:

– Бути стислим (до 4–5 слів);

– Починатися з дієслова (отримати, купити, завантажити, заповнити тощо);

– Чесно називати дію (уникайте замовчування неприємних проміжних кроків, наприклад, перегляду реклами, реєстрації, прив’язування банківської картки).

Ось порівняйте: «Завантажити звіт» звучить так, ніби завантаження почнеться миттєво після натискання, а «Отримати звіт» передбачає, що користувачеві в обмін на файл, можливо, треба буде залишити своє ім’я та контактні дані.

«Кнопкізація» добре працює в розумних межах, а інакше просто нагадує набридливі рекламні банери.

5. Тексти, насичені посиланнями

На посиланнях тримається інтернет, проте й перенасичувати будь-який вебконтент лінками теж не варто (звичайно, якщо ви не автор Вікіпедії чи іншої бази знань, яка наскрізь перелінкована за своєю природою).

Аби вам не доводилося щось вигадувати, переконайтеся, що вам справді потрібні всі ці посилання. І якщо дійсно потрібно, спробуйте їх згрупувати у список, винести збоку від абзацу основного тексту як примітку чи навіть об’єднати під заголовком, скажімо, «Рекомендовані матеріали».

Тексти, насичені посиланнями, перевантажують увагу читача. Крім того, дуже складно формулювати посилання в контексті речення.

Групування посилань допомагає зробити їх більш читабельними, але якщо серед списку є особливо важливий лінк, то його можна виокремити візуально.

Що помітніше посилання, то більше воно спонукає клацнути на нього

У попередніх розділах ми з’ясували, як описові посилання підвищують комфорт користування. Водночас варто розуміти, що зрозумілі лінки зазвичай довгі, а тому вони можуть виявитися розділеними: початок у кінці попереднього рядка, а кінець — на початку наступного. Безперечно, це дрібна проблема, але трохи дратує.

Розділені посилання не так зручно читати, як ті, що вміщаються в рядки цілими

Якщо ширина абзаців зафіксована (як у більшості корпоративних емейлів), ви можете просто скласти текст таким чином, щоби посилання не розділилися. Скажімо, починайте абзац із посилання або завершуйте посиланням. З іншого боку, веб — це не книга чи газета, і ви ніколи не передбачите, як текст відобразиться на конкретному цифровому пристрої. Саме тому значно безпечніший варіант — виносити посилання в окремий блок чи список.

Адаптація картини 17 століття «Дами Чолмонделі» до сучасної ситуації в інтернеті

6. Доступність посилань

Справді доступні посилання не лише зрозуміло написані, але також і певним чином працюють. «Керівництво з доступності вебконтенту» (WCAG), найвідоміший у світі стандарт з цифрової доступності, містить рекомендації щодо посилань, які не обмежуються лише візуальною частиною.

Розрізнення

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

Посилання мають відрізнятися від решти тексту за ще однією ознакою, крім кольору

Колірний контраст

Оскільки посилання — важливий інтерактивний елемент, вони мають відповідати вимогам до мінімального контрасту. У WCAG є два рівні контрастності:

• AA — середня; доречна для практично всіх сайтів і застосунків;
• AAA — висока; її часто можна помітити на державних ресурсах і на сайтах-спільнотах людей з інвалідністю.

Наприклад, рівень АА вимагає дотримання пропорції контрасту між посиланням і фоном сайту щонайменше 4,5 до 1 для нормального тексту і 3 до 1 для великого.

Перевіряйте контрастність за допомогою онлайн-інструменту Contrast Checker або плагіну A11y Color Contrast для Figma чи Sketch.

Вимірювання контрастності на око не завжди точне. Наприклад, зелений колір, який мінімально відповідає вимогам, здається темнішим, ніж синій

Стан фокусу

Як й інші інтерактивні елементи, посилання повинні мати видимий фокус. Усі популярні браузери мають вбудований фокус за замовчуванням. Якщо ви відкриєте сайт через Google Chrome і натискатимете кнопку Tab на клавіатурі, то побачите, як синя рамка почне перестрибувати від елемента до елемента на вебсторінці. Це і є фокус. Він потрібен усім, хто використовує для навігації клавіатуру, і це не обов’язково люди з порушеннями зору.

Клавіатура стає у пригоді багатьом досвідченим користувачам офісних програм, скажімо, бухгалтерам чи фінансистам, бо інколи це значно швидше, ніж цілитися курсором. На жаль, багато сайтів вимикають фокус або роблять його майже непомітним.

Якщо у вас немає натхнення дизайнити свій оригінальний стан фокусу, чому б не лишити стандартний браузерний?

Оптимізація для «екранних читачів»

Незрячі люди не бачать інтернет, а слухають його за допомогою так званих «екранних читачів», тобто спеціальних програм, які трансформують текст у голос. Вони рухаються по сайту за допомогою клавіатури та знають десятки корисних клавіатурних скорочень, щоби швидко перестрибувати між заголовками, кнопками, посиланнями, а не слухняно слухати всю сторінку від початку до кінця. Тобто існує шанс, що люди вихоплять ваше посилання поза контекстом.

Тому, коли ми зменшуємо кількість слів і дбаємо про мінімалізм для зрячих людей (наприклад, у списках посилань на файли у різних форматах чи різними мовами), важливо адаптувати ці посилання для користувачів екранних читачів. Інакше незрячі відвідувачі вашого сайту будуть чути щось на зразок:

«Українською — посилання, англійською — посилання, німецькою — посилання…»

Зрозуміліше було би ось так:

«Завантажити звіт українською — посилання, завантажити звіт англійською — посилання, завантажити звіт німецькою — посилання…»

А, мабуть, найбільше дратує незрячих людей, коли вони заходять на новинний сайт і намагаються пробігтися по заголовках, а натомість чують:

«Читати більше — посилання, читати більше — посилання, читати більше — посилання…»

В інтернеті точиться боротьба між тим, щоби ставити посиланнями безпосередньо на заголовки, і використанням «читати більше»

Зрячі користувачі можуть легко здогадатися, що «Читати більше…» стосується найближчого заголовка, тоді як для користувачів екранних читачів треба подбати про розширений опис. На щастя, в мові веброзмітки HTML ж спеціальний атрибут aria-label, який може допомогти.

У малих командах, де немає окремого спеціаліста з вебдоступності, це часто завдання дизайнера скомпонувати допоміжний текст, а також співпрацювати з розробниками, щоб вони його коректно втілили. Ось спрощений зразок коду з aria-label (я не фронтенд-експерт, тож це лиш ілюстрація думок):

<h4>Новини</h4>

<p>90% текстів в інтернеті мають хибно оформлені гіперпосилання.

<a href=”hyperlink-mistakes.html” aria-label=”Читати більше про поширені помилки в оформленні гіперпосилань”>Читати більше…</a>

</p>

<p>Інститут Проджектор цьогоріч запускає 5 нових курсів із вебдоступності.

<a href=”new-a11y-courses.html” aria-label=”Читати більше про нові курси з вебдоступності від інституту Проджектор”>Читати більше…</a>

</p>

Як ви бачите, кожне «читати більше» тепер набуло додаткових подробиць і набуло змісту поза контекстом. Я особисто не люблю оці всі «читати більше» в принципі, але навіть їх можна задизайнити якісно, якщо це конче необхідно у вашому дизайні.

А тепер фокус. Вам узагалі не доведеться морочити голову через aria-label, якщо ви просто прикріпите вебадреси до самих заголовків. Погляньте, як просто:

<h4>Новини</h4>

<h5><a href=”hyperlink-mistakes.html”>90% текстів в інтернеті мають хибно оформлені гіперпосилання</a>

</h5>

<h5><a href=”new-a11y-courses.html”>Інститут Проджектор цьогоріч запускає 5 нових курсів із вебдоступності</a>

</h5>

Дублікати посилань

Ще одна дошкульна хиба — посилання-дублікати. Це коли ви прикріплюєте одну й ту саму вебадресу до різних елементів сторінки, наприклад, до заголовка, головного зображення та вступного абзацу. На перший погляд, проблеми нема: куди б користувач не клацнув — усе одно потрапить до статті. Але для незрячих людей це означає повторення того самого контенту тричі, що дратує та подовжує час на вивчення сторінки.

Ліпше зробити інтерактивним увесь блок, ніж ставити кілька окремих посилань до того самого ресурсу.

Зауважу, що у моїй пораді вище йдеться про ідентичні вебадреси. Однак буває, що посилання ведуть у різні місця: приміром, якщо ви клацнете по заголовку, то перейдете до статті, якщо натиснете на ім’я авторки, то на її профіль, а якщо на ключове слово, то вас перекине до всіх статей на цю тему. У такому разі можна «загорнути» другорядні посилання в головне.

Інтерактивна зона головного посилання ніби обгортає зони другорядних посилань (профіль авторки й ключові слова).

Тепер про емейли. Часто трапляється, що запрошення на онлайн-подію містить низку посилань на Zoom-конференцію у кількох місцях листа. Тобто в описі події, в розділі «місце проведення», наприкінці із закликом взяти участь. Це не лише створює ефект нав’язливої програми та інформаційного шуму для зрячих людей, але неабияк дратує людей з порушеннями зору, яким доведеться стрибати по лінках-дублікатах.

Один промовистий лінк ліпший за купу дублікатів, розпорошених у тексті.

Рекомендована література

У цій статті я хотів запропонувати розмаїття варіантів, а не просто показати тему в чорних і білих тонах «правильно — неправильно». Існує безліч відтінків хорошого дизайну, і ви можете обрати свій на перетині найкращих практик і вашої конкретної ситуації.

Можете продовжити вивчення теми з джерел, які допомогли мені в написанні цієї статті:

• «Using Aria-Label for Link Purpose», розділ із «Керівництва з доступності вебконтенту» про атрибут aria-label.
• «How to Make ‘Read more’ Links Accessible», стаття громадської організації «Vision Australia» щодо посилань у стилі «читати більше».
• «Writing Hyperlinks: Salient, Descriptive, Start with Keyword», оглядова стаття про дизайн посилань на сайті Nielsen Norman Group.

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.