Freigeben über

Organisieren von Steuerelementen in barrierefreien Canvas-Apps

Steuerelemente in einer App sollten so organisiert werden, dass sie eine sequenzielle Navigation ermöglichen, um es Bildschirmleser-Benutzern zu erleichtern. Eine logische Reihenfolge reduziert auch Verwirrung für Tastaturbenutzer und hilft ihnen, produktiver zu sein.

Aussagekräftiger Bildschirmname

Wenn ein Bildschirm geladen wird, liest der Screenreader dessen Namen vor. Wählen Sie einen aussagekräftigen Namen aus, um Benutzer zu orientieren.

Sie können den Bildschirmnamen in der Steuerelementstruktur oder im Eigenschaftenbereich in Power Apps Studio ändern. Wählen Sie den Bildschirm aus, und wählen Sie dann das Stiftsymbol aus, um den Namen zu bearbeiten. um den Bildschirm umzubenennen.

Bildschirmnamen können aus der Steuerelementstruktur oder dem Eigenschaftenbereich geändert werden, wie im Bild hervorgehoben.

Das erste Element auf einem Bildschirm ist der Name. Er ist visuell verborgen und nur für Benutzer der Sprachausgabe zugänglich.

Wenn ein neuer Bildschirm geladen wird, stellt Power Apps den Fokus auf den Bildschirmnamen. Wenn Sie SetFocus beim Laden des Bildschirms sofort verwenden, wird der Bildschirmname nicht gelesen. Erwägen Sie das Erstellen eines sichtbaren Titels und machen Sie ihn zu einer Liveregion , um die Änderung im Kontext anzukündigen.

Logische Steuerungsreihenfolge

Benutzer der Sprachausgabe können nacheinander durch Inhalte navigieren. Die Reihenfolge wird durch die Position der Steuerelemente bestimmt, beginnend von oben nach unten und dann von links nach rechts. Die Größe des Steuerelements spielt keine Rolle, nur seine X - und Y-Eigenschaften sind wichtig.

In diesem Beispiel wird A zuerst in der Sequenz angezeigt, da sie am nächsten am oberen Rand ist. B und C haben die gleiche vertikale Position, aber da B näher an der linken Seite ist, erscheint sie vor C. D zuletzt, da sie von oben am weitesten entfernt ist.

Wie sich die Positionierung auf die Reihenfolge von 4 Steuerelementen auswirkt.

Hinweis

  • Im Vorschaumodus beim Bearbeiten einer App wird die Steuerelementreihenfolge aus Leistungsgründen nicht aktualisiert. Die Reihenfolge ist korrekt, wenn die App veröffentlicht und ausgeführt wird.
  • Die Reihenfolge der Steuerelemente entspricht nicht der in der Strukturansicht von Steuerelementen in Power Apps Studio. Die Strukturansicht sortiert Steuerelemente nach dem Zeitpunkt, zu dem sie der App hinzugefügt wurden. Sie wirkt sich nicht auf die Reihenfolge der Steuerelemente aus, wenn die App ausgeführt wird.
  • Wenn der X - oder Y-Wert eines Steuerelements auf einen Ausdruck festgelegt ist, wird die Steuerelementreihenfolge nicht aktualisiert, wenn sich das Ergebnis des Ausdrucks ändert. Die Reihenfolge wird berechnet und beim Speichern der App mithilfe des Anfangszustands der App zum Auswerten von Ausdrücken festgelegt.
    • Wenn Sie die Position ändern, da andere Steuerelemente ausgeblendet oder angezeigt werden, können Sie automatische Layout-Container verwenden, die X und Y für Sie verwalten.
    • Sie können alle Steuerelemente auch auf logische Weise positionieren, unabhängig von Ausdruckswerten. Zum Beispiel, wenn Steuerelement A immer unter Steuerelement B sein soll und B manchmal ausgeblendet sein kann, legen Sie A's Y auf If(B.Visible, B.Y + B.Height, B.Y + 1) fest. Durch das Hinzufügen von 1 wird sichergestellt, dass A immer unter B liegt, auch wenn B ausgeblendet ist.

Gruppierte Steuerelemente

Die Standardreihenfolge eignet sich für isolierte Inhalte, aber nicht für gruppierte Inhalte. Betrachten Sie zwei Kacheln nebeneinander, die mit Rectangle-Steuerelement gezeichnet sind. Jede Kachel hat eine Überschrift. Unterhalb der Überschrift sind zwei Schaltflächen senkrecht angeordnet: A und B für die erste Kachel und C und D für die andere.

