Cheat-sheet доступности

На днях предложили протестировать рекламу, а перед этим довелось посмотреть доклад на 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"