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

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

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

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

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

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

1. “Пауза, стоп, скрыть”

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

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

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

Однако все-же существуют привычные паттерны, в которых эта рекомендация может быть применима, а именно:

• карусели или слайд-шоу с автоматической сменой изображений; 
• анимированные фоны;
• иллюстрации. 

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

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

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

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

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

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

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

3. Мигание не более трех раз или ниже порога

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

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

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

4. Как соответствовать рекомендации “Мигание не более трех раз или ниже порога”

WCAG предоставляет подробную информацию о следующих параметрах:

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

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

Одним из конкретных примеров дизайна, включающего мигание больше трех раз за секунду, является статья из Huffington Post, представленная на изображении ниже. Это очень стилизованная статья, в которой говорится о том, что миллениалам (людям, родившимся в период с 1985 по 2003 годы) труднее справляться с вопросами, касающимися работы и пенсионных накоплений, по сравнению с предыдущими поколениями. 

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

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

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

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

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

Так, ранжирование уровней соответствия выглядит следующим образом:

• Уровень соответствия A — минимальный;
• Уровень соответствия AA — средний и указывает на то, что соблюдены критерии как для уровня A, так и для уровня AA. 
• Уровень соответствия AAA — наивысший и требует соблюдения критериев всех трех уровней — A, AA, AAA. 

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

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

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

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

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

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

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

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

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

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

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. 

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

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

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

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

Я настоятельно рекомендую ознакомиться с этими ресурсами, если вы не сделали этого раньше.