Доступность

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

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

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

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

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

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

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

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

Чтобы добавить семантическую метку для любого виджета, выберите виджет, перейдите в панель свойств (справа), нажмите на значок документа в разделе Accessibility & Semantic Label, добавьте сообщение и нажмите Save.

подсказка

Вы также можете динамически устанавливать семантические метки с помощью переменных или выражений. Это позволяет метке изменяться в зависимости от контекста приложения, чтобы экранные ридеры объявляли именно то, что отображается на экране, вместо общих терминов вроде "изображение" или "кнопка". Например, изображение продукта может зачитывать название продукта (например, "Красные беговые кроссовки", полученное из Firestore), а не просто "изображение".

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

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

к сведению

Эти настройки доступны только пользователям с подпиской Enterprise.

Вот что делает каждая опция:

• Is Container: Указывает, что виджет служит группировкой для других семантических виджетов.
• Is Image: Сообщает экранным ридерам, что виджет представляет изображение.
• Is Button: Объявляет, что виджет ведет себя как кнопка.
• Is Header: Идентифицирует виджет как заголовок для лучшей навигации.
• Explicit Child Nodes: Принуждает семантику включать все дочерние узлы, даже если они обычно игнорируются.
• Exclude Semantics: Предотвращает объявление этого виджета экранными ридерами.
• Is Live Region: Сообщает вспомогательным технологиям, что содержимое виджета может изменяться динамически и должно быть переобъявлено.
• Hint Text: Предоставляет дополнительную подсказку для пользователей (например, "Двойное касание для открытия").
• Tooltip Text: Отображает полезный текст при долгом нажатии или наведении.
• Ordinal Sort Key: Управляет порядком, в котором виджеты доступны экранным ридерам.

подсказка

Вы можете добавить семантическую метку для каждого виджета в вашем приложении, у которого есть триггер действия OnTap или onLongPress, включив опцию Add Warning for Semantic Widgets. При этом вы получите предупреждение, если у какого-либо виджета есть действие, но семантическая метка еще не добавлена. Вы можете кликнуть на элемент предупреждения, чтобы перейти непосредственно к этому виджету.

После добавления семантических меток включите TalkBack на Android или VoiceOver на iOS, чтобы протестировать взаимодействие экранных ридеров с вашим приложением. Эти экранные ридеры помогут убедиться, что все элементы интерфейса читаются четко, описания значимы, а пользователи могут логично перемещаться, не теряясь.

Узнайте больше о включении экранного ридера на вашем устройстве.

Семантическое объявление [Действие]

Действие Semantic Announce позволяет уведомлять пользователей экранных ридеров об важных изменениях в интерфейсе или предоставлять контекстные обновления. Оно отправляет запрос в службу доступности устройства (TalkBack/VoiceOver), чтобы текст был зачитан вслух.

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

возможные сценарии использования

• Отправка формы: После отправки формы пользователем вы можете запустить объявление экранного ридера вроде "Ваша форма успешно отправлена", предоставляя немедленную обратную связь без необходимости в визуальных подсказках.
• Обновления динамического содержимого: Когда на экран добавляется или изменяется новое содержимое — например, загружаются новые сообщения в чате или обновляется лента, — вы можете объявить сообщения вроде "Загружено 3 новых сообщения", чтобы пользователи экранных ридеров были в курсе обновления.
• Сообщения об ошибках или валидации: Если пользователь вводит неверные данные, вы можете объявить полезную обратную связь по валидации, такую как "Пожалуйста, введите действительный адрес электронной почты".

Действие Semantic Announce позволяет запускать объявления экранных ридеров со следующими настройками:

• Announcement Text: Сообщение, которое экранный ридер должен зачитать вслух (например, "Товар добавлен в избранное").
• Is Text Right to Left: Установите в True для языков справа налево, таких как арабский или иврит. По умолчанию False, что подходит для языков слева направо, таких как английский.

Лучшие практики

• Длинные объявления могут перегружать пользователя. Стремитесь к краткой фразе вроде "Поиск завершен — 3 результата."
• Слишком много объявлений может запутать или раздражать пользователя. Объявляйте только критические или своевременные изменения, которые иначе не обнаруживаются.
• Используйте правильное направление языка сообщения. Если ваше приложение поддерживает несколько локалей, динамическая привязка направления может помочь.
• Поведение экранных ридеров может различаться на Android (TalkBack) и iOS (VoiceOver). Тестируйте тщательно на реальном оборудовании, чтобы подтвердить опыт.

Настройка фокуса

