Споделяне чрез

Организирайте контролите в достъпни приложения за платно

  • Статия

Контролите в приложението трябва да бъдат организирани, за да помогнат на потребителите на екранен четец да се ориентират последователно. Логичният ред също така намалява объркването за потребителите на клавиатурата и им помага да бъдат по-продуктивни.

Смислено име за показване

Когато се зареди екран, четците на екрана ще кажат името му. Изберете смислено име, за да ориентирате потребителите.

Можете да промените името на екрана в дървото на контролите или панела със свойства в Power Apps Studio. Изберете екрана и след това изберете Избор на иконата с писалка за редактиране на името. за преименуване на екрана.

Имената на екраните могат да се променят от дървото на контролите или панела със свойства, както е подчертано на снимката.

Първият елемент на екрана е името му. Той е визуално скрит и достъпен само за потребители на екранен четец.

Когато се зареди нов екран, Power Apps фокусира екранното име. Ако използвате SetFocus веднага, когато екранът се зареди, името на екрана няма да бъде прочетено. Помислете за създаването на видимо заглавие и превръщането му в регион на живо да обяви промяната в контекста.

Логически ред за управление

Потребителите на екранен четец могат да се ориентират в съдържанието последователно. Редът се определя от позицията на контролите, започвайки отгоре надолу, след това отляво надясно. Размерът на контрола няма значение, а само неговите х и Y свойства имат значение.

В този пример A се появява първи в поредицата, тъй като е най-близо до върха. B и C имат еднакво вертикално положение, но тъй като B е по-близо отляво и следователно се появява преди C. D се появява последен, тъй като е най-отдалечен отгоре.

Как позиционирането влияе върху реда на 4 контроли.

Бележка

  • В режим на Преглед при редактиране на приложение, контролната поръчка не се актуализира от съображения за ефективност. Редът ще бъде правилен, когато приложението бъде публикувано и стартирано.
  • Редът на контроли не е същата като този, показан в дървовиден изглед на контролите в Power Apps Studio. Изгледът на дървото сортира контролите според това кога са добавени към приложението. Това не засяга реда на контролите, когато приложението се изпълнява.
  • Когато стойността X или Y на контрола е зададена на израз, редът на контролата не се актуализира, когато резултатът от израза се промени. Редът се изчислява и фиксира, когато приложението се запазва, като се използва първоначалното състояние на приложението за оценка на изразите.
    • Ако променяте позицията му, защото други контроли се скриват или показват, можете да използвате контейнери за автоматично оформление, за да управлявате X и Y вместо вас.
    • Можете също да позиционирате всички контроли по логически начин, независимо от стойностите на израза. Например, ако контролата А винаги трябва да бъде под контрола Б и Б може да бъде скрита понякога, задайте Y на А да бъде 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

Пример за препоръчителна практика: контроли, организирани в йерархична структура с помощта на контейнери.

Всички контроли в Карта на формуляр и Галерия се групират автоматично, така че не е нужно да използвате Контейнер. Ако обаче има подгрупи, все пак трябва да използвате Контейнери за тях.

В този пример ред Галерия има миниатюра и две парчета текст вляво. Вдясно има два бутона. Визуално и логично двата комплекта контроли трябва да бъдат групирани. Това гарантира, че потребителите на екранен четец ще срещнат лявата група първо преди дясната.

Пример за препоръчителна практика: свързаните контроли в галерия са групирани в контейнери.

Логически ред за навигация на клавиатурата

TabIndex определя как контролите могат да бъдат достигнати от потребителите на клавиатурата. TabIndex трябва да е 0 или -1. При логическия ред на управление, както е описано по-горе, няма много причини да се има TabIndex по-голям от 0.

Редът за навигация на клавиатурата трябва да следва визуалния поток от контроли. Ако навигационният ред е неочакван, първо трябва да проверите дали структурата на приложението е логична.

Бележка

Поръчката за навигация на клавиатурата не е същата като тази за контрола. TabIndex засяга само навигацията с клавиша Tab. Това не променя начина, по който потребителите на екранен четец се ориентират в приложението линейно. Някои потребители на екранен четец дори не използват клавиатури.

Избягвайте персонализирани индекси на раздели

