Organizați controalele în aplicații proiectate pe pânză accesibile

Controalele dintr-o aplicație trebuie să fie organizate pentru a ajuta utilizatorii cititorului de ecran să navigheze secvențial. O ordine logică reduce și confuzia pentru utilizatorii tastaturii și îi ajută să fie mai productivi.

Nume de ecran semnificativ

Când un ecran este încărcat, cititoarele de ecran îi vor spune numele. Alegeți un nume semnificativ pentru a orienta utilizatorii.

Puteți schimba numele ecranului în arborele de control sau în panoul de proprietăți din Power Apps Studio. Selectați ecranul, apoi selectați pentru a redenumi ecranul.

Primul element de pe un ecran este numele său. Este ascuns vizual și este accesibil doar utilizatorilor cititorului de ecran.

Când se încarcă un ecran nou, Power Apps focalizează pe numele ecranului. Dacă folosiți SetFocus imediat când ecranul se încarcă, numele ecranului nu va fi citit. Luați în considerare crearea unui titlu vizibil și setarea acestuia ca regiune live pentru a anunța schimbarea în context.

Ordine logică de control

Utilizatorii cititorului de ecran pot naviga conținutul secvențial. Ordinea este determinată de poziția comenzilor, începând de sus în jos, apoi de la stânga la dreapta. Mărimea controlului nu contează, contează doar proprietățile X și Y.

În acest exemplu, A apare primul în secvență, deoarece este cel mai apropiat de partea de sus. B și C au aceeași poziție verticală, dar din moment ce B este mai aproape de stânga apare înainte de C. D apară ultimul, deoarece este cel mai îndepărtat de sus.

Notă

• În modul Previzualizare la editarea unei aplicații, ordinea de control nu este actualizată din motive de performanță. Ordinea va fi corectă atunci când aplicația este publicată și rulată.
• Ordinea de control nu este aceeași cu cea afișată în vizualizarea arborescentă a controalelor în Power Apps Studio. Vizualizarea arborescentă sortează controalele în funcție de momentul în care au fost adăugate în aplicație. Nu afectează ordinea controalelor atunci când aplicația este rulată.
• Când valoarea X sau Y a unui control este setată la o expresie, ordinea controlului nu este actualizată când rezultatul al expresiei se modifică. Ordinea este calculată și fixată atunci când aplicația este salvată, folosind starea inițială a aplicației pentru a evalua expresiile.
  • Dacă îi schimbați poziția deoarece alte comenzi sunt ascunse sau afișate, puteți utiliza containere cu aspect automat pentru a gestiona X și Y pentru dvs.
  • De asemenea, puteți poziționa toate controalele într-un mod logic, indiferent de valorile expresiei. De exemplu, dacă controlul A ar trebui să fie întotdeauna sub controlul B și B poate fi ascuns uneori, setați Y pentru A să fie If(B.Visible, B.Y + B.Height, B.Y + 1). Adăugarea lui 1 asigură că A este întotdeauna sub B, chiar dacă B este ascuns.

Controale grupate

Ordinea implicită este potrivită pentru conținut izolat, dar nu pentru conținut grupat. Luați în considerare două dale una lângă alta, desenate cu controlul Dreptunghi. Fiecare dală are un titlu. Sub titlu sunt două butoane stivuite vertical: A și B pentru prima dală și C și D pentru cealaltă.

Ordinea implicită este de sus în jos, apoi de la stânga la dreapta. Prin urmare, ordinea controalelor este:

1. Dreptunghi stânga
2. Dreptunghi dreapta
3. Titlu stânga
4. Titlu dreapta
5. A
6. C
7. B
8. D

Această structură nu arată faptul că A și B sunt împreună și, în mod similar, C și D sunt împreună.

Utilizarea Containerelor pentru a grupa conținutul conex. Toate controalele dintr-un Container vor apărea împreună în secvență. Într-un container, controalele sunt ordonate cu aceeași regulă: de sus în jos, apoi de la stânga la dreapta.

La înlocuirea Dreptunghiurilor din exemplul anterior cu Containere, ordinea de control este acum logică pentru utilizatorii cititorului de ecran:

1. Container stânga
2. Titlu stânga
3. A
4. B
5. Container dreapta
6. Titlu dreapta
7. C
8. D

Toate comenzile dintr-un Card formular și Galerie sunt grupate automat, deci nu trebuie să utilizați un Container. Cu toate acestea, dacă există subgrupuri, ar trebui să utilizați în continuare Containere pentru acestea.

În acest exemplu, un rând Galerie are o miniatură și două fragmente de text în stânga. În dreapta sunt două butoane. Vizual și logic, cele două seturi de controale ar trebui grupate. Acest lucru asigură că utilizatorii cititorului de ecran vor întâlni primul grupul din stânga înainte de cel din dreapta.

Ordine logică de navigare cu tastatură

Navigarea de la tastatură este un aspect important al oricărei aplicații. Pentru mulți, tastatura este mai eficientă decât utilizarea comenzii tactile sau a mouse-ului. Ordinea de navigare trebuie:

• Urmați fluxul vizual al comenzilor.
• Să urmeze fie o ordine intuitivă de tip Z, respectiv lateral și în jos, fie o ordine „N inversat”, în jos și lateral.
• Să includă tabulatori numai pentru controalele interactive.

