Organisera kontroller i tillgängliga arbetsyteappar

Kontroller i en app bör ordnas så att de visas så att läsare navigerar i ordning. En logisk ordning minskar också förvirringen för tangentbordsanvändare och hjälper dem att vara mer produktiva.

Meningsfullt skärmnamn

När en ny skärm har lästs in, kommer skärmläsarna att meddela dess namn. Välj ett beskrivande namn som ska orientera användarna.

Du kan ändra skärmnamnet i kontrollträdet eller egenskapspanelen i Power Apps Studio. Välj skärmen och välj sedan för att byta namn på skärmen.

Det första elementet på en skärm är namnet. et är visuellt dolt och endast tillgängligt för användare av skärmläsare.

När en ny skärm läses fokuserar Power Apps på skärmnamnet. Om du använder SetFocus direkt när skärmen läses in kommer inte skärmnamnet att läsas. Överväg att skapa en synlig titel och göra den till en liveregion för att meddela förändringen i sammanhanget.

Logisk kontrollordning

Användare av skärmläsare kan navigera innehåll i sekvens. Ordningen bestäms av placeringen av kontrollerna, från början till nedersta och sedan vänster till höger. Storleken på kontrollen spelar ingen roll, bara X och Y egenskaperna är viktiga.

I det här exemplet visas A först i sekvensen eftersom den mest visas högst upp. B och C har samma vertikala position, men eftersom B är närmare vänster, och därför visas det innan C. D visas sist eftersom det är det största från början.

Anteckning

• I läget förhandsversion när du redigerar en app uppdateras inte kontrollordningen av prestationsskäl. Ordern blir korrekt när appen publiceras och körs.
• Kontrollordning är inte samma som i trädvyn för kontroller i Power Apps Studio. Trädvyn sorterar kontroller efter när de lades till i appen. Det påverkar inte ordningen på kontrollerna när appen körs.
• När en kontrolls X- eller Y-värde anges till ett uttryck uppdateras inte kontrollordningen när resultatet av uttrycket ändras. Ordern beräknas och åtgärdas när appen sparas, genom att använda appens initiala tillstånd för att utvärdera uttryck.
  • Om du ändrar dess position för att andra kontroller döljs eller visas kan du använda automatisk layout användas för att hantera X och Y åt dig.
  • Du kan även placera alla kontroller på ett logiskt sätt oavsett uttrycksvärden. Till exempel, om kontroll A alltid ska vara under kontroll B och B kan vara dold ibland, ställ in A för Y att vara If(B.Visible, B.Y + B.Height, B.Y + 1). Tillägget av 1 säkerställer att A alltid är under B, även om B är dold.

Grupperade kontroller

Standardordningen passar för isolerat innehåll men inte för grupperat innehåll. Överväg två paneler sida vid sida, ritade med kontroll Rectangle. Varje panel har en rubrik. Under rubriken finns två knappar staplade stående: A och B för den första panelen och C och D för den andra.

Standardordern går från topp till botten och sedan från vänster till höger. Därför är ordningen på kontrollerna:

1. Vänster rektangel
2. Höger rektangel
3. Vänster rubrik
4. Höger rubrik
5. A
6. C
7. B
8. D

Denna struktur kan inte liknas vid att A och B är tillsammans och på samma sätt är C och D tillsammans.

Använd Containers för att gruppera relaterat innehåll. Alla kontroller i en behållare visas tillsammans i ordning. I en behållare ordnas kontroller med samma regel: översta till nedersta, sedan vänster till höger.

Ersätta Rektanglar i föregående exempel med Behållare kontrollordningen är nu logisk för användare av skärmläsare:

1. Vänster behållare
2. Vänster rubrik
3. A
4. B
5. Höger behållare
6. Höger rubrik
7. C
8. D

Alla kontroller i ett Formkort och Galleri grupperas automatiskt, så du behöver inte använda en behållare. Men om det finns undergrupper bör du fortfarande använda Behållare för dem.

I det här exemplet visas raden Galleri med två textstycken till vänster. Till höger finns två knappar. De två uppsättningar med kontroller ska grupperas visuellt och logiskt. Detta säkerställer att användare av skärmläsare kommer att möta den vänstra gruppen först före höger.

Logisk navigeringsordning för tangentbord

TabIndex anger hur tangentbordsanvändare kan nå kontroller. TabIndex ska antingen vara 0 eller -1. Med en logisk kontrollordning som beskrivs ovan finns det ingen anledning att ha TabIndex större än 0.

Navigeringsordning för tangentbord bör följa det visuella flödet av kontroller. Om navigeringsordningen är oväntat bör du först kontrollera om appstrukturen är logisk.

Anteckning

