Organitzar els controls a les aplicacions de llenç accessibles

Els controls d'una aplicació s'haurien d'organitzar per ajudar els usuarisis de lectors de pantalla a navegar de manera seqüencial. Una ordre lògica també redueix la confusió per als usuarisis de teclat i els ajuda a ser més productius.

Nom de pantalla significatiu

Quan es carrega una pantalla, els lectors de pantalla diuen el seu nom. Trieu un nom significatiu per orientar els usuarisis.

Podeu canviar el nom de la pantalla a l'arbre de controls o a la subfinestra de propietats del Power Apps Studio. Seleccioneu la pantalla i, a continuació, seleccioneu per canviar el nom de la pantalla.

El primer element d'una pantalla és el nom. Està visualment amagat i és accessible només per als usuarisis de lectors de pantalla.

Quan es carrega una pantalla nova, el Power Apps se centra en el nom de la pantalla. Si utilitzeu SetFocus immediatament quan es carrega la pantalla, el nom de la pantalla no es llegirà. Considereu la possibilitat de crear un títol visible i fer que sigui una regió en directe per anunciar el canvi en context.

Ordre de control lògic

Els usuarisis que lectors de pantalla poden navegar pel contingut de manera seqüencial. L'ordre ve determinat per la posició dels controls, començant de dalt a baix i d'esquerra a dreta. La mida del control no importa, només les seves propietats X i Y.

En aquest exemple, A apareix primer en l'ordre ja que és el que es troba més a prop de dalt. B i C tenen la mateixa posició vertical, però com que B és més a prop de l'esquerra, apareix abans que C. D apareix en darrer lloc perquè és el que està més lluny de dalt.

Nota

• En el mode Visualització prèvia en editar una aplicació, l'ordre dels controls no s'actualitza per motius de rendiment. L'ordre serà correcte quan l'aplicació es publiqui i s'executi.
• L'ordre dels controls no és el mateix que es mostra a la visualització en arbre dels controls al Power Apps Studio. La visualització en arbre ordena els controls segons quan s'han afegit a l'aplicació. No afecta l'ordre dels controls quan s'executa l'aplicació.
• Quan el valor X o Y d'un control està definit en una expressió, l'ordre de control no s'actualitza quan canvia el resultat de l'expressió. L'ordre es calcula i es corregeix quan es desa l'aplicació, utilitzant l'estat inicial de l'aplicació per avaluar expressions.
  • Si canvieu de posició perquè s'estan ocultant o mostrant altres controls, podeu utilitzar contenidors de disseny automàtic per gestionar X i Y .
  • També podeu col·locar tots els controls d'una manera lògica independentment dels valors d'expressió. Per exemple, si el control A sempre ha d'estar per sota del control B i B pot estar ocult de vegades, estableix A com a Y If(B.Visible, B.Y + B.Height, B.Y + 1). La suma d'1 assegura que A sempre estigui per sota de B, encara que B estigui ocult.

Controls agrupats

L'ordre per defecte és adequat per al contingut aïllat, però no per al contingut agrupat. Considereu dues peces una al costat de l'altra, dibuixades amb controls de Rectangle. Cada peça té una capçalera. Per sota de la capçalera hi ha dos botons apilats verticalment: A i B per a la primera peça i C i D per a l'altra.

L'ordre per defecte és de dalt a baix i d'esquerra a dreta. Per tant, l'ordre dels controls és:

1. Rectangle esquerre
2. Rectangle dret
3. Capçalera esquerra
4. Capçalera dreta
5. A
6. C
7. B
8. D

Aquesta estructura no dona per fet que A i B estan junts, i de manera similar, C i D estan junts.

Utilitzeu els Contenidors per agrupar contingut relacionat. Tots els controls d'un Contenidor es mostraran junts en seqüència. Dins d'un contenidor, els controls s'ordenen amb la mateixa regla: de dalt a baix i d'esquerra a dreta.

Substituint els Rectangles de l'exemple anterior per Contenidors, l'ordre dels controls és ara lògic per als usuarisis de lectors de pantalla:

1. Contenidor esquerre
2. Capçalera esquerra
3. A
4. B
5. Contenidor dret
6. Capçalera dreta
7. C
8. D

Tots els controls d'una Targeta de formulari i una Galeria s'agrupen automàticament i, per tant, no cal que utilitzeu cap Contenidor. No obstant, si hi ha subgrups, s'haurien d'utilitzar Contenidors.

En aquest exemple, una fila de Galeria té una miniatura i dos fragments de text a l'esquerra. A la dreta hi ha dos botons. Visualment i lògicament, s'han d'agrupar els dos conjunts de controls. D'aquesta manera, els usuarisis de lectors de pantalla es trobaran amb el grup esquerre abans que el dret.

Ordre de navegació lògic del teclat

TabIndex especifica com poden arribar als controls els usuarisis de teclat. TabIndex hauria de ser 0 o -1. Amb un ordre de controls lògic com el que s'ha descrit més amunt, hi ha poques raons per tenir un TabIndex superior a 0.

L'ordre de navegació de teclat hauria de seguir el flux visual dels controls. Si l'ordre de navegació és inesperat, primer heu de comprovar si l'estructura de l'aplicació és lògica.

Nota

