На днях предложили протестировать рекламу, а перед этим довелось посмотреть доклад на SQADays-24 "
Manual and Automated Accessibility Implementation". Индиец, конечно, в своём духе перескакивал с темы на тему, но из множества его мыслей скомпоновался нижеследующий cheat-sheet для тестирования доступности. Начинать, изучать и закреплять тестирование доступности лучше всего на рекламных проспектах и роликах. Мы все её потребители, а вдобавок ещё и имеем профессиональный взгляд тестировщика. Цель любой рекламы - доступно донести до потенциального потребителя продукта много важной информации, то есть тест на доступность - первоочередной для рекламы.
Доступная реклама = польза информации производителю и потребителю.
Доступность программного обеспечения тестируют для того, чтобы:
-
любой пользователь смог
полноценно работать в вашем десктопной программе, на вашем сайте, в ваших web- и мобильном приложениях;
- к вашему продукту
не было судебных исков из-за несоблюдения законодательств;
-
расширялся круг пользователей за счёт людей с ограниченными физическими возможностями;
- пользователи,
привыкшие к определённым действиям, не отвергали ваш продукт по причине несоответствия
общепринятым стандартам, их
привычкам и приоритетам;
- в гонке за
хайпом и новомодным интерфейсом
не затерялся основной
функционал, предназначение продукта;
- вовремя проводить
профилактику багов, предотвращая невозможность ввода и просмотра данных, как обычными пользователями, так и людьми с физическими ограничениями.
Большинство пунктов cheat-sheet accessibility основано на WSAG
принципах:
Да, тест доступности - часть
юзабилити и
интерфейсного тестов, местами похож на
негативный, но, если заглянуть в руководство WCAG и проанализировать статистику экранов пользователей, он превращается во вполне
положительный.
В своём списке мне хотелось бы ограничиться такими пунктами, которые были бы адекватны для
всех типов приложений и не претендовали на стандарты для особых пользователей. Это скорее смоук-тест доступности, а не обязательные проверки для получения сертификата. К слову сказать, с 2002 года мной был собран
список того, что подлежит обязательной проверке перед передачей продукта на тестирование. В нём были многие пункты из ниже перечисленных, а каждый добавлялся после случая на стороне конечного пользователя. Так что, это не утопия, а реальные вещи, которые надо проверять в рамках позитивных тестов, несмотря на то, что эти параметры не включены в системные требования конкретно вашего продукта. Если
начальство начнёт сопротивляться: "Негативные тесты - это излишество.
Стартапу не по-карману!", то вашим аргументом будет фраза: "Наш продукт, по Вашему
требованию, соответствует общепринятым мировым стандартам после прохождения теста доступности."
По
cheat-sheet accessibility можно идти
турами, поскольку группировка отлична от WCAG принципов. В пояснениях даны примерные места проверок, куда заглянуть во время очередного "путешествия". А также перечислены пункты и уровни из положения о доступности. По-моему, некоторым пунктам в положении явно завысили уровень, так как поведение программы в этих случаях более чем очевидное и ожидаемое.
1.
ТЕКСТ
1.1.
размер шрифта и межстрочный интервал (слипшийся мелкий текст во всю ширину экрана 9х16 вряд ли кто-то дочитает до конца, огромные заголовки принижают значимость основного текста или вынуждают много прокручивать экран, все символы и интервалы зуммируются пропорционально) - п.1.4.4(АА), 2.4.10(ААА), 1.4.12(АА);
1.2.
цвет основного текста и подложки, контрастность (рекламные объявления для консистентности с логотипом могут быть в старославянском коричневом шрифте на "а-ля папирусе" бежевого цвета, либо детский сайт использует розовенькие буковки на жёлтенком коврике)- п.1.4.3(АА), 1.4.5(АА), 1.4.6(ААА), 1.4.8(ААА);
1.3.
перевод на региональный язык (полное переключение и дублирование в титрах, быстрое и точное осознание содержимого может быть только на родном языке) - п.1.3, 1.3.1(А), 1.3.2(А), 1.4, 3, 3.1.1(А), 3.1.2(АА);
1.4.
восприятие смысла (краткость и однозначность терминов всегда способствовали взаимопониманию, расшифровки аббревиатур, глоссарий, контекстная помощь) - п.1, 1.3.1(А), 3, 3.1, 3.1.3(ААА), 3.1.4(ААА), 3.1.6(ААА), 3.3, 3.3.5(ААА), 4.1.2(А);
1.5.
восприятие синтаксиса, лингвистики (в инструкциях пользователя строго не рекомендуется использовать сложно-подчинённые предложения, язык Достоевского уместен только в классической литературе) - п.1, 3, 3.1, 3.1.5(ААА), 3.1.6(ААА), 4.1.2(А);
1.6.
пропорциональное масштабирование надписей (изменение DPI, разрешения экрана, использование зуммирования не должны существенно искажать пропорции интерфейсных элементов и их подписей) - п.1.4.4(АА);
1.7.
наличие видимых подписей всех элементов интерфейса (новомодная фича сайтов - перекинуть название окон ввода данных в сами редакторы до момента начала набора символов, оставляя пользователя только догадываться о полноценности вводимых данных) - п.1.4.5(АА), 1.4.9(ААА), 3.2.2(А), 3.2.4(АА), 3.3, 3.3.2(А), 4.1.2(А), 2.5.3(А);
1.8.
изменение пользователем цвета текста и фона, размера шрифта пропорционально зуму - п.1.4.8(ААА).
2.
КУРСОР, КООРДИНАТЫ, МАСШТАБИРОВАНИЕ
2.1.
расположение элементов сверху-вниз, слева-направо или регионально справа-налево, снизу-вверх, ландшафтно или портретно, совпадение точек верх-низ экрана с положением монитора - п.1.3.2(А), 1.4, 2.4.3(А), 3.2, 3.2.3(АА);
2.2.
пометка обязательных к заполнению полей, подсказка формата поля (шаблон даты, звёздочки замены, разделитель e-mail) - п.3.2.2(А), 3.3, 3.3.2(А), 1.3.4(АА), 1.3.5(АА), 2.5.6(ААА);
2.3.
вместимость всех важных, сгруппированных элементов в единый кадр, прокрутку - п.1.3.2(А), 1.4, 1.4.8(ААА), 2.4, 3.2.4(АА), 3.3;
2.4.
удержание подсказки курсором (окно хинта не исчезает пока в его области активен курсор) - п.2.1.3(ААА);
2.5.
управление курсором - клавиатура реальная и остальные инструменты (вспомогательная клавиатура, мышь, сенсорная панель или сам экран, джойстик, видеорегистратор, шлем телепатии)
взаимозаменяемы - п.2, 2.1, 2.1.1(А), 2.1.2(А), 2.1.3(ААА), 2.4, 2.4.3(А), 2.5.1(А), 2.5.4(А), 2.5.6(ААА);
2.6.
подсветка текущего курсора не пересекается с иными пометками и выборками (визуализация фильтрации и изменения данных, навигация в деревьях и схлопывающихся окошках опций, действия между нажатым и отжатым курсором обратимы) - п.2.4.7(АА), 2.4.8(ААА), 3.2.1(А), 3.2.2(А), 1.4.13(АА), 2.5.2(А), 2.5.6(ААА);
2.7.
встроенные лупа, зуммер или глобальная смена DPI масштабирует весь контент пропорционально (жёстко-заданный, а не пропорциональный, размер шрифта может не среагировать на изменения пользователя) - п.1.4.4(АА), 1.4.8(ААА);
2.8.
прокрутка вертикальная, горизонтальная, диагональная (мышью, клавиатурой, сенсорным устройством, джойстиком) - п.1.4.10(АА);
2.9.
минимальные размеры окон и размещаемых на них элементов (полноценная видимость при DPI-100%, наличие скроллеров при увеличении DPI до 200% и разрешении 600*800 пикселей) - п.2.5.5(ААА).
3.
ИЗОБРАЖЕНИЕ
3.1.
ассоциативность ряда картинок и всего остального содержимого страницы (кнопка выхода с картинкой двери или крестика - логично, перемешанный порядок изображений путает восприятие) - п.1.3.2(А), 1.4, 3, 3.2;
3.2.
наличие подписей, хинтов у кнопок с картинками (мелкие детали требуют пояснений, нестандартные и непривычные изображения слабо ассоциируются с предлагаемыми действиями, программы-ассистенты распознают элемент экрана по имени, браузер с выключенным показом картинок) - п.1.1.1(А), 1.3.1(А), 1.4.9(ААА), 3, 3.2.4(АА), 3.3, 3.3.2(А), 3.3.5(ААА), 1.3.6(ААА), 2.3.3(ААА);
3.3.
пикселизация, размытость, нечёткость ухудшают понимание - п.1.4.3(АА), 1.4.5(АА), 1.4.6(ААА), 1.4.11(АА).
4.
ЦВЕТ
4.1.
привычные многим: красный цвет - ошибок, жёлтый - предупреждений, зелёный - разрешение продолжать, синий - рабочая норма (частичная подсветка объектов для ассоциативного привлечения внимания) - п.1.4.1(А), 3, 3.2;
4.2.
недопустимость цвета без подписи (дальтонизмом страдают 20% мужчин) - п.1.3.3(А), 1.4.1 (А), 3;
4.3.
контрастность (тема ОС или монохромный монитор не ухудшают функционал продукта) - п.1.4.3(АА), 1.4.11(АА).
5.
ТАЙМЕР
5.1.
системная обработка удержания клавиш (длительное нажатие считается повторным в играх на строго определённых этапах) - п.2.1.3(ААА), 3.2;
5.2.
подсказка, хинт элемента не исчезает пока на ней курсор - п.2.1.3(ААА), 2.2.3(ААА), 2.2.4(ААА), 3.3, 2.2.6(ААА);
5.3.
для прочтения или просмотра анимации отведено достаточно времени (текст может быть иностранным или объёмным, процентная шкала ведёт обратный отсчёт) - п.2.2, 2.2.3(ААА), 2.2.4(ААА), 3.3;
5.4.
секундомер работы с базой (транзакции в БД обязательно настраиваются админом) - п.2.2.4(ААА), 2.2.5(ААА), 3.3, 2.2.6(ААА).
6.
ЗВУК
6.1.
подпись объекта (воспроизведения аудио-ролика может начинаться по клику на всю картинку плейера или только на одну маленькую кнопку-иконку - неожиданное поведение) - п.1.3.3(А), 2.4.4(А), 2.4.9(ААА), 3, 3.2, 3.2.4(АА), 1.3.6(ААА);
6.2.
краткое описание или содержание аудио-ролика (прослушивание всего ролика отнимает время, упоминание в тексте основных моментов привлекает внимание) - п.1.2.1(А), 1.2.3(А), 1.3.1(А), 3;
6.3.
пауза, возврат, перемотка, повтор, длительность ролика, громкость звука (управление всеми параметрами повышает степень восприятия содержимого) - п.1.4.2(А), 2.2.1(А), 2.2.3(ААА), 2.2.4(ААА), 2.2.6(ААА);
6.4.
плейер (имеется встроенный, указан формат файла для выбора альтернативного плейера) - п.1.2.3(А), 2.4.4(А);
6.5.
аудио-фон отсутствует или выключается (часто аудио-фон применяют в играх или на страницах сайтов с множеством объявлений - это мешает или раздражает) - п.1.4.7(ААА);
6.6.
нет заглушки системных звуков (залипание или долгое удержание клавиш, окна с сообщениями системы сопровождаются аналогичными звуковыми эффектами или перенастраиваются на пользовательские) - п.3.2.
7.
АНИМАЦИЯ
7.1.
"переливающийся курсор" в движении во всё время длительного процесса (длительная загрузка данных не означает зависание программы) - п.2.2.2(А), 2.2.3(ААА), 2.2.4(ААА), 2.2.5(ААА);
7.2.
затянувшуюся загрузку можно прервать (окно с "градусником" процесса имеет кнопки остановки и отмены, либо перевода в фоновый режим для продолжения иной работы) - п.2.2.2(А), 2.2.3(ААА), 2.2.4(ААА);
7.3.
всплывающие окна имеют достаточный период (более 5сек) до исчезания (обратный отсчёт, задать большой интервал программно) - п.2.2.1(А), 2.2.2(А), 2.2.4(ААА), 3.3;
7.4.
всплывающие окна закрываются по временному интервалу или нажатию функциональной кнопки в зоне окна, клавиши ESC - п.2.2.1(А), 2.2.4(ААА);
7.5.
всплывающие окна не перекрывают друг друга, занимают только рабочую область экрана (хороший пример - появления alarms поочерёдно в ICQ Miranda, хинт за пределами экрана или наложенный на предыдущий - нечитаемый) - п.1.3.2(А), 2.2.2(А), 3.3;
7.6.
мерцание не более 24 кадров или 3 вспышек в секунду (слишком частые изменения экрана ведут к глазным и нервным заболеваниям) - п.2.3.1(А), 2.3.2(ААА);
7.7.
предсказуемость изменений (обновление страницы браузера по F5, автозаполнение полей ввода, смена экрана по запросу пользователя) - п.3.2.5(ААА);
7.8.
браузер с выключенным показом картинок не ограничивает функционал - п.2.3.3(ААА).
8.
ВИДЕО
8.1.
подпись объекта (воспроизведения видео-ролика может начинаться по клику на всю картинку плейера или только на одну маленькую кнопку-иконку - неожиданное поведение) - п.1.3.3(А), 2.4.4(А), 2.4.9(ААА), 3, 3.2, 3.2.4(АА), 1.3.6(ААА);
8.2.
краткое описание или содержание видео-ролика (просмотр всего ролика отнимает время, упоминание в тексте основных моментов привлекает внимание, браузер с выключенным показом картинок) - п.1.2.1(А), 1.2.3(А), 3, 2.3.3(ААА);
8.3.
пауза, возврат, перемотка, повтор, длительность ролика, громкость звука (управление всеми параметрами повышает степень восприятия содержимого) - п.1.4.2(А), 2.2.1(А), 2.2.3(ААА), 2.2.4(ААА), 2.2.6(ААА);
8.4.
плейер (имеется встроенный, указан формат файла для выбора альтернативного плейера) - п.1.2.3(А), 2.4.4(А).
9.
ТЕХ-
ПОДДЕРЖКА
9.1.
поддержка встроенных в ОС средств (лупа, зуммер, секундомер, смена разрешения экрана в ОС, смена региональных параметров ОС, плагины-помощники для браузеров) - 3.2, 4, 4.1;
9.2.
полноценность кода для распознавания программами-ассистентами (закрытые тэги, имена и параметры, тех.подписи элементов) - п.2.4, 2.4.1(А), 2.4.2(А), 2.4.4(А), 2.4.5(АА), 2.4.6(АА), 2.4.9(ААА), 2.4.10(ААА), 3.2.4(АА), 4.1, 4.1.1(А), 4.1.2(А), 1.3.6(ААА), 2.5.3(А), 4.1.3(АА);
9.3.
горячие клавиши (стандартные наборы работают только в своей области, можно переназначать или отключать, имеется достаточно предупреждений об использовании) - п.2.1.3(ААА), 3.2, 3.2.4(АА), 2.1.4(А);
9.4.
проверка, отмена, подтверждение, шифрование значимых действий (скрытый ввод пароля, ограничения на обмен персональной инфой, финансовые операции с предпросмотром и подтверждением, пред-просмотр вместо печати больших объёмов) - п.2.2.4(ААА), 2.2.5(ААА), 3.2, 3.3, 3.3.4(А), 3.3.6(ААА);
9.5.
конкретизация ошибок подсветкой и поясняющим сообщением (нет заглушек для ошибок ОС или базы, внутренние ошибки продукта имеют инструкцию дальнейших действий, неверные данные локализуются цветом или позицией курсора) - п.3.2, 3.3, 3.3.1(А), 3.3.2(А), 3.3.3(АА), 3.3.4(А), 3.3.5(ААА), 3.3.6(ААА).
Для подтверждения WCAG
уровня, конечно же надо будет ужесточить и увеличить количество проверок.
Инструменты для автоматической проверки сайтов:
Больше
примеров можете подчерпнуть из доклада Екатерины Шепелевой "
О тестировании доступности" на QA-Fest-2017.
Полезные ссылки:
Изучайте оригинал самостоятельно и расширяйте список тестов - "
Web Content Accessibility Guidelines"
На русском - "
Web Content Accessibility Guidelines (WCAG) 2.0"
Дополнения за 2018 год - "
WCAG 2.1 на русском" (в 2007 г. появился Национальный стандарт ГОСТ Р 52872 и его актуализированная редакция от 2012 г., авторизованный перевод международного стандарта WCAG 2.0 в 2013 г.)
Первая версия содержала 14 принципов - "
WCAG — рекомендации, которые никто не слушал"
Практические рекомендации программистам - "
Приведение сайта в соответствие со стандартом WAI-WCAG"
Мобильные приложения не отделяют от web-app - "
Mobile Accessibility at W3C"