Персонализираните индекси на раздели са тези, които са по-големи от нула. Те почти винаги са знак за лош дизайн. Има по-добри алтернативи като създаване на подходяща структура на приложението или използване на SetFocus за промяна на фокуса.

Избягвайте използването на персонализирани индекси на раздели поради следните причини.

Достъпност

Сериозен проблем с достъпността е да имате персонализирани индекси на раздели. Потребителите на екранни четци навигират в приложение, използвайки неговата логическа структура. Персонализираните индекси на раздели игнорират тази структура. Тъй като потребителите на екранен четец могат също да навигират с помощта на Tab клавиш, те ще бъдат объркани, когато получат различен ред от другите методи за навигация.

Ползваемост

Потребителите могат да бъдат объркани, когато някои елементи изглеждат пропуснати. Те могат да бъдат дезориентирани, когато фокусът се движи в непредсказуем ред. Това е още по-проблематично за потребители с когнитивни увреждания.

Поддръжка

Създателите на приложения трябва ръчно да актуализират TabIndex на множество контроли всеки път, когато се вмъкне нова. Лесно е да пропуснете актуализация или да объркате поръчката.

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

За да поддържа персонализирани индекси на раздели, Power Apps системата трябва да прегледа всички контроли на страницата и да изчисли подходящия ред. Това изчисление е интензивен процес. Контейнер контроли като Галерия имат сложни правила за това как TabIndex работи за детски контроли. Системата картографира желаното от производителя на приложението TabIndex на различна стойност, за да спазвате тези правила. Ето защо, дори ако TabIndex е настроен на нула за всички контроли, действителният HTML tabindex ще бъде някакво положително число.

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

Персонализираните индекси на раздели работят само с вградени контроли. Контроли, които не са интегрирани в системата за индексиране на раздели на Power Apps ще има неочакван ред на навигация. Това може да е проблем за кодови компоненти. Разработчиците на тези компоненти трябва да следят интерактивните елементи и да задават индекс на раздели върху тях. Те могат да използват библиотеки на трети страни, които може дори да не предоставят начин за персонализиране на индексите на раздели. От друга страна, когато всички индекси на раздели са 0 или -1, няма нужда да се включва Power Apps система за индексиране на раздели. Всеки компонент на трета страна, вграден в приложението, автоматично ще получи правилната последователност от раздели.

В другата посока, когато приложенията за платно са вградени в друга уеб страница, персонализираните индекси на раздели не работят. Например в потребителски страници. Power Apps не може да контролира елементите извън приложението за платно, така че цялостният ред на навигация в разделите ще бъде нелогичен.

Опростен индекс на разделите (преглед)

За да сте сигурни, че индексите на раздели са 0 или -1, активирайте функцията на приложението Опростен индекс на раздели от Настройки > Предстоящи функции.

Активиране на функцията за приложение за опростен индекс на раздели.

Важно

  • Това е функция за предварителен преглед.
  • Функциите за предварителен преглед не са предназначени за производствена употреба и може да са с ограничена функционалност. Тези функции са достъпни преди официалното издание, за да могат клиентите да получат ранен достъп и да дадат обратна връзка.

Когато тази функция е активирана, всички TabIndex стойности, по-големи от нула, ще се третират като нула. Това също деактивира система за индексиране на раздели на Power Apps, така че да може да се интегрира по-добре с други компоненти, както е описано по-горе.

Заобиколно решение за персонализирана последователност от раздели

В редки случаи, когато редът на навигация от клавиатурата трябва да се различава от визуалния ред, можете внимателно да позиционирате контролите на контейнера, за да постигнете същия ефект.

В примера по-долу бутон A е над бутон B. Естественият ред на навигация в раздели е A, след това B.

Два бутона с еднакъв TabIndex, подредени вертикално.

За да обърнете реда на навигация в раздела, поставете B в контрола Container. Задайте стойността Y на контейнера да бъде над A. Структурата на приложението вече има контейнер (и B) преди A. Следователно редът на навигация в раздели е B, след това A.

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

С тази техника потребителите на екранни четци също ще срещнат B преди A, когато навигират без клавиш Tab.

Следващи стъпки

Достъпни цветове в Power Apps

Вижте също