Beispiel für eine falsche Vorgehensweise: Steuerelemente, die in einer flachen Struktur organisiert sind.

Die Standardreihenfolge geht von oben nach unten und dann von links nach rechts. Daher lautet die Reihenfolge der Steuerelemente:

  1. Linkes Rechteck
  2. Rechts Rechteck
  3. Linke Überschrift
  4. Überschrift rechts
  5. Ein
  6. C
  7. B
  8. D

Diese Struktur vermittelt nicht, dass A und B zusammen sind, und ähnlich sind C und D zusammen.

Verwenden Sie Container , um verwandte Inhalte zu gruppieren. Alle Steuerelemente in einem Container werden in Folge angezeigt. Innerhalb eines Containers werden Steuerelemente mit derselben Regel sortiert: von oben nach unten, dann von links nach rechts.

Durch das Ersetzen der Rechtecke des vorherigen Beispiels mit Behältnissen wird die Reihenfolge der Steuerelement nun logisch für Benutzer der Sprachausgabe angezeigt:

  1. Linker Container
  2. Linke Überschrift
  3. Ein
  4. B
  5. Rechter Container
  6. Überschrift rechts
  7. C
  8. D

Beispiel für empfohlene Vorgehensweise: Steuerelemente, die in einer hierarchischen Struktur mithilfe von Containern organisiert sind.

Alle Steuerelemente auf einer Formularkarte und einem Katalog werden automatisch gruppiert, sodass Sie keinen Container verwenden müssen. Wenn jedoch Untergruppen vorhanden sind, sollten Sie weiterhin Container für diese verwenden.

In diesem Beispiel enthält eine Galeriezeile eine Miniaturansicht und zwei Textstücke links. Rechts befinden sich zwei Schaltflächen. Visuell und logisch sollten die beiden Steuerelementegruppen gruppiert werden. Dadurch wird sichergestellt, dass Benutzer der Sprachausgabe zuerst auf die linke Gruppe und nicht auf die rechte Gruppe treffen.

Beispiel für empfohlene Vorgehensweise: Verwandte Steuerelemente in einem Katalog sind in Containern gruppiert.

Logische Tastaturnavigationsreihenfolge

Die Tastaturnavigation ist ein wichtiger Aspekt jeder App. Für viele ist die Tastatur effizienter als die Verwendung von Toucheingabe oder Maus. Die Navigationsreihenfolge sollte:

  • Folgen Sie dem visuellen Fluss der Bedienelemente.
  • Folgen Sie entweder einer intuitiven Reihenfolge über und dann nach unten „Z“ oder einer Reihenfolge nach unten und dann über „Reverse-N“.
  • Lassen Sie Tabulatoren nur bei interaktiven Steuerelementen stehen.

AcceptsFocus gibt an, ob Steuerelemente über die Tastatur erreicht werden können. Bei klassischen Steuerelementen ist die entsprechende Eigenschaft TabIndex.

Die Navigationsreihenfolge folgt der Steuerungsreihenfolge: von links nach rechts, dann von oben nach unten in einem "Z"-Muster. Sie können sie auf die gleiche Weise wie bei der Steuerungsreihenfolge anpassen. Beispielsweise werden Steuerelemente in Containern, Formularkarten und Katalogen automatisch gruppiert. Die TAB-TASTE navigiert durch alle Elemente innerhalb des Containers, bevor Sie mit dem nächsten Steuerelement außerhalb des Containers fortfahren.

Wenn die Navigationsreihenfolge unerwartet ist, sollten Sie zuerst überprüfen, ob die App-Struktur logisch ist.

Hinweis

Wenn Steuerelemente dynamisch auf dem Bildschirm verschoben werden, z. B. durch Ändern des X - oder Y-Werts gemäß einem Power Fx-Ausdruck, wird die Navigationsreihenfolge nicht aktualisiert.

Workaround für benutzerdefinierte Tab-Reihenfolge

Bei seltenen Szenarien, in denen sich die Reihenfolge der Tastaturnavigation von der visuellen Reihenfolge unterscheiden sollte, können Sie Containersteuerelemente sorgfältig positionieren, um denselben Effekt zu haben.

Im folgenden Beispiel befindet sich Schaltfläche A über Schaltfläche B. Die natürliche Tabreihenfolge ist A, dann B.

