Ресурс для веб-разработчиков и CSS-галерея

CSS, веб-стандарты, javascript

CSS, веб-стандарты, javascript

Рекомендации по доступным (accessible) рекламным Flash-баннерам Автор: Web Access Centre Blog

тэги Flash Accessibility
Несколько советов по изготовлению рекламных Flash-баннеров. А так же информация по тестированию, совместимостью с WCAG, оперированию Flash при помощи Jaws и WindowEyes и многое другое.

Вот несколько наших лучших советов по изготовлению рекламных Flash-баннеров. Я также включил сюда информацию по тестированию, совместимостью с WCAG, оперированию Flash при помощи Jaws и WindowEyes и некоторые дополнительные источники.

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

1. Обеспечьте текстовый аналог для анимации.

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

Когда рекламный Flash-баннер делается из доступных изображений, есть два варианта на выбор: сделать всю анимацию доступной как один объект или сделать индивидуальный доступ к отдельным графическим элементам в баннере. Сценарий первый: Если каждый графический элемент в рекламном Flash-баннере сам по себе не имеет значения, тогда всему фильму необходимо предоставить альтернативу. Это можно осуществить при помощи Accessibility Panel (панели доступа) или при помощи ActionScript.

Чтобы обеспечить единый текстовый аналог для Flash-анимации, сначала убедитесь, что в фильме ничего не выбрано. Если вы использует Accessibility Panel, выберите «Make movie accessible», убедившись, что с опции «Make child objects accessible» метка снята, потом дайте объекту имя или описание. Сценарий второй: Если все объекты несут отдельное значение для Flash-анимации, тогда каждому из них необходимо дать имя или описание.

Если вы использует Accessibility Panel, выберите «Make object accessible», убедившись, что с опции «Make child objects accessible» метка снята, потом дайте объекту имя или описание. Имена и описания: Так же, как и текст с альтернативой, имя и описание должны быть краткими, лаконичными и по существу. В типичных случаях Name используется для кратких описаний, а Description для более длинных (подобно атрибутам alt и longdesc в HTML). Программы экранного доступа, однако, не различают Names и Descriptions и по умолчанию будут читать оба параметра, поэтому не рекомендуется использовать и тот и другой, поскольку это может привести к перегрузке или повторению информации для пользователя.

При выборе между Name и Description следуйте тем же правилам, применимым к альтернативному тексту. Так как рекламный Flash-баннер, как правило, ссылается на другие страницы или сайты, убедитесь в том, что пользователь поймет, куда приведет ссылка. Избегайте избыточного текста ссылки, например, «Link to…», «Click here to…», «Image of…» и т.д.

2. Позаботьтесь об альтернативе для Flash-анимации

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

Изображение рекламного баннера должно соответствовать стандартным правилам изображений:

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

3. Читабельность

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

Контраст цветов: цвета должны иметь коэффициент контрастности хотя бы 5:1. Текст более крупного масштаба может иметь коэффициент контрастности 3:1. Больший текст — это текст размером минимум в 18 пт, если текст обычный, и хотя бы 14 пт, если текст жирный.

Информация, передаваемая при помощи цветов: избегайте передачи информации цветами, поскольку её невозможно будет прочитать программой экранного доступа при использовании браузера в черно-белом режиме.

Размер шрифта: Шрифт должен быть достаточно большим для удобства чтения. В отличие от HTML, не всегда предоставляется возможным увеличить размер шрифта в рекламном Flash-баннере, поэтому рекомендуется выбрать больший шрифт. Все, что больше 18 пт, считается приемлемым. Для повышения читабельности всегда полезно сделать шрифт жирным.

Стиль шрифта: Придерживайтесь сохранения читабельности текста путем выбора сетевых безопасных стилей, например, Verdana или Arial, и избегайте курсива и выровненного текста. Если размеры шрифта больше, тогда среди стилей возможна большая гибкость, но они все равно должны быть четко читаемыми.

4. Цикличность и мигание.

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

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

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

Цикличность: Любая анимация должна длиться в общей сложности не более 20 секунд. К тому же, повторяющийся контент не должен иметь больше, чем три цикла. Этого можно достигнуть путем выполнения следующих пунктов:

  • Контроль количества кадров в анимации.
  • Там, где необходимо несколько кадров, сделайте только два цикла.
  • Мигание: Скорость и цвет контента может заставить анимацию мигать, что в крайних случаях может стать причиной стробирующего эффекта, опасного для людей со светочувствительной эпилепсией. Чтобы избежать этого:
  • Контент не должен мигать больше, чем 3 секунды.
  • Контент не должен содержать ничего, что бы вспыхивало более трех раз за любой промежуток в 1 секунду.