Navigeringsordning för tangentbord är inte samma sak som kontrollordning. TabIndex påverkar endast navigeringen med tabbtangenter. Det förändrar inte hur användare av skärmläsare navigerar en app linjärt. Vissa användare av skärmläsare använder inte ens tangentbord.

Undvik anpassade flikindex

Anpassade flikindex är index som är större än noll. De är nästan alltid ett tecken på felaktig design. Det finns bättre alternativ som att skapa en lämplig appstruktur eller använda SetFocus att ändra fokus.

Undvik att använda anpassade flikindex på grund av följande orsaker.

Hjälpmedel

Det är ett stort tillgänglighetsproblem om du har anpassade flikindex. Skärmanvändare läsare navigera i en app med hjälp av sin logiska struktur. Anpassade flikindex ignorerar den strukturen. Eftersom skärmläsare kan användare också navigera med hjälp av nyckeln Flik kommer de att bli förvirrade när de får en annan ordning än andra navigeringsmetoder.

Användbarhet

Användare kan bli förväxlas med dem som ser ut att hoppa över vissa objekt. De kan diskvalificeras när fokusen flyttas i en oförutselig ordning. Detta är ännu viktigare för användare med funktionshinder.

Underhåll

Appskapare måste uppdatera TabIndex med flera kontroller manuellt när en ny kontroller infogas. Det är lätt att missa en uppdatering eller få fel ordning.

Resultat

För att kunna använda anpassade flikindex måste Power Apps systemet granska alla kontroller på sidan och beräkna ordningen. Den här beräkningen är en omfattande process. Behållare-kontroller som Galleri har komplicerade regler för hur TabIndex fungerar för underordnade kontroller. Systemet mappar apptillverkarens önskade TabIndex till ett annat värde för att reglerna ska kunna följas. Det är därför även om TabIndex är inställt på noll för alla kontroller, den faktiska HTML tabindex har några positiva tal.

Integrering med andra komponenter

Anpassade flikindex fungerar bara med inbyggda kontroller. Kontroller som inte är integrerade i ' Power Apps tabbindexsystemet får en oväntad navigeringsordning. Det kan vara ett problem för kodkomponenter. Utvecklare av dessa komponenter måste hålla ordning på interaktiva element och ange flikindex för dem. De kanske använder bibliotek från andra företag, vilket kanske inte ens är ett sätt att anpassa flikindex. Om alla tabbindex är antingen 0 eller -1 behöver du inte ha med Power Apps tabbindexsystemet att göra. Alla tredjepartskomponenter som är inbyggda i appen får automatiskt rätt fliksekvens.

I den andra riktningen fungerar inte anpassade flikindex när appar är inbäddade i en annan webbsida. Till exempel i anpassade sidor. Power Apps kan inte kontrollera elementen utanför appen, så den övergripande fliknavigeringsordningen blir ologisk.

Förenklat flikindex (förhandsversion)

För att säkerställa att flikindex är 0 eller -1 aktiverar du appfunktionen Förenklat flikindex från Inställningar > Kommande funktioner.

Viktigt

• Detta är en förhandsversion.
• Förhandsversionsfunktioner ska inte användas i produktion och funktionerna kan vara begränsade. Funktionerna är tillgängliga före den officiella publiceringen så att kunderna kan få tillgång tidigare och ge oss feedback.

När den här funktionen är aktiverad behandlas alla TabIndex-värden som är större än noll som noll. Detta inaktiverar även Power Apps' flikindexsystemet så att det kan integreras bättre med andra komponenter enligt beskrivningen ovan.

Lösning för anpassad fliksekvens

I undantagsfall där navigeringsordning för tangentbord ska vara annorlunda än visuell ordning, kan du placera Behållare-kontrollerna noggrant för att få samma effekt.

I exemplet nedan visas knappen A ovanför knapp B. Den fysiska navigeringsordningen på fliken är A och sedan B.

Lägg till B i en Behållare-kontroll om du vill ändra navigeringsordningen på fliken. Ange Y-värdet för Behållare som ska vara över A. Appstrukturen har nu Behållare (och B) före A. Fliknavigeringsordningen är därför B och sedan A.

Med den här metoden kan Läsare användare också stöta på B före A när de navigerar utan tangenten Tabb.

Nästa steg

Tillgängliga färger i Power Apps

Se även

• Skapa tillgängliga appar
• Visa eller dölj innehåll från hjälpmedelstekniker för arbetsyteappar
• Meddela dynamiska ändringar med aktiv regioner för arbetsyteappar
• Använda tillgänglighetskontrollen
• Begränsningar för tillgänglighet i arbetsyteappar
• Hjälpmedelsegenskaper