AcceptsFocus specifică dacă comenzile pot fi atinse prin tastatură. Pentru controalele clasice, proprietatea echivalentă este TabIndex.

Ordinea de navigare urmează ordinea de control: de la stânga la dreapta, apoi de sus în jos, într-un model „Z”. Îl puteți personaliza în același mod ca și cu comanda de control. De exemplu, controale în Containere, Formular Carduri și Galerie sunt grupate automat. Tasta Tab va naviga prin toate elementele din interiorul containerului înainte de a trece la următorul control din afara containerului.

Dacă ordinea de navigare este neașteptată, ar trebui să verificați mai întâi dacă structura aplicației este logică.

Notă

Când controalele sunt mutate dinamic pe ecran, de exemplu, prin modificarea valorii X sau Y în funcție de a Power Fx expresie, ordinea de navigare nu va fi actualizată.

Soluție pentru ordinea particularizată a filelor

Pentru scenarii rare în care ordinea de navigare de la tastatură ar trebui să fie diferită de ordinea vizuală, puteți poziționa cu grijă controalele în container astfel încât să aibă același efect.

În exemplul de mai jos, butonul A este deasupra butonului B. Ordinea naturală de navigare în file este A, apoi B.

Pentru a inversa ordinea de navigare în file, plasați B într-un control de tip container. Setați valoarea Y a containerului să fie mai mare decât valoarea A. Structura aplicației are acum containerul (și B) înainte de A. Prin urmare, ordinea de navigare în filă este B, apoi A.

Cu această tehnică, și utilizatorii de cititoare de ecran vor întâlni B înainte de A, atunci când navighează fără tasta Tab.

Indexuri de file personalizate (funcție retrasă)

Indicii de file particularizați sunt cei care sunt mai mari decât zero. Nu mai sunt suportate. Toate TabIndex valorile mai mari decât zero vor fi tratate ca zero.

Indexurile de file personalizate sunt aproape întotdeauna un semn de design prost. Există alternative mai bune, cum ar fi crearea unei structuri adecvate a aplicației sau utilizarea SetFocus pentru a schimba focalizarea.

Câteva probleme cu indexurile de file personalizate:

Accesibilitate

Este o problemă serioasă de accesibilitate să ai indici de file particularizați. Utilizatorii de cititoare de ecran navighează într-o aplicație folosind structura sa logică. Indicii de file particularizați ignoră această structură. Deoarece utilizatorii de cititoare de ecran pot naviga și folosind tasta Tab, vor fi confuzi atunci când, folosind alte metode de navigare, vor obține o ordine diferită.

Uzabilitate

Utilizatorii pot fi confuzi atunci când unele elemente par să fie omise. Ei pot fi dezorientați atunci când focalizarea avansează într-o ordine imprevizibilă. Acest lucru este și mai problematic pentru utilizatorii cu dizabilități cognitive.

Întreținere

Producătorii de aplicații trebuie să actualizeze manual TabIndex pentru mai multe controale, ori de câte ori este introdus un nou control. Este ușor să pierdeți o actualizare sau să greșiți ordinea.

Performanță

Pentru a susține indicii de file particularizați, sistemul Power Apps trebuie să examineze toate controalele din pagină și să calculeze ordinea corespunzătoare. Acest calcul este un proces intens. Controalele de containere, cum ar fi Galeria, au reguli complicate privind funcționarea TabIndex pentru controalele fiu. Pentru a respecta aceste reguli, sistemul mapează proprietatea TabIndex dorită de producătorul de aplicații la o altă valoare. Acesta este motivul pentru care, chiar dacă TabIndex este setat la zero pentru toate controalele, marcajul real tabindex din codul HTML va fi un număr pozitiv.

Integrarea cu alte componente

Indicii de file particularizați funcționează numai cu controale încorporate. Controalele care nu sunt integrate în sistemul de indici de file din Power Apps vor avea o ordine de navigare imprevizibilă. Aceasta poate fi o problemă pentru componentele codului. Dezvoltatorii acestor componente trebuie să țină evidența elementelor interactive și să seteze indexul filelor pentru acestea. Poate că ei folosesc biblioteci de la terți, care nici măcar nu oferă o modalitate de a particulariza indicii de file. Pe de altă parte, când toți indicii de file sunt fie 0, fie -1, nu este nevoie să fie implicat sistemul Power Apps pentru indicii de file. Orice componentă terță care este încorporată în aplicație va primi automat secvența corectă în ordinea filelor.

Și invers, când aplicațiile create pe planșă sunt încorporate într-o altă pagină web, indicii de file particularizați nu funcționează. De exemplu, în paginile particularizate. Power Apps nu poate controla elementele din afara aplicației create pe planșă, așa că ordinea generală de navigare în file va fi ilogică.

Pașii următori

Culori accesibile în Power Apps

Consultați și

• Creați aplicații accesibile
• Afișați sau ascundeți conținut de la tehnologiile de asistență pentru aplicații de tip pânză
• Anunțați modificările dinamice cu ajutorul regiunilor live pentru aplicații de tip pânză
• Utilizați verificator de accesibilitate
• Limitări de accesibilitate în aplicații proiectate pe pânză
• Proprietăți de accesibilitate