Как создать доступный B2B-сайт в 2023 году

На дворе 2023 год, и по сей день пользователи с ограниченными возможностями испытывают трудности с доступом к блогам, веб-сайтам и различным другим материалам. Существует четкая модель непреднамеренного исключения, когда маркетинговые материалы не предназначены для людей с ограниченными возможностями.

Только 3% веб-сайтов доступны для пользователей с ограниченными возможностями. Количество доступных веб-сайтов B2B еще меньше.

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

В этом блоге мы поможем вам восполнить пробел, объяснив, что такое доступность веб-сайтов, как ее достичь и как она может помочь B2B-компаниям расширить свое присутствие на сегментах рынка с критически недостаточным уровнем обслуживания.

Что такое веб-доступность и почему это важно?

Стандарты доступности веб-сайтов и передовой опыт гарантируют, что люди с ограниченными возможностями могут участвовать в работе в Интернете.

Это включает в себя навигацию по веб-сайту, загрузку электронной книги, просмотр веб-семинара и многое другое.

Не существует универсального подхода к доступности. Существует множество видов инвалидности, и каждая из них может иметь широкий спектр последствий для разных людей.

Однако владельцы веб-сайтов могут устранить эти воздействия стандартизированным способом.

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

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

WCAG также играет ключевую роль в соблюдении Закона об американцах-инвалидах (сокращенно ADA).
В большинстве случаев веб-сайты, совместимые с WCAG, также совместимы с ADA.

Следование протоколам WCAG — лучший способ обеспечить соответствие требованиям ADA .

Не каждый веб-сайт разработан с соблюдением требований. На самом деле таких очень мало.

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

Покупательная способность сообщества инвалидов

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

Около 15% населения мира имеют ту или иную форму инвалидности. Инвалиды не ограничены национальными или культурными барьерами. Они влияют на каждую демографическую группу повсюду на планете.

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

Игнорировать этих людей не только несправедливо, но и неразумно.

Если ваша маркетинговая стратегия B2B основана на привлечении органического трафика на ваш блог, нет смысла исключать около 15% ваших потенциальных клиентов.

Тем не менее, это именно то, что делают многие предприятия.

Для людей с ограниченными возможностями веб-доступность абсолютно необходима для взаимодействия с пользователем.

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

Этот контент играет решающую роль в путешествии покупателя B2B.

Это правильный поступок и выгодная бизнес-стратегия.

Как создать доступный сайт

Официальный документ WCAG 2.1 содержит более 100 страниц высокотехнологичных стандартов веб-дизайна и интерактивности. Это пугающий документ со множеством правил, пунктов и положений.

Но вам не нужно становиться экспертом по доступности, чтобы создать доступный веб-сайт.
Многие из протоколов WCAG 2.1 вращаются вокруг основного набора принципов, которые легко понять.

Реализуйте их на своем веб-сайте, и вы будете на пути к обеспечению доступности:

Разрешить навигацию с помощью клавиатуры

Мышь — прекрасный инструмент, но он не очень доступен. То же самое относится к сенсорным панелям и дисплеям с сенсорным экраном. Люди с нарушениями зрения или двигательных навыков не могут использовать эти устройства.

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

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

Разрешить людям перемещаться по вашему веб-сайту и потреблять контент только с помощью клавиатурных команд — один из лучших способов улучшить доступность всего сайта.

Это особенно важно для веб-сайтов B2B, которые используют интерактивный контент (например, формы на видео) для захвата и преобразования лидов.

Используйте иерархию заголовков

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

Они не смогут этого сделать, если на ваших веб-страницах не используются правильные заголовки HTML.

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

Заголовки являются частью структуры вашей веб-страницы. Они помечены в определенной иерархии важности, обычно от H1 до H4. Все редакторы форматированного текста позволяют авторам контента разделять блоки текста с помощью этих заголовков. Убедитесь, что ваш сайт делает то же самое.

Добавить описательный альтернативный текст

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

Добавление замещающего текста к изображениям позволяет пользователям программ чтения с экрана понимать контекстные подсказки, которые в противном случае они могли бы пропустить. Если рассматриваемое изображение содержит важную информацию, то тег alt-text — единственное место, где программы чтения с экрана могут получить эту информацию.

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

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

Совершенствуйте искусство цветовых контрастов

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

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

Домашняя страница Rock Content — отличный пример цветового контраста в действии. Он имеет светло-фиолетовый фон с бликами за основным изображением и черный текст сверху. Это просто, эффективно и легко читается.

Есть несколько вещей, которые вы можете сделать, чтобы исправить цветовой контраст на вашем сайте:

Настройка цвета текста для контрастности 4,5:1 — одно из самых простых решений.
Многие доступные веб-сайты размещают прозрачную рамку между фоновыми изображениями и текстом заголовка. Другие просто перемещают текст заголовка рядом с изображением, а не поверх него.

Убедитесь, что видео доступны

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

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

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

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

То же самое и с формами.

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

Оптимизируйте соответствие требованиям с помощью мощных сторонних решений

Протоколы WCAG содержат огромное количество технических деталей. К ним относятся определенные коэффициенты цветовой контрастности, стандарты работоспособности, производительность якорных ссылок и многое другое.

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

Инструменты веб-доступности могут помочь вам автоматизировать эту задачу. Такие инструменты, как accessWidget, включают искусственный интеллект для автоматического исправления недоступного кода на вашем сайте.

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

Имейте в виду, что не каждое требование стандарта WCAG может быть автоматизировано. Некоторые из этих требований относятся к тому, как контент передает «значение» пользователям. Проверить это может только человек.

Доступность — это постоянное обязательство

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

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

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