Цифровая доступность для маркетологов, часть 2: пользовательский опыт и веб-сайты
Опубликовано: 2022-06-16В первом посте этой серии, посвященном цифровой доступности, мы затронули вопросы доступности для маркетологов «что и почему». Теперь пришло время для «как».
Обратите внимание, что мы намеренно ограничили наши рекомендации теми элементами, которые достаточно просты в реализации и актуальны для маркетологов. Эта серия ни в коем случае не является исчерпывающим списком всех стандартов, о которых необходимо знать компаниям, когда речь идет о доступном контенте. Если вы хотите узнать об основных принципах доступности и критериях WCAG, ознакомьтесь с программой электронного обучения TGPi. Это вариант для самостоятельного изучения, который вы можете использовать, чтобы освежить свои навыки или быстро освоить методы специальных возможностей и лучшие практики.
Перейдем к рекомендациям!
Доступность и пользовательский опыт
Плавный и легкий пользовательский интерфейс — это путеводная звезда для каждого маркетолога. Легкость, с которой человек может выполнить критическую задачу, и то, насколько хорошо контент соответствует ожиданиям, сильно влияет на него и будет способствовать или разрушить ваши маркетинговые усилия.
Имеет смысл, верно? Если вы хотите что-то купить в Интернете и столкнулись с проблемой при вводе информации о кредитной карте или нужного вам товара нет в наличии, качество взаимодействия с пользователем резко упадет. Во-первых, потому что вы не смогли выполнить то, что намеревались сделать, а во-вторых, потому что вы ожидали, что сможете это сделать, но этого не было в картах. Этот двойной удар почти наверняка гарантирует, что вы не вернетесь на этот конкретный сайт!
Как маркетолог, вы хорошо понимаете важность превосходного взаимодействия с пользователем. Вы можете даже тестировать его (хорошо для вас!) или иметь аналитику для его измерения. Эти меры имеют решающее значение для оптимизации вашей маркетинговой воронки. Однако то, что вы, возможно, не делаете, — это тестирование пользовательского интерфейса на доступность. (Если нет, то никакого осуждения! Это то, что эта серия постов призвана изменить.)
Пути пользователя
Путь пользователя (также известный как поток пользователя или путь пользователя) — это последовательность действий, которые пользователь выполняет на вашем сайте. Критический путь пользователя соответствует основной цели вашего сайта, такой как совершение покупки, отправка формы, просмотр видео, чтение поста и т. д.
Вы всегда должны уделять приоритетное внимание исправлению доступности для ваших основных пользовательских путей по нескольким причинам.
Во-первых, несмотря на то, что на вашем сайте может быть потрясающий контент, если пользователь не может выполнить свою основную цель посещения вашего сайта, это клиент, которого вы потеряли навсегда.
Во-вторых, многие люди с инвалидностью, к сожалению, привыкли сталкиваться с проблемами, когда делают то, что другие считают само собой разумеющимся. Как правило, они ожидают их, поскольку большая часть мира не была создана с учетом их конкретных недостатков.
В среднем незначительные проблемы с доступностью второстепенного контента вряд ли расстроят их до такой степени, чтобы инициировать судебный иск. Но если они не могут сделать то, ради чего пришли на ваш веб-сайт, вы подвергаете себя большому юридическому риску, особенно если вы являетесь американским брендом.
Тестирование ваших критических пользовательских путей
Итак, как вы проверяете критические потоки пользователей на доступность? Если вы выберете ручной маршрут, вы можете провести пользовательское тестирование с людьми с ограниченными возможностями или проверить код для каждого шага, используя такой инструмент, как ARC Toolkit TPGi (подробнее об этом позже), чтобы выявить сбои WCAG.
Хотя ручное тестирование, в конечном счете, является более полным, если вы хотите немедленно выявить ошибки доступности в ваших критических пользовательских путях, вы можете использовать функцию потоков пользователей ARC Monitoring для автоматического сканирования каждого компонента на доступность. Вы можете включить все компоненты и динамические взаимодействия пользовательского пути, от изображений до диалоговых окон, для сканирования, и вы сможете отслеживать ошибки с течением времени, чтобы помочь улучшить свои внутренние процессы исправления.
Вы можете объединить информацию, которую вы получаете от мониторинга потоков пользователей ARC, с другими вашими аналитическими инструментами, такими как воронка и цели Google Analytics, для выявления барьеров, которые мешают пользователям выполнять желаемое действие.
Доступные сайты
Веб-сайт — это цифровой магазин или офис вашего бизнеса. Это может быть первое (или единственное) впечатление о вашей компании у потенциального клиента, поэтому вам нужно сделать его как можно более привлекательным. Может быть, у вас есть несколько видео или множество изображений, чтобы разбить монотонность, или страницы за страницами с ценным контентом блога. Все это потрясающие активы, которые маркетологи могут использовать, чтобы убедить людей покупать их продукты.
Обеспечение доступности всего этого контента может показаться сложной задачей, но многие передовые методы работы с доступным контентом неотличимы от передовых маркетинговых методов. Читайте дальше, чтобы узнать больше:
Описательный текст ссылки
Каждый хороший маркетолог знает, что ясность необходима для отличной коммуникации. Если вы украсите свой текст чепухой и важными (но в конечном счете бессмысленными) словами, ваше сообщение потеряется. Точно так же, если вы слишком скупы на объяснения, у клиента может не хватить информации, чтобы понять, что вы ему говорите.
Высококачественный контент — это баланс между этими двумя крайностями, и неудивительно, что ссылка или анкорный текст подчиняются тем же правилам. Лучший текст ссылки дает пользователю представление о том, чего ожидать после нажатия. Описательный текст ссылки особенно важен для призыва к действию. Что лучше подготовит пользователя к тому, с чем он столкнется, когда нажмет: «Нажмите здесь» или «Загрузите наш технический документ»? Очевидно, последнее! (Если вы выбрали первое, возможно, вы захотите рассмотреть новый карьерный путь.)
Нет необходимости украшать ваш призыв к действию громкими словами («Загрузите величайший в мире технический документ о магии Гарри Гудини!»), но важно, чтобы люди знали, во что они ввязываются.
Почему текст ссылки так важен для доступности? Во-первых, это очень помогает слепым людям или людям с плохим зрением просматривать содержимое страниц. (Это относится и к людям с безупречным зрением.) Пользователи с нарушениями зрения используют ряд вспомогательных технологий для доступа к цифровому контенту, таких как инструменты увеличения экрана для людей с плохим зрением и программы чтения с экрана для слепых. Как следует из их названия, программа чтения с экрана буквально читает то, что находится на экране.
Однако программы для чтения с экрана, такие как JAWS, позволяют пользователям перемещаться по всему экрану, считывая различные компоненты вместо того, чтобы просматривать весь HTML-код сверху вниз. Когда пользователь переходит от компонента к компоненту, средство чтения с экрана читает только текст привязки ссылок, а не окружающий текст. Это означает, что если все ваши ссылки являются одной и той же копией «нажмите здесь», пользователь программы чтения с экрана не будет знать, что произойдет, если он перейдет по этой ссылке; они вынуждены исследовать окружающий контент, чтобы понять, к чему относится эта ссылка.
Кроме того, программы чтения с экрана позволяют пользователям открывать «список ссылок», что дает им быстрый доступ ко всем ссылкам на веб-странице. Это распространенный сценарий, когда текст ссылки будет прочитан вне окружающего контекста, и когда такие вещи, как «нажмите здесь», становятся реальной проблемой.
Альтернативный текст для изображений
Альтернативный текст, или «альтернативный текст», описывает изображения вашего веб-сайта, чтобы пользователь программы чтения с экрана мог получить более полное представление о содержании каждой веб-страницы. Если вы выбрали изображения, которые функционируют как визуальное объяснение, люди, которые не могут их видеть, будут в недоумении, если вы откажетесь от замещающего текста.
Однако, если вы включили изображения исключительно из эстетических соображений (возможно, вам действительно нравятся изображения людей, сгорбившихся за компьютерами) и у вас их несколько, возможно, вы не захотите добавлять замещающий текст для всех из них. Программы чтения с экрана будут читать весь замещающий текст для каждого изображения, что, если текст не добавляет ценности впечатлению, может раздражать. Если изображение может считаться декоративным и не добавляет дополнительного смысла/понимания содержимого страницы, то оно должно быть скрыто от вспомогательных технологий путем предоставления пустого атрибута alt.
Хорошо структурированные веб-сайты
Правильно используйте теги заголовков, чтобы читатели с нарушениями зрения и без нарушений зрения могли бегло просмотреть страницу, получить общее представление о содержании и легко перемещаться по нему. Следуйте рекомендациям для заголовков, например, начинайте каждую страницу с H1, описывающего содержимое страницы, а затем используйте H2 и H3 в качестве подзаголовков. Используйте теги заголовков намеренно; не располагайте их случайным образом, не задумываясь о структуре.
Хотя вы можете различать заголовки с помощью визуальных средств с помощью стилей CSS, пользователи программ чтения с экрана не могут позволить себе роскошь видеть эти различия. Особенно важно использовать хорошо отформатированные макеты страниц, чтобы пользователи с проблемами зрения могли легко просматривать ваш контент.
Сведите к минимуму объемные абзацы, по возможности используйте более короткие предложения и избегайте использования жаргона или сленга. Более четкий и лаконичный текст поможет пользователям с когнитивными нарушениями лучше понять ваш контент, а также сведет к минимуму путаницу у всех читателей.
Возможно, вы слышали, что продолжительность концентрации внимания у людей теперь меньше, чем у золотых рыбок? Если вы сомневаетесь, разбейте его на части; сделать это как можно проще.
Коэффициенты цветового контраста
Будем надеяться, что руководство по стилю вашей организации не было разработано Санта-Клаусом, так как использование красного и зеленого в качестве дополнительных цветов не принесет вашим пользователям никакой пользы. Цветовой контраст является важным элементом доступного дизайна. Людям со слабым зрением может быть трудно различать слишком похожие цвета, а для дальтоников многие цвета неразличимы.
Вы можете попробовать бесплатный инструмент TGPi Color Contrast Analyzer, который избавит вас от догадок при определении достаточных цветовых соотношений. Используйте палитру цветов, чтобы выбрать цвета переднего плана и фона, и CCA сообщит вам, подходит ли контраст.
Доступные формы
Практически на каждом сайте используется форма, позволяющая пользователям выполнить задачу. Независимо от того, является ли ваш бизнес электронной коммерцией, сервисом или даже просто онлайн-витриной, он, скорее всего, будет включать форму. Тем не менее, формы могут быть сложными для людей с ограниченными возможностями. Есть несколько технических соображений (читай: те, которые должны реализовать разработчики), а также нетехнических, которым могут легко следовать маркетологи, не имеющие знаний в области кодирования. Вот нетехнические лучшие практики:
- Делайте формы короткими и простыми — получайте контактную информацию о клиентах, а затем стройте отношения, чтобы заинтересовать их и получить дополнительную информацию.
- Предоставьте четкие инструкции и заметные метки — никому не нравятся запутанные формы.
- Подтвердить входные данные (отменить изменения/подтвердить) — уведомлять пользователей о любых проблемах и способах их устранения.
- Уведомление пользователя (успех/неудача) — сообщите пользователям, была ли отправка формы успешной или нет.
- Используйте многостраничную или прогрессивную форму. Если вам нужна более сложная форма, стремитесь к многостраничной или прогрессивной форме, которая не перегружает пользователей.
- Уберите ограничения по времени или предоставьте варианты . Ограничения по времени могут быть полезны для принуждения покупателей к покупке, но они вызывают чрезмерный стресс у людей с серьезными проблемами тревожности.
Панировочные сухари
Хлебные крошки — это форма навигации на вашем сайте, которая позволяет вам увидеть, как страница, которую вы сейчас просматриваете, вписывается в общую картину. Обычно это ссылки, ведущие на страницы более высокого уровня.
Примером навигационной цепочки на сайте электронной коммерции, торгующем одеждой, может быть:
Женщинам > Куртки > Шерсть > Бушлаты.
Хлебные крошки полезны для поиска пути и позволяют пользователям легко возвращаться к страницам более высокого уровня, не начиная свой путь с нуля.
Они особенно важны для людей с ограниченными возможностями по нескольким причинам. Во-первых, пользователи с когнитивными нарушениями всегда будут пользоваться удобным интерфейсом, сводящим к минимуму двусмысленность. Хлебные крошки особенно важны, если ваш сайт растянут и сложен. Хлебные крошки также сразу ориентируют пользователей программ чтения с экрана, облегчая навигацию по сайту.
Хотя хлебные крошки явно полезны для пользователей с ограниченными возможностями, как и многие передовые методы доступности, они улучшают работу для всех пользователей.
Чат-боты и сторонние интеграции
Многие веб-сайты используют сторонние интеграции для своих веб-сайтов, такие как чат-боты, всплывающие окна, динамические целевые страницы и т. д. К сожалению, стороннее программное обеспечение часто в значительной степени недоступно, и ситуация усугубляется неспособностью компании исправить это.
Если ваша организация решит интегрировать стороннее приложение на свой веб-сайт, обязательно попросите эксперта оценить его, прежде чем добавлять. Хотя вы, возможно, не сможете устранить многие проблемы с доступностью, вы, по крайней мере, поймете уровень риска, на который идете. Вы также можете запросить заявление о доступности или гарантию от своего поставщика для включения в контракт (хотя вам все равно следует протестировать продукт, чтобы убедиться в его точности перед внедрением).
В качестве примечания всегда спрашивайте своих поставщиков о доступности их продуктов. Чем больше клиентов запрашивают доступные продукты, тем больше шансов, что поставщики прислушаются и начнут включать специальные возможности в свои сборки продуктов.