5. Протестируйте перемещение

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

Чтобы протестировать Flash, используя ОС Windows и браузер Internet Explorer, загрузите бесплатный экземпляр программы экранного доступа, например, Window Eyes from GW Micro или JAWS from Freedom Scientific. Выключите монитор, слушайте Flash-объявления и убедитесь, все ли понятно.

Чтобы протестировать альтернативу рекламному баннеру, уберите поддержку Flash в своем браузере. В Internet Explorer 6, деактивируйте поддержку ActiveX или установите настройки безопасности на параметр «High». В Internet Explorer 7 и Firefox временно деактивируйте Flash или Shockwave Flash Add-on. Проверьте параметр замены изображения и соответствующий альтернативный текст путем выключения поддержки изображений

6. Соответствие с WCAG

WCAG 1.0: Во времена написания WCAG 1.0 остается неизменной графическая версия рекомендаций WAI по доступному веб-дизайну.

1.1 Альтернативы: Обеспечьте текстовый аналог для каждого нетекстового элемента.

2.1 Цвет и информация: Убедитесь в том, что вся информация, переданная в цвете, также доступна в версии без цвета, например, из контекста или разметки.

2.2: Контраст: Убедитесь, что комбинации цветов заднего и переднего плана обеспечивают достаточный контраст.

7.1 Мерцание: До тех пор, пока агент пользователя позволяет контролировать мерцание, избегайте мерцания экрана.

7.2: До тех пор, пока агент пользователя позволяет контролировать мигание, избегайте мигания экрана.

7.3 Перемещение: До тех пор, пока агент пользователя позволяет фиксировать подвижный контент, избегайте перемещений в страницах. Приоритет 2.

11.4 Альтернативные версии: если даже после вы не можете создать доступную страницу, тогда создайте ссылку на альтернативную страницу, которая использует технологии W3C, доступна, имеет равноценную информацию (или функциональные возможности), и обновляется так же часто, как и недоступная (исходная) страница often as the inaccessible. Приоритет 1.

13.1 Текст ссылки: Четко обозначьте целевой объект каждой ссылки.

WCAG 2.0 в данным момент существует в черновом варианте, однако является полезным для посылания на методы, рассказывающие как соответствовать рекомендациям:

1.1.1 Текстовые аналоги: Обеспечьте альтернативы для всего нетекстового контента.

1.3.2 Любая информация, передаваемая цветом, также должна визуально быть ясной и без цвета. 1.4.1 Цвет: Цвет не используется только как визуальный способ передачи информации, указание действия, подсказки ответа или различия визуального элемента.

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

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

2.4.4 Текст ссылки: назначение каждой ссылки может быть определено отдельно из текста ссылки, или же из текста ссылки вместе с программно определенным контентом ссылки за исключением случая, если в общем назначение ссылки будет двусмысленным для пользователя. (Уровень A)

7. Оперирование Flash при помощи программы экранного доступа:

Команды JAWS / команды Flash-клавиатуры следующие:

  • insert + escape = обновить экран
  • down arrow = читать следующий элемент
  • up arrow = читать предыдущий элемент
  • insert + down arrow = читать все
  • right arrow = читать следующий символ
  • left arrow = читать предыдущий символ
  • enter = активировать ссылку

Команды WindowEyes / команды Flash-клавиатуры следующие:

  • tab = следующая ссылка
  • control + tab = предыдущая ссылка
  • down arrow = читать следующий элемент
  • up arrow = читать предыдущий элемент
  • page down = читать все
  • page up = вверх
  • right arrow = читать следующий символ
  • left arrow = читать предыдущий символ
  • enter = активировать клавишу ссылки
  • control + shift + A = переключить режим MSAA в обновление экрана
  • Заметьте, что графические браузеры не поддерживают Flash.

Немного ссылок:

  • Adobe Accessibility Centre — Adobe?s resource for accessible Flash, PDF and other products
  • Best Practices for Accessible Flash Design — a tutorial from Adobe using Flash Paper
  • Making Flash Accessible — a tutorial from Access E-Learning
  • Multimedia Accessible Flash — some tips from our own Web Access Centre
  • Creating Accessible Macromedia Flash Content — a tutorial from WebAim
Оригинал статьи → http://www.rnib.org.uk/wacblog/flash/accessible-flash-banner-ad-guidelines/

Написать комментарий




Ввод HTML запрещен!!Введите текст с изображения:* проверка на работа
* — поля обязательные к заполнению!

Комментарии (0)



Сделано в 127.ru