L'ordre de navegació de teclat no és igual que l'ordre dels controls. TabIndex només afecta la navegació amb la tecla de tabulació. No canvia la manera com els usuarisis de lectors de pantalla naveguen linealment per una aplicació. Alguns usuarisis de lectors de pantalla encara no utilitzen teclats.

Evitar els índexs de pestanya personalitzats

Els índexs de pestanya personalitzats són aquells que són superiors al zero. Gairebé sempre són un signe de mal disseny. Hi ha alternatives com ara crear una estructura d'aplicació adequada o utilitzar SetFocus per canviar el focus.

Eviteu utilitzar índexs de pestanya personalitzats per les raons següents.

Accessibilitat

És un problema d'accessibilitat seriós tenir índexs de pestanyes personalitzats. Els usuaris que fan servir el lector de pantalla navega per una aplicació utilitzant la seva estructura lògica. Els índexs de pestanya personalitzats ignoren aquesta estructura. Ja que els usuaris de lectors de pantalla també poden navegar amb la tecla Tabulador, es confondran quan aconsegueixin una comanda diferent d'altres mètodes de navegació.

Usabilitat

Els usuaris es poden confondre quan alguns elements apareixen omesos. Es poden desorientar quan el focus es desplaça en un ordre imprevisible. Això és encara més problemàtic per als usuaris amb discapacitats cognitives.

Manteniment

Els responsables de l'aplicació han d'actualitzar manualment el TabIndex de diversos controls cada vegada que s'insereixi un de nou. És molt fàcil perdre una actualització o equivocar-se en la comanda.

Rendiment

Per admetre els índexs de pestanya personalitzats de Power Apps, el sistema ha d'examinar tots els controls de la pàgina i calcular l'ordre adient. Aquest càlcul és un procés de intensiu. Els controls de contenidors, com ara la galeria, tenen regles complicades sobre com funciona TabIndex per als controls secundaris. El sistema assigna el TabIndex desitjat per al desenvolupador d'aplicacions a un valor diferent per obeïr aquestes regles. Per això, fins i tot si TabIndex està definit com a zero per a tots els controls, el codi HTML tabindexreal serà un nombre positiu.

Integració amb altres components

Els índexs de pestanyes personalitzats només funcionen amb controls integrats. Els controls que no estan integrats al sistema d'índex de pestanyes de Power Apps tindran un ordre de navegació inesperat. Això pot ser un problema per als components de codi. Els desenvolupadors d'aquests components han de fer un seguiment dels elements interactius i definir l'índex de pestanyes en ells. Poden utilitzar biblioteques de tercers, que fins i tot no proporcionen una manera de personalitzar els índexs de pestanyes. D'altra banda, quan tots els índexs de pestanya són 0 o -1, no cal implicar el sistema d'índex de pestanyes de Power Apps. Qualsevol component de tercers incrustat a l'aplicació obtindrà automàticament la seqüència de pestanyes correcta.

En altra direcció, quan les aplicacions del llenç estan incrustar-se en una altra pàgina web, els índexs de pestanya personalitzats no funcionen. Per exemple, a les pàgines personalitzades. Power Apps no pot controlar els elements fora de l'aplicació del llenç, de manera que l'ordre de navegació de pestanyes global serà il·lògic.

Índex de pestanyes simplificat (previsualització)

Per assegurar-vos que els índexs de pestanyes siguin 0 o -1, habiliteu l'índex de pestanyes simplificat de la característica de l'aplicació des de Configuració > Pròximes funcions.

Important

• Aquesta és una característica de visualització prèvia.
• Les característiques de visualització prèvia no estan dissenyades per a un entorn de producció i poden tenir una funcionalitat restringida. Aquestes característiques estan disponibles abans d’un llançament oficial de producte per tal que els clients el puguin utilitzar abans i enviar-nos els seus comentaris.

Quan aquesta característica està habilitada, tots els valors de TabIndex superiors a zero es tractaran com a zero. Això també inhabilita el sistema de Power Apps d'índex de pestanyes per tal que s'integri millor amb altres components, tal com s'ha descrit anteriorment.

Solució alternativa per a la seqüència de pestanyes personalitzada

Per als escenaris rars en què l'ús de la navegació amb el teclat s'ha de fer de forma diferent de l'ordre de visió, podeu posicionar els controls de contenidor curosament perquè tinguin el mateix efecte.

A l'exemple següent, el botó A està situat a sobre del botó B. L'ordre de navegació de pestanyes natural és A i, a continuació, B.

Per invertir l'ordre de navegació de la pestanya, poseu B en un control de contenidor. Definiu el valor Y del contenidor com a superior a A. L'estructura de l'aplicació ara té el contenidor (i B) abans D. Per tant, l'ordre de navegació de la pestanya és B i, per tant, A.

Amb aquesta tècnica, els usuaris de lector de pantalla també es trobaran amb B abans que A navegueu sense la tecla Tabulació.

Passos següents

Colors accessibles al Power Apps

Consulteu també

• Crear aplicacions accessibles
• Mostrar o amagar el contingut de les tecnologies d'assistència per a aplicacions del llenç
• Anunciar canvis dinàmics amb regions en directe per a aplicacions del llenç
• Utilitzar el Comprovador d'accessibilitat
• Limitacions d'accessibilitat en aplicacions de llenç
• Propietats d'accessibilitat