Доступность

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

Что именно помогает:

• Программы чтения с экрана. TalkBack на Android и VoiceOver на iOS проговаривают содержимое экрана вслух.
• Крупные области нажатия. По маленькой кнопке трудно попасть не только человеку с тремором.
• Контраст цветов. Светло-серый текст на белом фоне не читается ни при плохом зрении, ни на солнце.
• Навигация с клавиатуры. Не всем доступен сенсорный экран.
• Тактильный отклик. Вибрация подтверждает, что действие сработало, когда это не видно.

Ниже — то, чем FlutterFlow закрывает эти задачи.

Семантическая метка

Semantic Label объясняет программе чтения с экрана, что представляет собой виджет. Заодно эти подписи помогают поисковым системам в веб-версии.

Пример: кнопке «Add to Bag» в магазине уместно дать метку «Добавить выбранный товар в корзину» — иначе незрячий пользователь услышит только «кнопка».

Задаётся она так: выделите виджет, откройте панель свойств, нажмите значок документа в разделе Accessibility & Semantic Label, впишите текст и нажмите Save.

Расширенные настройки семантики (только Enterprise)

Эти настройки задают, как программа чтения интерпретирует виджет.

Что они означают:

• Is Container — виджет объединяет другие семантические элементы.
• Is Image — виджет представляет собой изображение.
• Is Button — виджет ведёт себя как кнопка.
• Is Header — виджет является заголовком; по заголовкам удобно перемещаться.
• Explicit Child Nodes — включать в семантику всех потомков, даже тех, что обычно игнорируются.
• Exclude Semantics — не озвучивать этот виджет.
• Is Live Region — содержимое виджета меняется, и об изменениях нужно сообщать повторно.
• Hint Text — дополнительная подсказка, например «Дважды коснитесь, чтобы открыть».
• Tooltip Text — пояснение сверх основной метки.
• Ordinal Sort Key — порядок, в котором программа чтения обходит виджеты.

Расставив метки, включите TalkBack на Android или VoiceOver на iOS и пройдите по приложению: проверьте, что всё озвучивается понятно и по экрану можно перемещаться, не теряясь.

Как включить программу чтения на устройстве.

Действие Semantic Announce

Semantic Announce просит программу чтения произнести текст вслух. Это нужно там, где обратная связь только визуальная и незрячий пользователь её не получит.

Настройки действия:

• Announcement Text — что произнести.
• Is Text Right to Left — включите для языков с письмом справа налево, арабского или иврита. По умолчанию выключено.

Порядок фокуса

Focus Configuration отвечает за перемещение по интерфейсу клавиатурой или пультом — это важно для веба, десктопа, телевизоров и киосков.

Свойства такие:

• Wrap in Focus Traversal Group — объединяет виджет и его потомков в группу: Tab ходит внутри неё, прежде чем уйти дальше. Например, в форме входа фокус будет переключаться между полями почты и пароля, не убегая в другие части экрана.
• Focus Traversal Order — точный порядок обхода числами. В форме регистрации: Имя = 1, Почта = 2, Пароль = 3 — так Tab идёт по форме сверху вниз, а не по структуре дерева виджетов.
• Show Border on Focus — подсвечивает виджет рамкой, когда он в фокусе. Вид рамки задаётся свойствами Border Width, Border Color и Border Radius.

Действие Update Text Scaling Factor

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

Типичная реализация: кнопки «+» и «−» на экране увеличивают и уменьшают масштаб на единицу, а кнопка сброса возвращает исходное значение.

Три режима:

• Set Value — задать конкретное значение.
• Increment/Decrement — изменить текущее на заданную величину; положительное увеличивает, отрицательное уменьшает.
• Reset — вернуть значение проекта по умолчанию.

Навигация с клавиатуры

Триггер On Shortcut Press привязывает сочетания клавиш к действиям. В вебе и на десктопе это единственный способ работать с приложением без мыши.

Тактильный отклик

Haptic Feedback вибрирует устройством — подтверждает, что действие выполнено, тем, кто не видит визуального отклика.

Адаптивный кегль

На экранах с высоким разрешением — планшетах, десктопах — текст выглядит мельче, и читать его труднее.

Адаптивные текстовые стили подстраивают кегль под класс устройства.

Контраст

Текст и элементы управления должны читаться при слабом зрении и при нарушениях цветовосприятия. Про работу с цветом — в разделе про цвета темы.

Что стоит делать

• Думать о доступности с самого начала: встраивать её в готовый интерфейс дороже, чем закладывать сразу.
• По семантическим меткам:
  • не пишите «Нажмите здесь» — пишите «Отправить форму» или «Открыть настройки»;
  • у значков без подписи метка обязательна: «Назад», «Поиск».
• Делайте область нажатия не меньше 48×48 логических пикселей.
• Проверяйте приложение с включённой программой чтения с экрана.
• Не передавайте смысл одним лишь цветом — дублируйте его текстом, значком или узором.
• Проверяйте интерфейс при увеличенном кегле и высокой контрастности.
• Обходитесь простыми жестами: касанием и двойным касанием. Если действие делается смахиванием, продублируйте его кнопкой.
• Показывайте приложение людям с ограничениями. Реальный отзыв находит то, чего не даст ни один чек-лист.