Настройка фокуса помогает улучшить навигацию с клавиатуры и пульта дистанционного управления в вашем приложении — особенно важно для веб-, десктопных, телевизионных и киоск-приложений. Она управляет тем, как пользователи перемещаются по виджетам с помощью клавиши Tab или других входов навигации (например, стрелок или D-pad на ТВ или пульте).

Вы можете управлять настройкой фокуса с помощью следующих свойств:

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

warning

Хотя вы можете назначить значение для Focus Traversal Order любому виджету, оно не вступит в силу, если вы не включите Wrap in Focus Traversal Group на текущем виджете или одном из его родительских виджетов.

Focus Traversal Group определяет контекст или область для обхода фокуса, и Focus Traversal Order применяется только внутри этой группы. Без нее нет определенного порядка для логики обхода.

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

Действие Update Text Scaling Factor в FlutterFlow позволяет динамически регулировать размер текста по всему приложению во время выполнения. Это особенно полезно для улучшения доступности, позволяя пользователям контролировать размер текста без необходимости ручного изменения системных настроек.

Представьте, что у вас на странице есть кнопки "+" и "-", чтобы помочь пользователям регулировать размер текста. При нажатии кнопки "+" коэффициент масштабирования текста увеличивается на 1, делая текст крупнее. Нажатие кнопки "-" уменьшает коэффициент масштабирования текста на 1, делая текст мельче. Кроме того, можно предоставить кнопку Reset, чтобы вернуть масштабирование текста к значению по умолчанию.

к сведению

Это действие работает в сочетании с настройками Display Settings, настроенными на уровне проекта, такими как Min Text Scaling Factor и Max Text Scaling Factor.

При настройке действия Update Text Scaling Factor вы можете выбрать один из трех типов обновления:

• Set Value: Прямо назначает коэффициент масштабирования текста конкретному значению.
• Increment/Decrement: Регулирует текущий коэффициент масштабирования на указанную величину. Положительное значение увеличивает масштабирование, отрицательное — уменьшает.
• Reset: Восстанавливает коэффициент масштабирования текста к настройке по умолчанию проекта.

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

Вы можете использовать триггер действия On Shortcut Press, чтобы привязать сочетания клавиш к конкретным действиям. Это облегчает пользователям с ограниченными возможностями навигацию по вашему приложению, особенно в веб- и десктопных средах.

Это улучшает доступность, позволяя пользователям взаимодействовать без полной зависимости от мыши или сенсорного экрана, делая опыт более инклюзивным и эффективным.

Тактильная обратная связь

С помощью Haptic Feedback вы можете вибрировать устройство пользователя, что особенно полезно для пользователей с нарушениями зрения или когнитивными. Это предоставляет тактильный отклик, указывающий, что действие завершено.

Например, вибрация устройства пользователя при успешной отправке формы.

Адаптивные шрифты

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

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

Контраст цветов

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

подсказка

Вы можете использовать инструменты вроде WCAG Contrast Checker, чтобы проверить коэффициент контраста цветов.

Лучшие практики

• Доступность должна учитываться с самого начала процесса дизайна и разработки, а не добавляться постфактум.
• При добавлении семантических меток:
  • Избегайте неоднозначных меток вроде "Нажмите здесь" или "Нажмите это"; вместо этого используйте описательные фразы, такие как "Отправить форму" или "Перейти к настройкам."
  • Вместо простого отображения иконки добавляйте семантические метки вроде "Кнопка назад" или "Кнопка поиска", чтобы предоставить контекст для экранных ридеров.
• Убедитесь, что интерактивные виджеты имеют минимальный размер области касания 48x48 логических пикселей. Это помогает пользователям с моторными нарушениями легко взаимодействовать с кнопками, переключателями и другими компонентами.
• Всегда тестируйте приложение с включенными экранными ридерами, чтобы убедиться, что оно ведет себя как ожидается.
• Не используйте цвет как единственный способ передачи важной информации. Добавляйте текст, иконки или узоры для дополнения цвета, делая содержимое доступным для дальтоников.
• Проверяйте интерфейс приложения при высоком контрасте или большем размере текста, чтобы убедиться, что он остается читаемым и удобным.
• Используйте простые жесты, такие как касания и двойные касания, вместо многопальцевых свайпов или долгого нажатия. Предоставляйте альтернативные способы выполнения действий, например кнопку в дополнение к жесту свайпа.
• Проводите тесты удобства с людьми, имеющими ограниченные возможности. Реальная обратная связь от пользователей бесценна для выявления проблем, которые могут не обнаружиться при стандартном тестировании.