Доступность ссылок: выделения цветом недостаточно

0
869
views

Перевод статьи «Link accessibility – Colors are not enough».

Доступность ссылок

Доступность ссылок это один из главных аспектов юзабилити. Тем не менее, дизайнеры часто не понимают, что делает ссылки доступными. Чаще всего они выделяют ссылки только лишь цветом. В результате людям, имеющим проблемы со зрением, сложно обнаружить их в текстовых блоках, даже если используются высококонтрастные цвета.

Основное правило доступных ссылок — не нужно полагаться исключительно на цвет. Частично — потому что люди с различными проблемами со зрением не всегда способны распознать такую ссылку. Но кроме того, даже обычным пользователям будет легче заметить более выделенную ссылку.

Однако не всегда просто создать доступные ссылки, которые вписывались бы в дизайн сайта. Также существует риск «переборщить» с визуальными элементами, что может запутать пользователя.

Типы ссылок

Говоря о ссылках, мы обычно представляем себе классические синие ссылки с подчеркиванием. Но видов ссылок гораздо больше, например:

  • ссылки в теле текста,
  • ссылки в заголовках и подзаголовках,
  • пункты меню,
  • кнопки,
  • изображения,
  • видео,
  • аудио.

В этой статье я затрону только первую группу — ссылки в тексте. Хочу сразу оговорить, что моя статья — не руководство, это скорее попытка разобраться, каким образом можно сделать ссылки более доступными.

Доступность ссылок согласно WCAG 2.0

WCAG 2.0 (Web Content Accessibility Guidelines) содержит две дополнительные рекомендации касательно ссылок в текстах:

  1. Текстовая ссылка должна быть контрастной; цвета ссылки и окружающего текста должны относиться как 3:1.
  2. Ссылка должна иметь и нецветовое обозначение (обычно — подчеркивание) как при наведении мыши, так и когда фокус наводится при помощи клавиатуры.

По умолчанию браузеры отображают ссылки с стиле, соответствующем этим условиям. Вы можете проверить это, отключив дополнительные CSS-правила при помощи расширения браузера Web Developer или других подобных инструментов разработчика. При этом домашняя страница Mozilla Developer Network в Chrome выглядит следующим образом:

Базовые стили в Chrome

Это, разумеется, очень базовые стили, но они есть: подчеркнутые синие ссылки хорошо известны, так что пользователи интернета могут с легкостью их распознать. Не случайно Nielsen-Norman Group в своей статье «Beyond Blue Links: Making Clickable Elements Recognizable» также называет синий цвет самым безопасным выбором для ссылок.

Примеры доступных ссылок

WebAIM не рекомендует при помощи CSS убирать подчеркивание, поскольку «пользователи привыкли видеть ссылки подчеркнутыми». Тем не менее, многие крупнейшие сайты не следуют этому принципу доступности ссылок. Часто они убирают подчеркивание не только из дефолтного состояния ссылки, но и из стилей :hover.

Но почему они так поступают? Главным образом, из эстетических соображений. Но подчеркнутые ссылки вовсе не обязательно должны выглядеть просто и скучно.

1. Border-bottom

Например, Bloomberg использует свойство border-bottom, чтобы выделить подчеркивание цветом, отличным от цвета текста ссылки. Как видите на скрине, текст ссылки остается черным, а вот подчеркивание — синее, благодаря чему ссылки смотрятся стильно.

Ссылки на сайте bloomberg

Возможно, ссылки Bloomberg могли бы выделяться еще и более жирным шрифтом, но даже без этого они являются хорошим примером креативного, необычного использования подчеркивания.

2. «Реверсное» оформление ссылок

The Verge практикует другой подход к подчеркиванию ссылок в тексте. Там они подчеркнуты по умолчанию, а при наведении мыши подчеркивание исчезает. При этом также немного меняется цвет, с розового на пурпурный (впрочем, изменение цвета едва заметно).

Необычные ссылки сайта the verge

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

3. Значки

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

Сайт WebAIM для доступности ссылок выбрал решение «все включено». Помимо подчеркивания ссылок они также добавили маленькие значки ко внешним ссылкам. Таким образом эти значки служат не только для визуального обозначения ссылок, но и для разграничения внешних и внутренних ссылок.

Ссылки на WebAIM

Создавать значки самостоятельно не обязательно. Значки внешних ссылок можно взять, например, на Font Awesome, и быстро добавить к своим ссылкам.

Значки внешних ссылок на font awesome-

4. Текст ссылок

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

WCAG 2.0 содержит рекомендации даже насчет того, как составить подходящий текст для ссылки, и приводит полезные примеры (правда, главным образом для ссылок-изображений).

Если хотите посмотреть хороший пример правильного текста ссылки, я бы посоветовала сайт Gov.uk, где публикуется правительственная информация Великобритании. Например, посмотрите их страницу Set up a business.

Ссылки на gov.uk

Вот обратите внимание на строку Find out more about being a sole trader and how to register в скриншоте. Они поставили ссылку на ту часть текста, которая описывает назначение ссылки, а не на глагол, призывающий к действию («find out more» — «узнайте больше о…»).

Противоречивая роль атрибута title

Роль атрибута title в том, что касается доступности ссылок, неоднозначна и интересна. Если вы добавляете этот атрибут, при наведении указателя мыши на ссылку где-то рядом с ней возникает дополнительная информация.

Например, вот эта строка HTML

<a href="#" title="Дополнительная информация">Наведите указатель мыши на ссылку, но не кликайте.</a>

в браузере отображается как Наведите указатель мыши на ссылку, но не кликайте.

Я долгое время считала, что добавление атрибута title к ссылкам это хорошая практика, способствующая большей доступности, поскольку дополнительная информация помогает пользователям понять назначение ссылки. Однако WCAG 2.0 смотрит на это несколько иначе.

На странице «Supplementing link text with the title attribute» («Дополнение текста ссылки при помощи атрибута title») они описывают несколько проблем доступности, возникающих при таком подходе. Например, атрибут title недоступен для вспомогательных технологий и для пользователей, располагающих только клавиатурой. Кроме того, в некоторых клиентских приложениях дополнительная информация исчезает через пять секунд, а этого времени обычно недостаточно для прочтения.

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

Состояния ссылок

Есть пять разных состояний ссылок, представленных псевдоклассами CSS: :hover, :focus, :active, :visited и :link.

Стоит ли делать разные стили для всех пяти состояний и хорошо ли это будет для доступности, — вопрос открытый. Благодаря разным стилям для всех состояний пользователи, конечно, заметят каждое изменение, но всегда ли это хорошо? Чрезмерное количество изменений состояния может привести к перегрузке информацией и сбить с толку пользователя.

Лично я склоняюсь к тому, чтобы создавать один стиль для дефолтного состояния ссылки, второй для состояний :hover, :active и :focus, и иногда добавлять третий стиль для состояния :visited. Но я не могу утверждать, что это лучшее решение в плане доступности. Если вас заинтересовала эта тема, на StackOverflow UX есть дискуссия о том, стоит ли делать одинаковыми стили для состояний :focus и :hover.

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here