Как сделать ваш опыт после клика доступным для всех, следуя стандартам соответствия ADA и WCAG

Сколько рекламодателей думают о доступности Интернета при создании целевых страниц после клика?

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

Убедитесь, что ваши страницы после клика соответствуют ADA и WCAG - это способ обеспечить доступность для всех.

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

Что влечет за собой соответствие онлайн-требованиям ADA?

Закон об американцах с ограниченными возможностями (ADA) был принят в 1990 году с целью положить конец дискриминации по признаку различных способностей. Конкретные требования для соответствия требованиям обычно немного расплывчаты и сбивают с толку, поскольку ADA явно не рассматривает онлайн-соответствие.

Тем не менее, в качестве руководства можно обратиться к наиболее полным рекомендациям по созданию и поддержке доступных веб-сайтов - Руководству по обеспечению доступности веб-контента (WCAG), опубликованному W3C.

Что такое WCAG?

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

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

WCAG имеет три версии:

• WCAG 1.0 был разработан в 1999 году.
• WCAG 2.0 был опубликован в 2008 году.
• WCAG 2.1 был создан в июне 2018 г.

Версия 2.1 включает 17 новых критериев успеха (подробнее об этом ниже), из которых проблемы доступности разделены на четыре отдельные группы в соответствии с рекомендациями WCAG. Эти проблемы можно резюмировать с помощью аббревиатуры POUR:

• Воспринимаемый: все ли пользователи воспринимают контент на странице?
• Работоспособен: могут ли все пользователи взаимодействовать со страницей?
• Понятный : все ли пользователи понимают содержание страницы?
• Надежность: может ли контент интерпретироваться широким спектром программ и устройств, включая программы чтения с экрана?

В руководстве WCAG вопросы доступности и рекомендации разбиты на три уровня:

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

Как сделать доступными целевые страницы после клика?

Вот девять способов обеспечить соответствие страниц после кликов стандартам доступности:

1. Сделайте вашу страницу удобной для клавиатуры: посетители должны иметь возможность перемещаться по вашей странице после щелчка, даже если у них нет мыши, используя только клавишу «Tab» на клавиатуре. Это помогает аудитории, использующей вспомогательные технологии, перемещаться и прокручивать страницу, а также нажимать кнопку CTA.

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

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

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

5. Используйте заголовки для структурирования содержимого: H1, H2 и H3 помогают структурировать вашу копию и упрощают интерпретацию пользователями.

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

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

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

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

Как вы можете проверить, соответствует ли ваша страница ADA и WCAG

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

Бюро доступности Интернета

BOIA позволяет рекламодателям проверять, соответствуют ли их страницы стандартам доступности:

AudioEye

AudioEye бесплатно сканирует вашу страницу и оценивает ее доступность:

Улучшить сайт

Siteimprove проверяет доступность вашей страницы и обеспечивает автоматическое тестирование, которое соответствует стандартам WCAG:

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

Инструмент оценки волн

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

UserWay

Рекламодатели могут загрузить виджет UserWay, чтобы оценить решения по обеспечению доступности страниц без рефакторинга существующего кода, что обеспечивает всеобъемлющую нормативно-правовую базу соответствия, охватывающую ADA, Раздел 508 и WCAG 2.1 AA.

Виджет доступен для всех ведущих платформ CMS, а также для обычных сайтов HTML / CSS / JS. Инструмент предлагает важные функции доступности и широкий выбор функций, которые пользователи могут комбинировать и подбирать для удовлетворения своих индивидуальных потребностей в доступности:

Пицца Круглого стола имеет виджет UserWay для обеспечения доступности. Сначала с помощью направляющей линии чтения, а затем инвертирования цветов на экране:

ChromeVox

ChromeVox - это программа чтения с экрана, которая обеспечивает скорость, простоту и безопасность Chromebook пользователям с нарушениями зрения. ChromeVox предустановлен на Chromebook, но его можно загрузить как расширение.

Расширение выделяет каждый раздел страницы и зачитывает его вслух для пользователя:

Что вы можете сделать в Instapage, чтобы обеспечить соблюдение нормативных требований

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

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

Установление языка страницы с помощью атрибута lang является требованием WCAG, и это приносит пользу пользователю двумя способами:

1. позволяет службам перевода, таким как Google Chrome, работать правильно
2. атрибут сообщает программам чтения с экрана, как правильно произносить содержимое страницы

Сделайте ваши страницы после кликов доступными для всех

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

Чтобы узнать больше о создании доступных, персонализированных целевых страниц после щелчка в любом масштабе, запросите демонстрацию Instapage Enterprise сегодня.