Обеспечение доступности попапов: лучшие практики, проблемы и решения

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

Вам также может понравиться

Почему цифровая доступность важна и как начать работу над ее обеспечением

Лучшие практики по созданию доступных попапов

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

1. Уведомляйте пользователей о появлении попапа

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

2. Обеспечьте правильную фокусировку клавиатуры

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

3. Разрешите легкое закрывание

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

4. Откажитесь от запуска попапов по наведению

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

5. Отключите скроллинг сайта

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

6. Убедитесь в доступности всего контента попапа

• цветовой контраст для текста и пользовательского интерфейса: соблюдайте коэффициент контрастности 4,5:1 для текста размером менее 18 px bold или 24 px normal. Для более крупного текста требуется минимальный коэффициент контрастности 3:1 между шрифтом и фоном;
• разборчивые шрифты: используйте удобочитаемые, масштабируемые шрифты, которые подходят для пользователей с нарушениями зрения; не используйте курсив и подчеркивание, за исключением выделения ссылок;
• доступность клавиатуры:
  • все интерактивные элементы (кнопки, ссылки, поля форм) должны быть доступны для навигации с помощью клавиатуры;
  • индикаторы фокуса должны быть хорошо видны при переключении вкладок;
• совместимость со скринридером:
  • важный контент должен быть правильно объявлен с помощью ролей ARIA или alt-текста;
  • кнопки призыва к действию должны иметь осмысленные надписи, а ссылки должны быть правильно идентифицированы;
  • изображения должны содержать соответствующий alt-текст, описывающий их назначение в попапе.

7. Эффективно обрабатывайте сообщения или валидацию форм

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

8. Разрешите изменение размера и оставьте полосы прокрутки включенными

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

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

Вам также может понравиться

Лучшие практики для попапов на мобильных устройствах

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

Юлия Журавлева, Head of Content компании Claspo, делится инсайтами и лучшими практиками, позволяющими сделать мобильные попапы доступными и удобными для пользователей.

Эксперт

Юлия Журавлева

Head of Content в Claspo

1. Адаптация к ограничению экранного пространства

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

2. Улучшение взаимодействия с тачскрином

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

3. Оптимизация быстродействия и скорости загрузки

• уменьшите размер файлов и оптимизируйте объекты попапов для быстрой загрузки;
• скройте большие изображения на мобильных устройствах, но оставьте их для пользователей десктопов;
• протестируйте работу попапов в различных сетях (Wi-Fi, 4G, 5G), чтобы обеспечить удобство использования при медленном соединении.

Рекомендации по созданию попапов для глобальной аудитории

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

Юлия Журавлева, Head of Content в Claspo, делится ключевыми рекомендациями, которые помогут сделать попапы доступными и эффективными во всем мире.

Эксперт

Юлия Журавлева

Head of Content в Claspo

1. Обеспечьте доступность языка

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

2. Поддерживайте разные виды типографики и текста

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

3. Создавайте дизайн с учетом культурных особенностей

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

eBook

Effective multilingual email marketing

 

Разработка доступных попапов

Существует два способа создания доступных попапов:

Вариант 1. Создание с нуля

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

Вариант 2. Использование конструктора попапов

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

Инструменты для создания доступных попапов

Цветовой контраст:

1. Coblis (color blindness simulator): моделирует восприятие изображений пользователями с различными типами дальтонизма.
2. Accessible Colors: оценивает контрастность текста и дизайна (для изображений требуется ручной ввод).
3. WebAIM: оценивает коэффициент контрастности текста и графических элементов.
4. Lea Verou's Contrast Checker: позволяет вводить цвета вручную или выбирать их для проверки контрастности с помощью визуального просмотра.
5. Stark: плагин для Figma, Sketch, FigJam и Adobe XD, обеспечивающий анализ контраста в реальном времени в процессе дизайна.

Конструкторы попапов

1. Claspo: конструктор попапов с функциями доступности, кастомизацией макета, контрастностью, шрифтами и мультиязычной поддержкой.
2. Popup Maker: инструмент для создания пользовательских попапов с опциями доступности, включая навигацию с клавиатуры и совместимость со скринридерами.

Вам также может понравиться

Проблемы использования доступных конструкторов попапов

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

Эксперт

Юлия Журавлева

Head of Content в Claspo

1. Пересечение взаимодействий

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

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

2. Кроссбраузерные несоответствия

Проблема: попапы могут вести себя по-разному в разных браузерах из-за различий в способах отображения HTML, CSS и JavaScript. Это может привести к таким проблемам, как неправильное расположение элементов, сломанная анимация или недоступное взаимодействие.

Решение: тестируйте попапы во всех основных браузерах (Chrome, Firefox, Safari, Edge). Некоторые конструкторы попапов допускают кастомизацию для исправления проблем с макетом и функциональностью без кодинга. Например, можно настроить отступы, поля или выравнивание, чтобы исправить проблемы с компоновкой. Допустим, в Edge анимация попапов дергается или не запускается. Вы можете переключиться на более простые анимации в редакторе, поскольку Edge может не полностью поддерживать сложные переходы или кадры.

В завершение

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

Основные выводы:

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

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