Zwei Schaltflächen mit demselben TabIndex, vertikal gestapelt.

Um die Tab-Navigationsreihenfolge umzukehren, fügen Sie B in ein Container-Steuerelement ein. Setzen Sie den Y-Wert des Containers so, dass er über A liegt. Die App-Struktur hat jetzt den Container (und B) vor A. Daher ist die Tab-Navigationsreihenfolge B und dann A.

B wird in einen Container gesetzt, der vor A angezeigt wird.

Bei dieser Technik wird Benutzern der Sprachausgabe auch B vor A angezeigt, wenn Sie ohne die TAB-TASTE navigieren.With this technique, screen reader users will also encounter B before A when navigation without the TAB key.

Benutzerdefinierte Registerkartenindizes (eingestellte Funktion)

Benutzerdefinierte Tab-Indizes sind solche, die größer als Null sind. Sie werden nicht mehr unterstützt. Alle TabIndex-Werte größer als Null werden als Null behandelt.

Benutzerdefinierte Registerkartenindizes sind fast immer ein Zeichen für schlechtes Design. Es gibt bessere Alternativen wie das Erstellen einer geeigneten App-Struktur oder die Verwendung von SetFocus , um den Fokus zu ändern.

Einige Probleme mit benutzerdefinierten Tab-Indizes:

Accessibility

Benutzerdefinierte Tab-Indizes stellen ein schwerwiegendes Problem bei der Barrierefreiheit dar. Sprachausgabebenutzer navigieren in einer App mithilfe ihrer logischen Struktur. Benutzerdefinierte Registerkartenindizes ignorieren diese Struktur. Da Benutzer der Sprachausgabe auch mithilfe der Tab-Taste navigieren können, sind sie verwirrt, wenn sie eine andere Reihenfolge als bei anderen Navigationsmethoden vorfinden.

Usability

Benutzer können verwirrt sein, wenn einige Elemente den Anschein haben, dass sie übersprungen werden. Sie können desorientiert sein, wenn sich der Fokus in einer unvorhersehbaren Abfolge bewegt. Dies ist für Benutzer mit kognitiven Behinderungen noch problematischer.

Maintenance

App-Entwickler müssen den TabIndex mehrerer Steuerelemente manuell aktualisieren, wenn ein neues Steuerelement eingefügt wird. Es ist einfach, ein Update zu verpassen oder die Reihenfolge falsch zu machen.

Leistung

Um benutzerdefinierte Tabulatorindizes zu unterstützen, muss das System von Power Apps alle Steuerelemente auf der Seite untersuchen und die entsprechende Reihenfolge berechnen. Diese Berechnung ist ein intensiver Prozess. Container-Steuerelemente wie Galerie haben komplizierte Regeln dazu, wie TabIndex bei Kindersicherungen funktioniert. Das System ordnet den gewünschten TabIndex des App-Herstellers einem anderen Wert zu, um diesen Regeln zu entsprechen. Dies ist der Grund, auch wenn TabIndex für alle Steuerelemente auf Null festgelegt ist, wird der tatsächliche HTML-Code tabindex eine positive Zahl sein.

Integration in andere Komponenten

Benutzerdefinierte Tab-Indizes funktionieren nur mit integrierten Steuerelementen. Steuerelemente, die nicht in das Registerkartenindexsystem von Power Apps integriert sind, weisen eine unerwartete Navigationsreihenfolge auf. Dies kann ein Problem für Codekomponenten sein. Entwickler dieser Komponenten müssen interaktive Elemente nachverfolgen und den Tab-Index festlegen. Sie verwenden möglicherweise Bibliotheken von Drittanbietern, die möglicherweise nicht einmal eine Möglichkeit zum Anpassen von Registerkartenindizes bieten. Wenn alle Tabindizes entweder 0 oder -1 sind, ist es nicht nötig, das Tabindexsystem von Power Apps zu verwenden. Jede in die App eingebettete Drittanbieterkomponente erhält automatisch die korrekte Tab-Reihenfolge.

In der anderen Richtung funktionieren benutzerdefinierte Registerkartenindizes nicht, wenn Canvas-Apps in eine andere Webseite eingebettet sind. Beispiel: auf benutzerdefinierten Seiten. Power Apps können die Elemente außerhalb der Canvas-App nicht steuern, sodass die gesamte Registerkartennavigationsreihenfolge unlogisch ist.

Nächste Schritte

Barrierefreie Farben in Power Apps

Siehe auch

  • Last updated on