Да, веб-анимация может быть доступна! Иногда просто требуется немного дополнительных усилий, чтобы убедиться, что это так. Есть стратегические меры, которые мы можем сделать, чтобы убедиться, что наша анимация положительно повлияет на доступность, например спланировать, как они способствуют общему UX и простоте использования нашего сайта. Есть также более тактические соображения, чтобы убедиться, что анимация на нашем сайте доступна, и именно здесь на помощь приходят Правила доступности веб-контента (WCAG).
Хотя различные контексты могут влиять на детали того, что вам нужно делать, WCAG предоставляет ряд рекомендаций для анимированного контента и взаимодействий. К ним относятся рекомендации о том, когда следует предоставлять элементы управления паузой и воспроизведением, ограничения для мерцания или мигания экрана, а также советы о том, когда следует предоставлять уменьшенные параметры движения для пользователей с чувствительностью к движению. Если вы давно не обращали на это внимания, спецификация была обновлена до версии 2.1 и теперь содержит еще более полезные инструкции о том, как мы можем создавать доступные веб-анимации.
Давайте рассмотрим каждую из этих рекомендаций более подробно, чтобы увидеть, как мы можем применить их в нашей работе в Интернете:
Содержание статьи
Пауза, Стоп, Скрыть
Первой из рекомендаций WCAG, которая применяется конкретно к анимации, является «Пауза, Стоп, Скрытие». Для этого заголовок дает довольно большую подсказку о том, о чем идет речь. В нем говорится:
Для любой движущейся, мигающей или прокручивающейся информации, которая (1) запускается автоматически, (2) длится более пяти секунд и (3) отображается параллельно с другим контентом, есть механизм, позволяющий пользователю приостанавливать, останавливать или скрывать его, если движение, мигание или прокрутка не являются частью деятельности, где это необходимо; […]
Рекомендация особенно применима к движению, инициированному веб-страницей без взаимодействия с пользователем, и поначалу может показаться, что это не относится к работе анимации пользовательского интерфейса. Большая часть длительностей, которые мы можем использовать в анимации пользовательского интерфейса, по отдельности намного меньше этого пятисекундного порога. Но есть несколько общих закономерностей, где это применимо. Например: карусели или слайд-шоу с автоматическим продвижением, анимированные фоны или анимированные иллюстрации. Хотя каждая отдельная анимация в этих шаблонах может быть очень короткой, общее создаваемое движение часто длится более пяти секунд. Это особенно верно, когда они предназначены для воспроизведения в бесконечном цикле, который определенно длиннее пяти секунд.
Как выполнить критерии паузы, остановки, скрытия
Если у вас есть некоторые из этих более длительных анимаций, вам нужно будет добавить какие-то элементы управления паузой и воспроизведением, которые позволят пользователям контролировать движение и / или автоматическое воспроизведение. Спецификация WCAG не определяет, как должны выглядеть эти элементы управления, вы полностью контролируете их дизайн.
Хорошим примером этого на практике является то, как в серии статей «Темная сторона сетки» обрабатываются примеры анимации. Каждая анимированная фигура зацикливается на бесконечном цикле после запуска, поэтому они предоставляют читателям кнопку воспроизведения / остановки для воспроизведения анимации, когда они хотят ее увидеть, и остановки, когда они будут готовы. Другие, более декоративные или иллюстративные анимации в статье воспроизводятся один раз, а затем представляют собой кнопку для их воспроизведения, если пользователи захотят. Расположение и дизайн кнопок также соответствует эстетике общего дизайна изделия, что делает их функциональными и эстетичными.
Анимированные GIF-файлы тоже заслуживают внимания. Если у вас есть зацикленный анимированный GIF-файл, для успешного соответствия этим критериям потребуются какие-то элементы управления паузой / воспроизведением. Оба метода, упомянутые в этом посте, помогают в этом.
Есть некоторые исключения из этой рекомендации, как отмечает WCAG. Особо следует отметить одно исключение — загрузчики и прелоадеры.
Три вспышки или ниже порога
Эта рекомендация, вероятно, является основанием для большинства исследований, поскольку она восходит к временам эфирного телевидения. Основная причина этой рекомендации заключается в том, что, как известно, значительное мигание на экране вызывает приступы.
Кратко три вспышки или состояния ниже порога:
Веб-страницы не содержат ничего, что мигает более трех раз за любой период в одну секунду, или вспышка ниже общих пороговых значений вспышки и красной вспышки.
Как выполнить критерии трех вспышек или ниже порогового значения
WCAG предоставляет подробную информацию о размере, соотношении сторон и углах обзора, при которых мигание экрана можно считать безопасным. Но для большинства из нас, вероятно, проще всего избежать всего, что мигает более трех раз за одну секунду. Я не думаю, что многие UX-дизайнеры намеренно намеренно чрезмерно мигают экраном, но такое бывает. Например, дизайн, похожий на видеоигру или вызывающий сбой, может включать в себя мигание экрана, которое происходит чаще, чем три раза в секунду.
Одним из конкретных примеров дизайна, который включает в себя значительное количество миганий, является эта статья из Huffington Post, изображенная ниже. Это сильно стилизованная статья о том, как миллениалам труднее справляться с такими вещами, как работа и накопления на пенсию, чем предыдущим поколениям. Его глючный 8-битный дизайн видеоигры очень соответствует теме статьи. С точки зрения дизайна, это отличный выбор для тематики, и он хорошо выполнен. Но бывают случаи, как вы можете видеть на покадровых кадрах ниже, когда цвет текста мигает более трех раз в секунду.
Такое количество миганий может быть проблематичным для людей с эпилепсией или другими физическими реакциями, вызванными миганием. К их чести, Huffington Post также предоставил текстовую версию статьи для всех, кто чувствителен к миганию, как упоминает Эйлин в этом посте, а также предварительное предупреждение о потенциальной опасности мигания.
В целом, избегание эффектов, требующих частого мигания, является самым безопасным способом соответствовать этим критериям. Однако, если вы не можете избежать мигания анимации в своем проекте, WCAG предоставляет подробные инструкции относительно безопасных пороговых значений для мигания экрана. Также неплохо было бы предоставить расширенное предупреждение о мигающем контенте и альтернативную версию контента без мигающего эффекта (как в примере выше).
Уровни A, AA и AAA WCAG
WCAG имеет несколько уровней критериев и соответствия, поэтому в каждой рекомендации указано, к какому уровню она относится. Уровень соответствия — это минимальный уровень соответствия. Уровень AA является средним уровнем соответствия и указывает, что критерии для уровня A и AA были выполнены. Уровень AAA является наивысшим уровнем соответствия и требует соответствия критериям уровня A, AA и AAA. Как правило, для выполнения руководящих принципов уровня AAA требуются дополнительные усилия. (Если вы хотите узнать больше об этих уровнях и о том, что в них включено, помимо рекомендаций по анимации, которые мы здесь рассматриваем, я составил список полезных ресурсов в конце этой статьи.)
В целом, большинство людей стремятся к уровню соответствия AA, когда говорят, что делают доступный веб-сайт. Это также уровень, который вы можете увидеть запрошенным в RFP или кратком описании проекта. Последние два руководства, которые мы обсуждали, подпадают под критерии уровня AA и, следовательно, должны быть выполнены, чтобы заявить о соответствии уровню AA. Следующее руководство, однако, является частью критериев уровня AAA. Несмотря на то, что это выходит за пределы типичного уровня соответствия, это очень полезная рекомендация, которую следует учитывать, если ваш проект в значительной степени зависит от анимации. Я очень рекомендую применять его в своей работе.
Анимация из взаимодействий
Это руководство охватывает другой вид анимации, чем предыдущие два. Первые два обычно применяются к анимации, инициируемой самой веб-страницей, а этот применяется к анимации, инициированной взаимодействием с пользователем. В частности, в нем говорится:
Анимацию движения, запускаемую взаимодействием, можно отключить, если только анимация не является существенной для функциональности или передаваемой информации.
При первом чтении термин «анимация движения» может сбивать с толку, поскольку мы обычно используем термины «движение» и «анимация» как синонимы. Сначала это может показаться излишне конкретным, но в данном случае имеет смысл указать именно это. WCAG определяет анимацию движения как анимацию, которая используется для «создания иллюзии движения», и указывает, что «анимация движения не включает изменения цвета, размытие или непрозрачность».
По сути, термин анимация движения используется для обозначения того, что одни типы анимации создают ощущение движения, а другие нет. Это руководство касается именно тех анимаций, которые создают ощущение движения. При обсуждении анимации и доступности важно помнить об этом различии, чтобы вы могли эффективно сосредоточить свои усилия. Если бы мы выразили это различие в диаграмме Венна, очень похожей на глазное яблоко, это выглядело бы так: