Поделиться через

Организация элементов управления в приложениях на основе холста с поддержкой специальных возможностей

  • Статья

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

Понятное имя экрана

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

Вы можете изменить имя экрана в дереве элементов управления или на панели свойств в Power Apps Studio. Выберите экран, а затем выберите Выберите значок пера, чтобы изменить имя. для переименования экрана.

Названия экранов можно изменить в дереве элементов управления или на панели свойств, как показано на рисунке.

Первый элемент на экране — это его имя. Он визуально скрыт и доступен только для пользователей средств чтения экрана.

Когда загружается новый экран, Power Apps помещает фокус на имя экрана. Если вы используете функцию SetFocus сразу после загрузки экрана, имя экрана не будет прочитано. Подумайте о том, чтобы создать видимый заголовок и сделать его динамической областью, чтобы объявлять об изменении контекста.

Логический порядок элементов управления

Пользователи средств чтения экрана могут последовательно перемещаться по содержимому. Порядок определяется положением элементов управления, начиная сверху вниз, затем слева направо. Размер элемента управления не имеет значения, учитываются только его свойства X и Y.

В этом примере A появляется первым в последовательности, так как он ближе всего к верхнему краю. B и C имеют одинаковое вертикальное положение, но поскольку B находится ближе к левому краю, он, следовательно, появляется перед C. D появляется последним, поскольку он наиболее удален от верхнего края.

Как расположение влияет на порядок 4 элементов управления.

Примечание

  • В режиме Предварительный просмотр при редактировании приложения порядок элементов управления не обновляется по соображениям производительности. Порядок будет правильным, когда приложение будет опубликовано и запущено.
  • Порядок элементов управления отличается от указанного в представлении в виде дерева элементов управления в Power Apps Studio. В представлении в виде дерева элементы управления сортируются в зависимости от того, когда они были добавлены в приложение. Это не влияет на порядок элементов управления при запуске приложения.
  • Когда значение X или Y элемента управления установлено на выражение, порядок элемента управления не обновляется при изменении результата выражения. Порядок вычисляется и фиксируется при сохранении приложения с использованием исходного состояния приложения для оценки выражений.
    • Если вы меняете его положение из-за того, что другие элементы управления скрыты или показаны, вы можете использовать контейнеры автоматического макета для управления X и Y для вас.
    • Вы также можете расположить все элементы управления логическим образом независимо от значений выражения. Например, если элемент управления A всегда должен находиться под элементом управления B, а элемент B иногда может быть скрыт, установите для свойства Y элемента A значение If(B.Visible, B.Y + B.Height, B.Y + 1). Добавление 1 гарантирует, что A всегда находится ниже B, даже если B скрыт.

Сгруппированные элементы управления

Порядок по умолчанию подходит для изолированного содержимого, но не для сгруппированного содержимого. Рассмотрим две плитки рядом, нарисованные с помощью элементов управления Прямоугольник. У каждой плитки есть заголовок. Под заголовком расположены две кнопки, расположенные вертикально: A и B для первой плитки и C и D для другой.

Пример неправильной практики: элементы управления организованы в виде плоской структуры.

Порядок по умолчанию задается сверху вниз, затем слева направо. Следовательно, порядок элементов управления таков:

  1. Левый Прямоугольник
  2. Правый Прямоугольник
  3. Левый заголовок
  4. Правый заголовок
  5. A
  6. C
  7. B
  8. D

Эта структура не передает, что A и B сгруппированы вместе, и аналогично C и D сгруппированы вместе.

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

Если заменить прямоугольники из предыдущего примера на контейнеры, порядок элементов управления теперь логичен для пользователей средств чтения экрана:

  1. Левый контейнер
  2. Левый заголовок
  3. A
  4. B
  5. Правый контейнер
  6. Правый заголовок
  7. C
  8. D

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

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

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

Пример рекомендуемой практики: связанные элементы управления в коллекции сгруппированы внутри контейнеров.

Логический порядок навигации с помощью клавиатуры

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

  • Следуйте визуальному потоку элементов управления.
  • Следуйте интуитивно понятному порядку поперек и затем вниз по порядку "Z" или порядку вниз и затем поперек в виде "обратного N".
  • Останавливайте табуляцию только на интерактивных элементах управления.

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

Порядок навигации соответствует порядку управления: слева направо, затем сверху вниз, в форме буквы «Z». Вы можете настроить его так же, как и контрольный заказ. Например, элементы управления в Контейнерах, Форме Карточки и Галерее группируются автоматически. Клавиша Tab позволяет перемещаться по всем элементам внутри контейнера, прежде чем перейти к следующему элементу управления за пределами контейнера.

Если порядок навигации неожиданный, вы должны сначала проверить, логична ли структура приложения.

Примечание

Когда элементы управления динамически перемещаются по экрану, например, при изменении их значений по осям X или Y в соответствии с Power Fx выражением, порядок навигации не будет обновлен.

Обходной путь для пользовательской последовательности перехода по клавише TAB

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

В приведенном ниже примере кнопка A находится над кнопкой B. Естественный порядок навигации по вкладкам — A, затем B.

Две кнопки с одинаковым TabIndex, расположенные вертикально.

Чтобы изменить порядок навигации по вкладкам, поместите B в элемент управления Контейнер. Установите значение Y для контейнера выше A. Теперь в структуре приложения контейнера (и B) находится перед A. Следовательно, порядок навигации по вкладкам — B, затем A.

B помещается в контейнер, который стоит перед A.

При использовании этого метода для пользователей средства чтения экрана B также будет отображаться перед A при навигации без клавиши Tab.

Пользовательские индексы вкладок (устаревшая функция)

Пользовательские индексы перехода по Tab больше нуля. Они больше не поддерживаются. Все значения TabIndex больше нуля будут рассматриваться как ноль.

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

Некоторые проблемы с пользовательскими индексами вкладок:

Специальные возможности

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

Удобство использования

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

Обслуживание

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

Производительность

Для поддержки пользовательских индексов перехода по Tab система Power Apps должна проверить все элементы управления на странице и вычислить соответствующий порядок. Это вычисление является интенсивным процессом. Контейнерные элементы управления, такие как Галерея имеют сложные правила, касающиеся того, как свойство TabIndex работает для дочерних элементов управления. Система сопоставляет необходимое создателю приложения свойство TabIndex с другим значением, чтобы подчиняться этим правилам. Вот почему, даже если для TabIndex задано значение 0 для всех элементов управления, фактическое значение tabindex в HTML-коде будет являться определенным положительным числом.

Интеграция с другими компонентами

Пользовательские индексы перехода по Tab работают только со встроенными элементами управления. Элементы управления, не интегрированные с системой индекса перехода по Tab в Power Apps, будут иметь неожиданный порядок навигации. Это может быть проблемой для компонентов кода. Разработчики этих компонентов должны отслеживать интерактивные элементы и устанавливать для них индекса перехода по Tab. Они могут использовать сторонние библиотеки, которые могут даже не предоставлять возможности настройки индекса перехода по Tab. С другой стороны, когда все индексы перехода по Tab равны 0 или -1, нет необходимости задействовать систему индекса перехода по Tab в Power Apps. Любой сторонний компонент, встроенный в приложение, автоматически получит правильную последовательность вкладок.

С другой стороны, когда приложения на основе холста встроены в другую веб-страницу, пользовательские индексы перехода по Tab не работают. Например, в пользовательских страницах. Power Apps не может управлять элементами за пределами приложения на основе холста, поэтому общий порядок навигации по вкладкам будет нелогичным.

Следующие шаги

Цвета высокой контрастности в Power Apps

См. также