Доступная веб-анимация: разъяснение положений Руководства по обеспечению доступности веб-контента

No items found.
Аудио перевод статьи
0:00
0:00
·

Да, веб-анимация правда может быть доступной!

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

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

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

Поставь на паузу, останови, скрой

Первая из рекомендаций WCAG, которая применяется непосредственно к анимации, — “Поставь на паузу, останови, скрой”. В этом случае заголовок дает достаточно хорошую подсказку относительно того, о чем идет речь. Рекомендация гласит:

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

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

Как выполнить рекомендацию “Поставь на паузу, останови, скрой”

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

Хорошим примером описанной практики является использование анимаций в серии статей “Темная сторона CSS-гридов”. Каждая анимация повторяется бесконечно, как только вы ее запустили, поэтому на сайте предусмотрены кнопки воспроизведения / остановки, на которые читатели могут нажать, когда хотят увидеть конкретную анимацию или остановить ее после просмотра. Другие анимации в статье, которые носят более декоративный или наглядный характер, воспроизводятся лишь один раз, и при этом предусматривают кнопку, нажав на которую пользователи при желании могут их повторно проиграть. Расположение и дизайн кнопок также соответствуют общей эстетике сайта, что делает их одновременно функциональными и приятными на вид.

Стоит также обратить внимание на анимированные GIF-изображения. Если вы размещаете на сайте зацикленную GIF-анимацию, для соблюдения рекомендаций вам потребуется обеспечить наличие элементов управления, позволяющих запускать анимации и ставить их на паузу. Оба метода, перечисленные в статье “Ставим на паузу GIF-анимацию с помощью HTML-элементов details / summary”, помогут вам в решении этой задачи.

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

Мерцание не чаще трех раз или ниже предельного уровня

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

Принцип “Мерцание не более трех раз или ниже предельного уровня” гласит:

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

Как выполнить рекомендацию “Мерцание не чаще трех раз или ниже предельного уровня”

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

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

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

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

Уровни A, AA и AAA рекомендаций WCAG

WCAG включает несколько уровней критериев и соответствия, поэтому каждая рекомендация сопровождается обозначением того, к какому уровню она относится. Уровень соответствия A является минимальным. Уровень соответствия AA — средний и указывает на то, что соблюдены критерии как для уровня A, так и для уровня AA. Уровень AAA является наивысшим уровнем соответствия и требует удовлетворения критериям всех трех уровней — A, AA, AAA. Как правило, для выполнения рекомендаций уровня AAA требуется приложить дополнительные усилия. (Если вы хотите узнать больше об этих уровнях и о том, что в них включено, кроме рекомендаций, касающихся анимации, рассматриваемых здесь, я составила список полезных ресурсов, который вы можете найти в конце этой статьи.)

Как правило, большинство людей, когда они говорят, что делают доступный веб-сайт, стремятся достичь соответствия уровню AA. Обычно именно такой уровень запрашивается в RFP (запрос предложения — заявка на оказание услуг) или в кратком описании проекта. Последние две рассмотренные нами рекомендации попадают под критерии уровня AA, и поэтому их необходимо выполнить, чтобы можно было заявить о соответствии проекта уровню AA. Однако следующая рекомендация входит в критерии уровня AAA. Несмотря на то, что она выходит за рамки стандартного уровня соответствия, это очень полезная рекомендация, которую следует учитывать, если в вашем проекте используется значительное количество анимаций. Я очень рекомендую применить ее в вашей работе.

Анимация, запускаемая взаимодействиями

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

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

Поначалу словосочетание “анимация движения” может сбивать с толку, так как мы обычно используем термины “движение” и “анимация” как синонимы. Оно может показаться слишком конкретным, но в данном случае такая конкретика имеет смысл. WCAG определяет анимацию движения как анимацию, которая используется для “создания иллюзии движения”, и уточняет, что “анимация движения не включает изменения цвета, размытия или непрозрачности”.

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

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

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

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

Избегать анимаций, в которых нет необходимости

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

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

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

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

Обычно это предполагает наличие на сайте переключателя или настроек, позволяющих пользователям активировать режим уменьшения движения, после чего им будут показаны сокращенные версии анимационных эффектов. Сайт Netlify 1 Million Devs — один из примеров того, как работает переключатель режима движения, аналогичный есть и на официальном сайте Animal Crossing.

Используйте режим уменьшения движения

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

Я писала подробную статью об использовании prefers-reduced-motion в Smashing Magazine, также тема обсуждалась в других статьях на этом сайте. Если вкратце, такой подход позволяет нам получить доступ к предпочтениям пользователя относительно движения на уровне его операционной системы через медиа-запрос. Мы можем сделать это с помощью CSS или JavaScript и использовать полученное значение, чтобы уменьшить движение для тех, кто этого хочет. Например, мы могли бы сделать следующее, чтобы создать версию прыгающей CSS-анимации с уменьшенным движением:

https://codepen.io/valhead/pen/c70f46d599cfba7fefae8e6fa3132b82 — ссылка на пример

На некоторых сайтах разработчики предпочитают одновременно использовать как кастомный переключатель, так и режим уменьшения движения. Если вы заходите на такой сайт, а в настройках вашей операционной системы выбран режим уменьшения движения, сайт автоматически предоставит вам версию с сокращенным движением. Такой двусторонний подход — отличная стратегия для сайтов с большим количеством анимаций. Марси Саттон объясняет основы реализации такого подхода в своем курсе egghead.io, а также в этом примере на CodePen

Используйте эти рекомендации в работе над следующим анимационным проектом

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

Хотя основной темой этой статьи являются рекомендации, касающиеся движения на сайте, анимация — не единственный аспект нашей работы, где имеют большое значения вопросы доступности. Есть несколько отличных ресурсов, которые дают более целостное представление о доступности. Один из моих любимых — книга Лауры КальбагДоступность для всех”. Такие сайты, как WebAIM и A11y Project содержат ссылки на множество источников информации по теме. Если вы часто используете в своей работе SVG-анимации, статья Хизер о доступности SVG также может быть для вас полезной. Я настоятельно рекомендую ознакомиться с этими ресурсами, если вы не сделали этого раньше.

Источник:
css-tricks.com
·
comments powered by HyperComments