Перейти к основному содержимому

Доступность

Приложение должно работать для тех, кто пользуется скринридером, крупным шрифтом, клавиатурой вместо касаний или режимом высокой контрастности, — и заодно для всех остальных, кто идёт по яркой улице с занятой рукой.

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

Что нужно понимать​

  • Что скринридер произносит для конкретного элемента управления и есть ли от этого польза
  • Не передаётся ли что-то одним лишь цветом
  • Что происходит при максимальном системном размере шрифта
  • Можно ли пройти сценарий целиком без касаний
  • Каков на самом деле порядок чтения и обхода фокусом

Основные темы​

Дерево семантики​

  • Что Flutter отдаёт вспомогательным технологиям и как это посмотреть
  • Semantics: подписи, подсказки и значения
  • Объединение и исключение узлов, чтобы карточка озвучивалась одной фразой, а не девятью
  • Live-регионы для того, что меняется само, без действий пользователя
  • Озвучивание состояния: выбрано, недоступно, развёрнуто, идёт загрузка

Визуальная часть​

  • Коэффициенты контрастности: их измеряют, а не оценивают на глаз
  • Никогда только цвет — рядом должны быть текст, форма или иконка
  • Масштабирование текста до 200 процентов без потери функциональности
  • Минимальные размеры зон нажатия
  • Учёт системных настроек «уменьшить движение» и «жирный шрифт»

Взаимодействие​

  • Порядок фокуса и обход, совпадающий с визуальной раскладкой
  • Управление с клавиатуры для каждого интерактивного элемента
  • Ограничения по времени и возможность ими управлять
  • Сообщения об ошибках, которые называют поле и говорят, как исправить

Проверка​

  • Живая работа с TalkBack и VoiceOver на настоящем устройстве
  • Сканеры доступности и та доля проблем, которую они не видят
  • Автоматические проверки в widget-тестах
  • Проверка на максимальном размере шрифта как рутина

Уровни​

УровеньКак это выглядит
JuniorДобавляет подписи к иконочным кнопкам и изображениям. Знает, что такая настройка существует.
MiddleВыстраивает дерево семантики, выдерживает контраст и размеры зон нажатия, поддерживает масштабирование текста и работу с клавиатуры.
SeniorПроектирует сценарии доступными с самого начала, проверяет их настоящими вспомогательными технологиями и встраивает проверки в CI.

Практика​

Для начала​

  • Включите скринридер Пройдите основной сценарий своего приложения с TalkBack или VoiceOver. Выпишите всё, чем невозможно пользоваться.

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

  • Увеличьте шрифт Выставьте системный шрифт на максимум и почините то, что сломается.

Глубже​

  • Почините озвучивание Возьмите карточку, которая читается девятью отдельными кусками, и соберите её в одну осмысленную фразу.

  • Сделайте доступным собственный widget Опишите семантику самодельного элемента управления как следует — вместе с его состоянием.

  • Проверяйте это в CI Добавьте автоматические проверки доступности в widget-тесты, чтобы регрессии роняли сборку.

Проверьте себя​

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

Материалы​

  • Accessibility in Flutter — официальное руководство: отладчик семантики и те проверки для widget-тестов, о существовании которых большинство проектов не догадывается.
  • WCAG 2.2 quick reference — сами критерии, с фильтрами. Именно на них ссылаются законы и проверки в сторах.
  • Semantics class — полный набор свойств. Стоит прочитать один раз, чтобы знать, что вообще можно выразить.
  • Mobile accessibility at Google — чего платформа ожидает на Android; именно к этому привыкли пользователи TalkBack.
  • Apple: Accessibility — то же самое для iOS, включая поведение VoiceOver, которое приложение получает по умолчанию.