В мире дизайна важно иметь уникальный сайт‑портфолио. Ваша задача — привлечь и удержать внимание аудитории. Будь то рекрутер, клиент или коллега‑дизайнер, удержать пользователя на персональном сайте непросто. Как и многие, я просматриваю портфолио и отмеченные наградами сайты, чтобы вдохновиться или отследить тренды. С каждым новым визитом замечаю что‑то иное: кинетическую типографику, эффекты прокрутки или 3D‑элементы — всё это создаёт уникальный опыт и не даёт отвести взгляд. Но я также вижу недостаток доступности на таких сайтах — особенно в части зацикленных анимаций (GIF) и автозапуска видео. Нажмите Enter или кликните, чтобы открыть изображение в полном размере
Зацикленные анимации и видеоролики с автозапуском могут создавать проблемы с доступностью Для одних пользователей это не беда. Для других — например, для человека с СДВГ или пользователя экранного диктора — такие анимации и видео отвлекают и мешают. Пользователям нужен простой способ останавливать дополнительное движение, чтобы они могли пользоваться вашим сайтом. Конечно, анимация и видео помогают выделить сайт. Они добавляют визуальную ценность и побуждают изучать дальше, но порой ценой помех. К счастью, можно создавать сайты одновременно уникальные и доступные. Рассмотрим несколько Рекомендаций по доступности веб-контента (WCAG), риски непрерывного движения и стратегии интеграции доступной анимации в наши уникальные сайты.
Какие критерии WCAG относятся к анимации?
Я не просто говорю «не используйте анимацию»; при добавлении любого видео или анимации существуют критерии успеха WCAG, которым нужно следовать. Важно понимать эти рекомендации, чтобы ваш сайт был доступен большему числу групп пользователей. Рассмотрим 3 конкретные рекомендации и то, кому они помогают.
Я включил только критерии для соответствия уровню AA, поэтому критерии уровня AAA, такие как Анимации от взаимодействий (SC 2.3.3), не рассматривались.
I. Управление аудио (SC 1.4.2, Уровень A)
• Рекомендация: Любой аудио‑контент, который автоматически воспроизводится более 3 секунд, должен иметь механизм для паузы (остановки) или управления громкостью, не затрагивая системную громкость.
• Пример: Вы открываете портфолио, и в фоне автоматически начинает играть музыка, а вы не можете понять, как её отключить, не заглушив звук на компьютере.
• Кому помогает: Пользователям вспомогательных технологий необходимо слышать свой инструмент, например экранный диктор. Если играет аудио, пользователь может не слышать диктора, поэтому ему нужен способ отключить звук, не выключая скринридер.
• Лучшая практика: Не запускайте аудио автоматически. Если пользователь не инициировал звук, скорее всего, он не хочет его слышать. Нажмите Enter или кликните, чтобы открыть изображение в полном размере
Использование экранного диктора VoiceOver на главной странице Patagonia
II. Пауза, остановка, скрытие (SC 2.2.2, Уровень A)
• Рекомендация: Любой контент, который автоматически движется, мигает или прокручивается и продолжается более 5 секунд, должен иметь механизм для паузы (остановки), если только этот контент не является критически важным для веб‑страницы (например, анимация загрузки при отсутствии другого индикатора прогресса).
• Пример: В портфолио на фоне главной страницы используется зацикленный GIF с морскими волнами, который нельзя приостановить или остановить.
• Кому помогает: Хотя движущийся или мигающий контент отвлекает многих, пользователи с СДВГ или дислексией могут быть особенно дезориентированы и не способны сосредоточиться на другом контенте.
• Лучшая практика: Сомневайтесь в необходимости любого контента, который на веб‑странице автоматически движется или мигает. Если он действительно нужен, обеспечьте пользователю простой способ поставить его на паузу или остановить. Нажмите Enter или кликните, чтобы открыть изображение в полном размере
Главная страница 1% for the Planet содержит видео с автозапуском и видимой кнопкой паузы/воспроизведения
III. Не более трёх вспышек или ниже порога (SC 2.3.1, Уровень A)
• Рекомендация: Ни одна веб‑страница не должна содержать контент, который вспыхивает более 3 раз в секунду. Или, если вспышки присутствуют, они должны быть ниже указанных порогов (низкая контрастность и отсутствие насыщенного красного цвета).
Примечание: «Вспышка» отличается от «мигания», так как это быстрые и повторяющиеся изменения яркости и/или цвета. Вспыхивающий контент сильнее нагружает зрение, чем мигающий.
• Пример: Фильм «Сумерки. Сага. Рассвет: Часть 2» печально известен тем, что во время интенсивной сцены с красными, белыми и чёрными вспышками у людей с фоточувствительной эпилепсией случались приступы.
• Кому помогает: Вспыхивающий контент может вызвать судороги у пользователей с фоточувствительностью, а также головокружение или тошноту у пользователей с вестибулярными расстройствами.
• Лучшая практика: Избегайте любого вспыхивающего контента, чтобы не отвлекать и не прерывать пользовательский поток. Если вспышки необходимы, обеспечьте низкую частоту и интенсивность цвета.
Инструмент анализа фоточувствительной эпилепсии (PEAT) проверяет риски вспышек в веб‑контенте
Риски непрерывного движения
Достаточно уже того, что мы проектируем для инклюзивности, но если вы называете себя «дизайнером, который делает доступные решения», непрерывное движение на сайте подрывает доверие к вам. Или представьте: вы подались на вакансию, где требуются навыки веб‑доступности; явные нарушения WCAG могут свести ваши шансы к нулю.
Получайте статьи Элли Пэскал на почту
Присоединяйтесь к Medium бесплатно, чтобы получать обновления от этого автора. Подписаться Подписаться Но каковы ещё риски использования зацикленных анимаций или автозапуска видео в вашем портфолио?
• Барьер для вспомогательных технологий: Когда контент постоянно анимируется или меняется, вспомогательные технологии, такие как экранные дикторы (например, JAWS), могут работать нестабильно, пока пользователь пытается навигировать по странице.
• Когнитивная нагрузка: Автозапускаемые анимации или видео рассеивают внимание пользователя — усложняя восприятие контента и перегружая органы чувств; это особенно критично для людей с СДВГ, дислексией или аутизмом.
• Чувствительность к движению: Некоторые эффекты движения, например параллакс‑прокрутка и анимации по взаимодействию, вызывают тошноту или головокружение у части пользователей, особенно с вестибулярными расстройствами.
Портфолио Антуана Водняка использует крайне интенсивные анимации и эффекты прокрутки
• Проблемы удобства использования: Пользователям в целом может мешать постоянное движение во время чтения или концентрации на конкретном фрагменте контента. При чрезмерном использовании анимации главная мысль сайта теряется и перестаёт работать.
• Влияние на производительность: Обилие анимаций означает более «тяжёлые» файлы по сравнению со статичными изображениями. Анимациям требуется больше полосы пропускания для рендера, что может замедлять загрузку страниц и повышать показатель отказов.
Главная страница Chipotle содержит несколько автозапускаемых видео, которые нельзя остановить
Стратегии доступной анимации
Вы можете подумать: «Но я люблю анимацию — она помогает моему портфолио выделяться!» И это верно. Анимация вовлекает пользователей и отличает ваш сайт от других, что важно при поиске работы или клиентов на перенасыщенном рынке. Я точно не против движения (и WCAG тоже), но есть грань между доступной и недоступной анимацией. Рассмотрим, как включать анимацию и при этом сохранять доступность портфолио.
• Добавьте кнопку паузы/остановки: Для автозапускаемого контента, такого как GIF или анимированные SVG, предусмотрите простой способ поставить анимацию на паузу. Один из вариантов — видимая кнопка рядом с анимацией.
• Делайте анимации короткими и плавными: Анимации должны быть быстрыми и ненавязчивыми — будь то при загрузке страницы или как отклик на взаимодействие. Например, GIF не должен бесконечно повторяться; он должен остановиться после «n» циклов (в пределах 5 секунд).
Главная страница 1% for the Planet использует короткие анимации и позволяет ставить видео на паузу
• Избегайте автозапуска, если это не критично: Если контент не необходим для работы страницы, как, например, индикатор загрузки, он не должен запускаться автоматически. Пользователь сам должен инициировать анимацию или видео.
• Тестируйте анимации со вспомогательными технологиями: Чтобы убедиться, что анимации не создают препятствий для пользователей, которым нужны специальные инструменты, тестируйте их с помощью экранных дикторов, например VoiceOver (macOS), а также только с клавиатурой (без мыши или трекпада).
• Используйте анимацию с целью: Анимация мощно привлекает внимание; применяйте её осознанно, чтобы направлять пользователя по сайту, но не перегружайте его.
• Учитывайте предпочтения пользователя: Если пользователь предпочитает сниженное или отсутствие движения, сайт должен уважать настройки ОС. Это можно реализовать при помощи медиа‑запроса CSS «prefers-reduced-motion», который определяет предпочтения по движению. Нажмите Enter или кликните, чтобы открыть изображение в полном размере
Match Stoneware позволяет пользователю настраивать параметры доступности
Баланс уникальности и доступности
Анимации и видео — не враги доступности. Проектируя с приоритетом доступности, вы можете создать динамичный и увлекательный сайт‑портфолио, не исключая ни одну группу пользователей. Уникальный UX/UI‑дизайн — это не только «как выглядит», но и «как ощущается при использовании».
Запоминающиеся сайты — это не просто трендовые сайты. Они доступны.
