Freigeben über


Tastaturinteraktionen

Tastatur-Hero-Bild

Erfahren Sie, wie Sie Ihre Windows-Apps so entwerfen und optimieren, dass sie sowohl den Anforderungen von erfahrenen Tastaturnutzern als auch von Personen mit Behinderungen und anderen Barrierefreiheitsanforderungen das bestmögliche Erlebnis bieten.

Geräteübergreifend ist die Tastatureingabe ein wichtiger Bestandteil der allgemeinen Windows app Interaktionserfahrung. Mit einem gut gestalteten Tastaturerlebnis können Benutzer effizient in der Benutzeroberfläche Ihrer App navigieren und auf deren volle Funktionalität zugreifen, ohne die Hände von der Tastatur heben zu müssen.

In diesem Thema konzentrieren wir uns speziell auf Windows app Design für tastatureingaben auf PCs. Eine gut durchdachte Tastaturerfahrung ist jedoch wichtig für die Unterstützung von Barrierefreiheitstools wie der Windows-Sprachausgabe, der Verwendung von Softwaretastaturen wie der Bildschirmtastatur (OSK) und der Touch-Tastatur sowie zur Unterstützung anderer Eingabegerätetypen, z. B. eines Gamepads oder einer Fernbedienung.

Viele der hier behandelten Richtlinien und Empfehlungen, einschließlich Fokus-Visuals, Zugriffstasten und UI-Navigation, gelten auch für diese anderen Szenarien.

ANMERKUNG Während Hardware- und Softwaretastaturen für die Texteingabe verwendet werden, ist der Fokus dieses Themas Navigation und Interaktion.

Integrierte Unterstützung

Zusammen mit der Maus ist die Tastatur das am häufigsten verwendete Peripheriegerät auf PCs und ist daher ein grundlegender Bestandteil der PC-Erfahrung. PC-Benutzer erwarten eine umfassende und konsistente Erfahrung sowohl vom System als auch von einzelnen Apps als Reaktion auf Tastatureingaben.

Alle WinUI-Steuerelemente bieten integrierte Unterstützung für umfassende Tastaturerfahrungen und Benutzerinteraktionen, während die Plattform selbst eine umfangreiche Grundlage für die Erstellung von Tastaturerfahrungen bietet, die als am besten geeignet für Ihre benutzerdefinierten Steuerelemente und Apps erachtet werden.

Benutzerdefinierte Funktionen und effiziente Tastaturen

Wie erwähnt, ist die Tastaturunterstützung integraler Bestandteil, um sicherzustellen, dass Ihre Anwendungen hervorragend für Benutzer mit unterschiedlichen Fähigkeiten, Fähigkeiten und Erwartungen funktionieren. Es wird empfohlen, Folgendes zu priorisieren.

  • Unterstützen der Tastaturnavigation und -interaktion
    • Stellen Sie sicher, dass Aktionen erfordernde Elemente als Tabstopps (und nicht umsetzbare Elemente nicht) identifiziert werden, und die Navigationsreihenfolge ist logisch und vorhersehbar (siehe Tabstopps)
    • Festlegen des anfänglichen Fokus auf das logischste Element (siehe Anfänglicher Fokus)
    • Bereitstellen der Pfeiltastennavigation für "innere Navigationen" (siehe Navigation)
  • Unterstützen von Tastenkombinationen
    • Beschleuniger-Tasten für schnelle Aktionen bereitstellen (siehe Beschleuniger)
    • Stellen Sie access Tasten bereit, um in der Benutzeroberfläche Ihrer Anwendung zu navigieren (siehe Access Keys)

Fokussierte Visualisierungen

WinUI unterstützt ein einzelnes visuelles Design mit Fokus, das für alle Eingabetypen und Umgebungen gut geeignet ist. Visueller Fokus

Ein Fokusbild:

  • Wird angezeigt, wenn ein UI-Element den Fokus von einer Tastatur und/oder gamepad/Fernbedienung erhält
  • Wird als hervorgehobener Rahmen um das UI-Element gerendert, um anzugeben, dass eine Aktion ausgeführt werden kann
  • Hilft einem Benutzer, in einer App-UI zu navigieren, ohne verloren zu gehen
  • Kann für Ihre App angepasst werden (Siehe Visuelle Fokuselemente mit hoher Sichtbarkeit)

HINWEIS Die WinUI-Fokusanzeige ist nicht mit dem Fokusrechteck der Sprachausgabe identisch.

Tabulatorstopps

Um ein Steuerelement (einschließlich Navigationselemente) mit der Tastatur zu verwenden, muss das Steuerelement den Fokus haben. Eine Möglichkeit für ein Steuerelement, den Tastaturfokus zu erhalten, besteht darin, den Zugriff über die Tabulatornavigation zu ermöglichen, indem es als Tabstopp in der Tabulatorreihenfolge Ihrer Anwendung identifiziert wird.

Damit ein Steuerelement in die Aktivierreihenfolge aufgenommen werden kann, muss die IsEnabled-Eigenschaft auf true festgelegt werden, und die IsTabStop-Eigenschaft muss auf true festgelegt werden.

Um ein Steuerelement speziell aus der Aktivierreihenfolge auszuschließen, legen Sie die IsTabStop-Eigenschaft auf "false" fest.

Standardmäßig entspricht die Tab-Reihenfolge der Reihenfolge, in der UI-Elemente angelegt werden. Wenn z. B. ein StackPanel eine Button, ein Checkbox und eine TextBox enthält, ist die Tab-Reihenfolge Button, Checkbox, und TextBox.

Sie können die Standardreihenfolge der Registerkarten überschreiben, indem Sie die TabIndex-Eigenschaft festlegen.

Tabulatorreihenfolge sollte logisch und vorhersehbar sein

Ein gut gestaltetes Tastaturnavigationsmodell mit einer logischen und vorhersehbaren Tab-Reihenfolge macht Ihre App intuitiver und hilft Benutzern, Funktionen effizienter und effektiver zu erkunden, zu entdecken und darauf zuzugreifen.

Alle interaktiven Steuerelemente sollten Tabstopps aufweisen (es sei denn, sie befinden sich in einer Gruppe), während nicht interaktive Steuerelemente, wie z. B. Bezeichnungen, keine aufweisen sollten.

Vermeiden Sie eine benutzerdefinierte Tabreihenfolge, bei der der Fokus in Ihrer Anwendung unkontrolliert springt. Beispielsweise sollte eine Liste von Steuerelementen in einem Formular eine Tabulatorreihenfolge aufweisen, die von oben nach unten und von links nach rechts fließt (je nach Gebietsschema).

Weitere Informationen zum Anpassen von Tabstopps finden Sie unter Barrierefreiheit der Tastatur .

Versuchen Sie, die Aktivierreihenfolge und die visuelle Reihenfolge zu koordinieren

Die Koordination der Tab-Reihenfolge und der visuellen Reihenfolge (auch als Lesereihenfolge oder Anzeigereihenfolge bezeichnet) hilft, Verwirrung bei Benutzern zu verringern, während sie in der Benutzeroberfläche Ihrer Anwendung navigieren.

Versuchen Sie, die wichtigsten Befehle, Steuerelemente und Inhalte zuerst in der Tabulatorreihenfolge und in der visuellen Reihenfolge zu bewerten und darzustellen. Die tatsächliche Anzeigeposition kann jedoch vom übergeordneten Layoutcontainer und bestimmten Eigenschaften der untergeordneten Elemente abhängen, die das Layout beeinflussen. Insbesondere können Layouts, die eine Rastermetapher oder eine Tabellenmetapher verwenden, eine ganz andere visuelle Reihenfolge als die Tab-Reihenfolge aufweisen.

ANMERKUNG Die visuelle Reihenfolge ist auch von Gebietsschema und Sprache abhängig.

Anfänglicher Fokus

Der anfängliche Fokus gibt das UI-Element an, das den Fokus erhält, wenn eine Anwendung oder eine Seite zum ersten Mal gestartet oder aktiviert wird. Wenn Sie eine Tastatur verwenden, beginnt ein Benutzer von diesem Element aus mit der Interaktion mit der Benutzeroberfläche Ihrer Anwendung.

Bei UWP-Apps wird der anfängliche Fokus auf das Element mit dem höchsten TabIndex festgelegt, der den Fokus erhalten kann. Untergeordnete Elemente von Containersteuerelementen werden ignoriert. Bei einem Gleichstand erhält das erste Element im visuellen Baum den Fokus.

Festlegen des anfänglichen Fokus auf das logischste Element

Legen Sie den anfänglichen Fokus auf das UI-Element für die erste oder primäre Aktion fest, die Benutzer beim Starten ihrer App oder beim Navigieren zu einer Seite am wahrscheinlichsten ausführen. Einige Beispiele sind:

  • Eine Foto-App, in der der Fokus auf das erste Element in einem Katalog festgelegt ist
  • Eine Musik-App, in der der Fokus auf die Wiedergabeschaltfläche festgelegt ist

Setzen Sie den anfänglichen Fokus nicht auf ein Element, das ein potenziell negatives oder sogar katastrophales Ergebnis offenlegt

Diese Funktionalitätsebene sollte die Wahl eines Benutzers sein. Das Festlegen des anfänglichen Fokus auf ein Element mit bedeutendem Effekt kann zu unbeabsichtigtem Datenverlust oder Systemzugriff führen. Legen Sie beispielsweise den Fokus nicht auf die Schaltfläche "Löschen" fest, wenn Sie zu einer E-Mail navigieren.

Weitere Informationen zum Überschreiben der Tab-Reihenfolge finden Sie in der Fokusnavigation.

Die Tastaturnavigation wird in der Regel über die TAB-TASTE und die Pfeiltasten unterstützt.

Tabulatortasten und Pfeiltasten

WinUI-Steuerelemente folgen standardmäßig den folgenden grundlegenden Tastaturverhalten:

  • Tabulatortasten navigieren zwischen aktiven Steuerelementen in der Tab-Reihenfolge.
  • UMSCHALT+Tab navigiert in umgekehrter Tabulatorreihenfolge. Wenn der Benutzer mithilfe der Pfeiltaste innerhalb des Steuerelements navigiert hat, wird der Fokus auf den letzten bekannten Wert innerhalb des Steuerelements festgelegt.
  • Pfeiltasten ermöglichen eine steuerelementspezifische "innere Navigation", wenn der Benutzer "innere Navigation" eingibt, navigieren die Pfeiltasten nicht aus dem Steuerelement heraus. Einige Beispiele sind:
    • Pfeiltaste nach oben/unten bewegt den Fokus zwischen ListView und MenuFlyout
    • Ändern Sie die aktuell ausgewählten Werte für Slider und RatingsControl
    • Bewegen Sie das Caret innerhalb von TextBox
    • Elemente innerhalb erweitern/reduzieren TreeView

Verwenden Sie diese Standardverhalten, um die Tastaturnavigation Ihrer Anwendung zu optimieren.

Die Bereitstellung der Pfeiltastennavigation in einer Reihe verwandter Steuerelemente stärkt ihre Beziehung innerhalb der gesamten Organisation der Benutzeroberfläche Ihrer Anwendung.

Beispielsweise bietet das hier gezeigte ContentDialog Steuerelement standardmäßig eine innere Navigation für eine horizontale Reihe von Schaltflächen (für benutzerdefinierte Steuerelemente siehe den Abschnitt „Steuerelementgruppe“).

Beispiel für ein Dialogfeld

Die Interaktion mit einer Sammlung verwandter Schaltflächen wird durch die Pfeiltastennavigation vereinfacht.

Wenn Elemente in einer einzelnen Spalte angezeigt werden, navigieren die Pfeiltasten nach oben/unten zwischen den Elementen. Wenn Elemente in einer einzigen Zeile angezeigt werden, navigiert die Nach-rechts-/Nach-links-Taste zwischen den Elementen. Wenn Elemente über mehrere Spalten verteilt sind, können alle vier Pfeiltasten zur Navigation verwendet werden.

Durch Definieren eines einzelnen Tabstopps für eine Sammlung verwandter oder ergänzender Steuerelemente können Sie die Anzahl der allgemeinen Tabstopps in Ihrer App minimieren.

Die folgenden Bilder zeigen beispielsweise zwei gestapelte ListView Steuerelemente. Das Bild auf der linken Seite zeigt die Pfeiltastennavigation, die mit einem Tabstopp zum Navigieren zwischen ListView Steuerelementen verwendet wird, während das Bild auf der rechten Seite zeigt, wie die Navigation zwischen Kindelementen einfacher und effizienter gestaltet werden kann, indem die Notwendigkeit entfällt, übergeordnete Steuerelemente mit der Tabulatortaste zu durchlaufen.

Pfeil und Registerkarte Nur Pfeil

Die Interaktion mit zwei gestapelten ListView-Steuerelementen kann einfacher und effizienter gestaltet werden, indem der Tabstopp und die Navigation mit nur Pfeiltasten eliminiert wird.

Besuchen Sie den Abschnitt "Steuerelementgruppe" , um zu erfahren, wie Sie die Optimierungsbeispiele auf Ihre Anwendungs-UI anwenden.

Interaktion und Befehle

Sobald ein Steuerelement den Fokus hat, kann ein Benutzer mit dem Steuerelement interagieren und alle zugehörigen Funktionen mithilfe bestimmter Tastatureingaben aufrufen.

Texteingabe

Für diese Steuerelemente, die speziell für die Texteingabe entwickelt wurden, z. B. TextBox und RichEditBox, werden alle Tastatureingaben für die Eingabe oder Navigation von Text verwendet, die Vorrang vor anderen Tastaturbefehlen haben. Beispielsweise erkennt das Dropdownmenü für ein AutoSuggestBox Steuerelement die LEERTASTE nicht als Auswahlbefehl.

Texteingabe

LEERTASTE

Wenn sie sich nicht im Texteingabemodus befindet, ruft die LEERTASTE die Aktion oder den Befehl auf, der dem fokussierten Steuerelement zugeordnet ist (genau wie ein Tippen mit Toucheingabe oder Mausklick).

LEERTASTE

Eingabetaste

Die EINGABETASTE kann je nach Steuerelement mit Fokus eine Vielzahl gängiger Benutzerinteraktionen ausführen:

  • Aktiviert Befehlssteuerelemente wie z. B. ein Button oder Hyperlink. Um Verwirrung bei Endbenutzern zu vermeiden, aktiviert die EINGABETASTE auch Steuerelemente, die wie Befehlssteuerungen aussehen, wie etwa ToggleButton oder AppBarToggleButton.
  • Zeigt die Auswahloberfläche für Steuerelemente wie ComboBox und DatePicker. Die Eingabetaste bestätigt die Auswahl und schließt die Auswahl-UI.
  • Aktiviert Listensteuerelemente wie ListView, GridViewund ComboBox.
    • Die EINGABETASTE führt die gleiche Auswahlaktion wie die LEERTASTE für Listen- und Rasterelemente aus, es sei denn, es gibt eine zusätzliche Aktion, die diesen Elementen zugeordnet ist (Öffnen eines neuen Fensters).
    • Wenn dem Steuerelement eine zusätzliche Aktion zugeordnet ist, führt die EINGABETASTE die zusätzliche Aktion aus, und die LEERTASTE führt die Auswahlaktion aus.

ANMERKUNG Die EINGABETASTE und die LEERTASTE führen nicht immer dieselbe Aktion aus, führen jedoch häufig die gleiche Aktion aus.

Eingabetaste

Esc-Taste

Mit der ESC-Taste kann ein Benutzer vorübergehende UI (zusammen mit allen laufenden Aktionen in dieser Benutzeroberfläche) abbrechen.

Beispiele für diese Erfahrung sind:

  • Der Benutzer öffnet einen ComboBox mit einem ausgewählten Wert und verwendet die Pfeiltasten, um die Fokusauswahl auf einen neuen Wert zu verschieben. Durch Drücken der Esc-Taste wird ComboBox geschlossen und der ausgewählte Wert auf den ursprünglichen Wert zurückgesetzt.
  • Der Benutzer führt eine endgültige Löschung einer E-Mail durch und wird aufgefordert, mit ContentDialog die Aktion zu bestätigen. Der Benutzer entscheidet, dass dies nicht die beabsichtigte Aktion ist, und drückt die ESC-TASTE , um das Dialogfeld zu schließen. Wenn die ESC-Taste der Schaltfläche "Abbrechen " zugeordnet ist, wird das Dialogfeld geschlossen, und die Aktion wird abgebrochen. Die ESC-Taste wirkt sich nur auf vorübergehende UI aus und schließt die App-UI nicht und navigiert nicht zurück.

Escape-Taste

Start- und Ende-Tasten

Mit den Tasten "Start " und "Ende " können Benutzer zum Anfang oder Ende eines UI-Bereichs scrollen.

Beispiele für diese Erfahrung sind:

  • Für ListView und GridView Steuerelemente verschiebt die Home-Taste den Fokus auf das erste Element und scrollt es in die Ansicht, während die End-Taste den Fokus auf das letzte Element verschiebt und es in die Ansicht scrollt.
  • Bei einem ScrollView Steuerelement scrollt die Start-Taste zum oberen Rand des Bereichs, während die End-Taste zum unteren Rand des Bereichs scrollt, ohne den Fokus zu ändern.

Start- und Endschlüssel

BILD-AUF- und BILD-AB-TASTE

Mit den Seitentasten kann ein Benutzer einen Bereich der Benutzeroberfläche in einzelnen Schritten scrollen.

Die ListView bewirkt für GridView und Steuerungen einen Bildlauf nach oben um eine "Seite" (in der Regel entspricht dies der Viewporthöhe) und verschiebt den Fokus an den oberen Rand des Bereichs. Alternativ verschiebt die BILD-AB-TASTE den Bereich um eine Seite nach unten und verschiebt den Fokus an den unteren Rand des Bereichs.

Bild-auf- und Bild-ab-Taste

F6-Taste

Mit der F6-TASTE kann ein Benutzer zwischen Bereichen oder wichtigen Abschnitten Ihrer App oder Benutzeroberfläche wechseln. Umschalt-F6 wechselt in der Regel rückwärts (siehe Tastaturzugänglichkeit).

Diese beziehen sich häufig auf Orientierungspunkte und Überschriften, müssen aber nicht direkt übereinstimmen.

Beispiel:

  • In Edge wechselt das Drücken von F6 zwischen der Registerkartenleiste, der Adress- und App-Leiste und dem Seiteninhalt.
  • In File Explorer wechselt das Drücken von F6 zwischen den Abschnitten der App.
  • Auf dem Desktop wechselt das Drücken von F6 zwischen Teilen der Taskleiste und dem Desktop.

F6-TASTE

Tastenkürzel

Zusätzlich zur Implementierung der Tastaturnavigation und -aktivierung empfiehlt es sich auch, Tastenkombinationen wie Tastaturbeschleuniger und Zugriffstasten für wichtige oder häufig verwendete Funktionen zu implementieren.

Tastenkombinationen können die Nutzung Ihrer App einfacher machen, indem sie sowohl eine verbesserte Unterstützung für Zugänglichkeit als auch eine verbesserte Effizienz für Tastaturbenutzer bieten.

Eine Verknüpfung ist eine Tastenkombination, die die Produktivität verbessert, indem sie dem Benutzer eine effiziente Möglichkeit bietet, auf die App-Funktionalität zuzugreifen. Es gibt zwei Arten von Tastenkürzeln:

  • Beschleuniger sind Tastenkürzel, die einen App-Befehl aufrufen. Ihre App kann möglicherweise eine spezifische Benutzeroberfläche bereitstellen, die dem Befehl entspricht, oder auch nicht. Zugriffstasten bestehen in der Regel aus der STRG-Taste und einer Buchstabentaste.
  • Access Keys sind Tastenkombinationen, die den Fokus auf bestimmte UI in Ihrer Anwendung festlegen. Access Tasten bestehen in der Regel aus der ALT-TASTE und einer Buchstabentaste.

Die Bereitstellung konsistenter Tastenkombinationen, die ähnliche Aufgaben in allen Anwendungen unterstützen, macht sie wesentlich nützlicher und leistungsfähiger und hilft Benutzern, sich daran zu erinnern.

Beschleuniger

Beschleuniger helfen Benutzern, allgemeine Aktionen in einer Anwendung viel schneller und effizienter auszuführen.

Beispiele für Beschleuniger:

  • Durch Drücken von STRG+N wird an einer beliebigen Stelle in der Mail-App ein neues E-Mail-Element gestartet.
  • Durch Drücken von STRG+E an einer beliebigen Stelle in Microsoft Edge (und vielen Microsoft Store-Anwendungen) wird die Suche gestartet.

Beschleuniger haben die folgenden Merkmale:

  • Sie verwenden in erster Linie STRG- und Funktionstastensequenzen (Windows-Systemtasten verwenden auch ALT+ nicht alphanumerische Tasten und die Windows-Logo-Taste).
  • Sie werden nur den am häufigsten verwendeten Befehlen zugewiesen.
  • Sie sind zum Auswendiglernen gedacht und werden nur in Menüs, QuickInfos und der Hilfe dokumentiert.
  • Sie haben Auswirkungen auf die gesamte Anwendung, wenn sie unterstützt werden.
  • Sie sollten konsequent zugewiesen werden, da sie auswendig gelernt und nicht direkt dokumentiert werden.

Zugriffstasten

Unter Access Keys seite finden Sie ausführlichere Informationen zur Unterstützung von access Schlüsseln mit WinUI.

Access Tasten helfen Benutzern mit Motorfunktionsbehinderungen, jeweils eine Taste zu drücken, um für ein bestimmtes Element in der Benutzeroberfläche zu handeln. Darüber hinaus können Zugriffstasten verwendet werden, um zusätzliche Tastenkombinationen bereitzustellen, damit fortgeschrittene Benutzer Aktionen schnell ausführen können.

Zugangsschlüssel weisen die folgenden Merkmale auf:

  • Sie verwenden die ALT-TASTE plus eine alphanumerische Taste.
  • Sie dienen in erster Linie der Barrierefreiheit.
  • Sie werden direkt auf der Benutzeroberfläche, neben dem Steuerelement, über Key Tips dokumentiert.
  • Sie wirken sich nur im aktuellen Fenster aus und navigieren zum entsprechenden Menüelement oder Steuerelement.
  • Einheitlich sollten Access-Keys wann immer möglich den häufig verwendeten Befehlen (insbesondere Commit-Schaltflächen) zugewiesen werden.
  • Sie sind lokalisiert.

Allgemeine Tastenkombinationen

Die folgende Tabelle enthält ein kleines Beispiel für häufig verwendete Tastenkombinationen.

Maßnahme Tastenbefehl
Alle auswählen STRG+A
Fortlaufend auswählen UMSCHALT+PFEILTASTE
Speichern STRG+S
Suchen STRG+F
Print STRG+P
Kopieren STRG+C
Schneiden STRG+X
Kleister STRG+V
Undo STRG+Z
Nächste Registerkarte STRG+TAB
Registerkarte schließen STRG+F4 oder STRG+W
Semantischer Zoom STRG + + oder STRG + -

Eine umfassende Liste der Windows-Systemverknüpfungen finden Sie unter Tastenkombinationen für Windows. Allgemeine Anwendungsverknüpfungen finden Sie unter Tastenkombinationen für Microsoft-Anwendungen.

Erweiterte Erfahrungen

In diesem Abschnitt erläutern wir einige der komplexeren Tastaturinteraktionsfunktionen, die von WinUI-Apps unterstützt werden, sowie einige der Verhaltensweisen, die Sie beachten sollten, wenn Ihre App auf verschiedenen Geräten und mit verschiedenen Tools verwendet wird.

Kontrollgruppe

Sie können eine Gruppe verwandter oder ergänzender Steuerelemente in einer "Steuerelementgruppe" (oder einem direktionalen Bereich) gruppieren, die die "innere Navigation" mithilfe der Pfeiltasten ermöglicht. Die Steuerelementgruppe kann ein einzelner Tabstopp sein, oder Sie können mehrere Tabstopps innerhalb der Steuerelementgruppe angeben.

Pfeiltastennavigation

Benutzer erwarten Unterstützung für die Navigation mit Pfeiltasten, wenn eine Gruppe ähnlicher, verwandter Steuerelemente in einem Benutzeroberflächenbereich vorhanden ist:

  • AppBarButtons in einem CommandBar
  • ListItems oder GridItems innerhalb ListView oder GridView
  • Buttons innerhalb ContentDialog

WinUI-Steuerelemente unterstützen standardmäßig die Navigation mit Pfeiltasten. Verwenden Sie XYFocusKeyboardNavigation="Enabled" für benutzerdefinierte Layouts und Steuerelementgruppen, um ein ähnliches Verhalten sicherzustellen.

Erwägen Sie die Unterstützung für die Navigation mit Pfeiltasten, wenn Sie die folgenden Steuerelemente verwenden:

Dialogfeldschaltflächen

Dialogfeldschaltflächen

Optionsfelder

Optionsfelder

AppBar-Schaltflächen

AppBarButtons

Listen- und Rasterelemente

ListItems und GridItems

Tabulatorstopps

Je nach Funktionalität und Layout Ihrer Anwendung könnte die beste Navigationsoption für eine Steuerelementgruppe ein einzelner Tabstopp mit Pfeilnavigation zu untergeordneten Elementen, mehrere separate Tabstopps oder eine Kombination davon sein.

Verwenden Sie mehrere Tabstopps und Pfeiltasten für Schaltflächen.

Barrierefreiheitsbenutzer verlassen sich auf bewährte Tastaturnavigationsregeln, die in der Regel keine Pfeiltasten verwenden, um in einer Sammlung von Schaltflächen zu navigieren. Benutzer ohne Sehbehinderungen können jedoch das Gefühl haben, dass das Verhalten natürlich ist.

Ein Beispiel für das standardmäßige WinUI-Verhalten in diesem Fall ist die ContentDialog. Während Pfeiltasten zum Navigieren zwischen Schaltflächen verwendet werden können, ist jede Schaltfläche auch ein Tabstopp.

Weisen Sie einem vertrauten UI-Muster einen einzelnen Tabstopp zu.

In Fällen, in denen Ihr Layout einem bekannten UI-Muster für Steuerelementgruppen folgt, kann das Zuweisen eines einzelnen Tabstopps zur Gruppe die Navigationseffizienz für Benutzer verbessern.

Beispiele sind:

  • RadioButtons
  • Mehrere ListViews, die wie ein einziger ListView aussehen und sich verhalten
  • Jede Benutzeroberfläche, die so aussieht und sich wie das Raster von Kacheln verhält (z. B. die Kacheln im Startmenü)

Angeben des Verhaltens der Kontrollgruppe

Verwenden Sie die folgenden APIs, um das verhalten benutzerdefinierter Steuerelementgruppen zu unterstützen (alle werden weiter unten in diesem Thema ausführlicher erläutert):

Die folgende Abbildung zeigt ein intuitives Tastaturnavigationsverhalten für eine Steuerelementgruppe von verbundenen Optionsfeldern. In diesem Fall empfehlen wir einen einzelnen Tabstopp für die Steuerelementgruppe, die innere Navigation zwischen den Optionsfeldern mithilfe der Pfeiltasten, die Start-Taste, die an das erste Optionsfeld gebunden ist, und die Ende-Taste, die an das letzte Optionsfeld gebunden ist.

Alles zusammensetzen

Tastatur und Sprachausgabe

Narrator ist ein Bedienungshilfen-Tool, das für Tastaturbenutzer konzipiert ist (andere Eingabetypen werden ebenfalls unterstützt). Die Sprachausgabefunktionen gehen jedoch über die Tastaturinteraktionen hinaus, die von WinUI-Apps unterstützt werden, und beim Entwerfen Ihrer WinUI-App für die Sprachausgabe ist zusätzliche Sorgfalt erforderlich. (Die Seite 'Narrator-Grundlagen' führt Sie durch die Benutzererfahrung von Narrator.)

Einige der Unterschiede zwischen dem Tastaturverhalten von WinUI und den von der Sprachausgabe unterstützten Verhaltensweisen umfassen:

  • Zusätzliche Tastenkombinationen für die Navigation zu UI-Elementen, die nicht über die standardmäßige Tastaturnavigation verfügbar gemacht werden, z. B. FESTSTELLTASTE+Pfeiltasten zum Lesen von Steuerelementbeschriftungen.
  • Navigation zu deaktivierten Elementen. Standardmäßig werden deaktivierte Elemente nicht über die standardmäßige Tastaturnavigation verfügbar gemacht.
  • steuern Sie "Ansichten" für schnelleres Navigieren basierend auf der UI-Granularität. Benutzer können zu Elementen, Zeichen, Wörtern, Zeilen, Absätzen, Links, Überschriften, Tabellen, Landmarks und Vorschlägen navigieren. Die Standardtastaturnavigation macht diese Objekte als flache Liste verfügbar, was die Navigation möglicherweise umständlich macht, es sei denn, Sie stellen Tastenkombinationen bereit.

Fallstudie – AutoSuggestBox-Steuerelement

Auf die Suchschaltfläche für die AutoSuggestBox Standardtastaturen kann nicht mithilfe von Tab- und Pfeiltasten zugegriffen werden, da der Benutzer die EINGABETASTE drücken kann, um die Suchabfrage zu übermitteln. Es kann jedoch über den Bildschirmleser zugegriffen werden, indem der Benutzer die Feststelltaste + eine Pfeiltaste drückt.

Automatischer Tastaturfokus

Mit der Tastatur drücken Benutzer dieEINGABETASTE, um die Suchabfrage zu senden.

Autosuggest-Narrator-Fokus

Bei der Sprachausgabe drücken Benutzer die EINGABETASTE , um die Suchabfrage zu senden.

Autosuggest-Erzählerfokus auf Suche

Mit der Bildschirmlupe können Benutzer auch auf die Suchschaltfläche zugreifen, indem sie Caps Lock + Nach-rechts drücken und anschließend die Leertaste benutzen.

Tastatur, Gamepad und Fernbedienung

Gamepads und Fernbedienungen unterstützen viele WinUI-Tastaturverhalten und -umgebungen. Aufgrund der fehlenden verschiedenen Tastenoptionen auf einer Tastatur, Gamepad und Fernbedienung fehlen jedoch viele Tastaturoptimierungen (Die Fernbedienung ist sogar noch eingeschränkter als Gamepad).

Weitere Details zur WinUI-Unterstützung für Gamepad- und Fernbedienungseingaben finden Sie unter Gamepad- und Fernbedienungsinteraktionen .

Im Folgenden werden einige Tastenzuordnungen zwischen Tastatur, Gamepad und Fernbedienung gezeigt.

Keyboard Gamecontroller Remotesteuerung
Space Eine Schaltfläche Schaltfläche "Auswählen"
Eingeben Eine Schaltfläche Schaltfläche "Auswählen"
Flucht B-Schaltfläche Schaltfläche "Zurück"
Start/Ende N/A N/A
Bild hoch/runter Triggerschaltfläche für vertikalen Bildlauf, Bumper-Schaltfläche für horizontalen Bildlauf N/A

Einige wichtige Unterschiede, die Sie beim Entwerfen Ihrer WinUI-App für die Verwendung mit Gamepad und Fernbedienung beachten sollten, sind:

  • Für die Texteingabe muss der Benutzer A drücken, um ein Textsteuerelement zu aktivieren.

  • Die Fokusnavigation ist nicht auf Steuerelementgruppen beschränkt, Benutzer können frei zu jedem fokussierbaren UI-Element in der App navigieren.

    ANMERKUNG Der Fokus kann in Richtung des Tastendrucks auf ein beliebiges fokussierbares UI-Element verschoben werden, es sei denn, er befindet sich in einer Überlagerungs-UI oder es ist eine Fokussperre aktiv, die verhindert, dass der Fokus einen Bereich betritt oder verlässt, bis er mit der A-Taste aktiviert oder deaktiviert wird. Weitere Informationen finden Sie im Abschnitt für die direktionale Navigation .

  • D-Pad- und linke Sticktasten werden verwendet, um den Fokus zwischen Steuerelementen und für die innere Navigation zu verschieben.

    ANMERKUNG Gamepad und Fernbedienung navigieren nur zu Elementen, die sich in derselben visuellen Reihenfolge befinden wie die gedrückte Richtungstaste. Die Navigation ist in dieser Richtung deaktiviert, wenn kein nachfolgendes Element vorhanden ist, das den Fokus erhalten kann. Je nach Situation haben Tastaturbenutzer diese Einschränkung nicht immer. Weitere Informationen finden Sie im Abschnitt " Integrierte Tastaturoptimierung ".

Direktionale Navigation

Die Direktionale Navigation wird von einer WinUI Focus Manager-Hilfsklasse verwaltet, die die gedrückte Richtungstaste (Pfeiltaste, Steuerkreuz) entgegennimmt und versucht, den Fokus in die entsprechende visuelle Richtung zu verschieben.

ANMERKUNG Die Navigation mithilfe der Tabulatortaste wird nicht als direktionale Navigation betrachtet. Weitere Informationen finden Sie im Abschnitt "Tabstopps".

direktionale Navigation

Direktionale Navigation unterstützt
Mithilfe von Direktionaltasten (Tastaturpfeile, Gamepad und Steuerkreuzsteuerung) können Benutzer zwischen verschiedenen Steuerelementen navigieren.

keine direktionale Navigation

Direktionale Navigation wird nicht unterstützt
Der Benutzer kann nicht mithilfe von direktionalen Tasten zwischen verschiedenen Steuerelementen navigieren. Andere Methoden für die Navigation zwischen Steuerelementen (Tabulatortaste) sind nicht betroffen.

Integrierte Tastaturoptimierung

Abhängig vom verwendeten Layout und den verwendeten Steuerelementen können WinUI-Apps speziell für die Tastatureingabe optimiert werden.

Das folgende Beispiel zeigt eine Gruppe von Listenelementen, Rasterelementen und Menüelementen, die einem einzelnen Tabstopp zugewiesen wurden (siehe Abschnitt " Tabstopps "). Wenn die Gruppe den Fokus hat, wird die innere Navigation mit den Richtungspfeiltasten in der entsprechenden visuellen Reihenfolge ausgeführt (siehe Abschnitt "Navigation ").

Einspalten-Pfeiltasten-Navigation

Pfeiltastennavigation mit einer Spalte

Pfeiltastennavigation in einer Zeile

Navigation mit Pfeiltasten in einer Zeile

Navigation mit mehreren Spalten- und Zeilenpfeiltasten

Pfeiltastennavigation mit mehreren Spalten/Zeilen

Umschließen homogener Listen- und Rasteransichtselemente

Die direktionale Navigation ist nicht immer die effizienteste Möglichkeit, in mehreren Zeilen und Spalten von Listen- und GridView-Elementen zu navigieren.

ANMERKUNG Menüelemente sind in der Regel Listen mit einzelnen Spalten, aber spezielle Fokusregeln können in einigen Fällen angewendet werden (siehe Popup-UI).

Listen- und Grid-Objekte können mit mehreren Zeilen und Spalten erstellt werden. Diese befinden sich in der Regel im Zeilen-major-Format (wobei Elemente zuerst die gesamte Zeile ausfüllen, bevor sie die nächste Zeile ausfüllen) oder im Spalten-major-Format (wobei Elemente zuerst die gesamte Spalte ausfüllen, bevor sie die nächste Spalte ausfüllen). Die Hauptreihenfolge der Zeile oder Spalte hängt von der Bildlaufrichtung ab, und Sie sollten sicherstellen, dass die Elementreihenfolge nicht mit dieser Richtung in Konflikt steht.

In der Zeilenmajorordnung (wobei Elemente von links nach rechts, von oben nach unten ausgefüllt werden), wenn sich der Fokus auf dem letzten Element in einer Zeile befindet und die Rechtspfeiltaste gedrückt wird, wird der Fokus auf das erste Element in der nächsten Zeile verschoben. Das gleiche Verhalten tritt umgekehrt auf: Wenn der Fokus auf das erste Element in einer Zeile gesetzt ist und die Pfeiltaste nach links gedrückt wird, wird der Fokus auf das letzte Element in der vorherigen Zeile verschoben.

Beim Spalten-major-Format (bei dem die Elemente von oben nach unten und von links nach rechts gefüllt werden), wird der Fokus, wenn er auf dem letzten Element einer Spalte liegt und der Benutzer die Pfeil-nach-unten-Taste drückt, auf das erste Element in der nächsten Spalte verschoben. Dieses Verhalten tritt auch umgekehrt auf: Wenn der Fokus auf das erste Element in einer Spalte gesetzt ist und die Nach-oben-Taste gedrückt wird, wird der Fokus auf das letzte Element in der vorherigen Spalte gesetzt.

Zeilen-vorrangige Tastaturnavigation

Zeilenweise Tastaturnavigation

Spaltenorientierte Tastaturnavigation

Spaltenorientierte Tastaturnavigation

Wie bereits erwähnt, sollten Sie versuchen, sicherzustellen, dass die direktionale Navigation der visuellen Reihenfolge der Steuerelemente in der Benutzeroberfläche Ihrer Anwendung entspricht.

Einige Steuerelemente (z. B. kontextmenü, CommandBar-Überlaufmenü und AutoSuggest-Menü) zeigen ein Menüpopup an einer Position und Richtung (standardmäßig nach unten) relativ zum primären Steuerelement und verfügbaren Bildschirmbereich an. Beachten Sie, dass die Öffnungsrichtung zur Laufzeit von verschiedenen Faktoren beeinflusst werden kann.

Befehlsleiste wird mit NACH-UNTEN-TASTE geöffnet Befehlsleiste wird mit NACH-UNTEN-TASTE geöffnet

Wenn das Menü zum ersten Mal geöffnet wird (und kein Element vom Benutzer ausgewählt wurde), legt die NACH-UNTEN-TASTE immer den Fokus auf das erste Element fest, während die NACH-OBEN-TASTE immer den Fokus auf das letzte Element im Menü festlegt.

Wenn das letzte Element den Fokus hat und die NACH-UNTEN-TASTE gedrückt wird, wird der Fokus auf das erste Element im Menü verschoben. Wenn das erste Element den Fokus hat und die Pfeiltaste nach oben gedrückt wird, wechselt der Fokus zum letzten Element im Menü. Dieses Verhalten wird als Radfahren bezeichnet und eignet sich für die Navigation in Popupmenüs, die in unvorhersehbare Richtungen geöffnet werden können.

Hinweis

Radsport sollte in Nicht-Popup-UIs vermieden werden, bei denen Benutzer in einer endlosen loop gefangen werden können.

Es wird empfohlen, dieselben Verhaltensweisen in Ihren benutzerdefinierten Steuerelementen zu emulieren. Codebeispiel zur Implementierung dieses Verhaltens finden Sie in der Dokumentation zur programmgesteuerten Fokusnavigation .

Teste deine App

Testen Sie Ihre App mit allen unterstützten Eingabegeräten, um sicherzustellen, dass UI-Elemente auf kohärente und intuitive Weise erreicht werden können und dass keine unerwarteten Elemente die gewünschte Tab-Reihenfolge beeinträchtigen.

Anhang

Softwaretastaturen

Eine Softwaretastatur wird auf dem Bildschirm angezeigt und anstelle der physischen Tastatur verwendet, um Daten mithilfe von Toucheingabe, Maus, Zeichen-/Eingabestift oder einem anderen Zeigegerät einzugeben. Auf Gaming-Geräten müssen einzelne Tasten ausgewählt werden, indem der Fokus bewegt oder Tastenkombinationen auf einem Gamepad oder einer Fernbedienung verwendet werden.

Touch-Tastatur

Windows 11 Bildschirmtastatur

Windows 11 Bildschirmtastatur

Je nach Gerät wird die Bildschirmtastatur angezeigt, wenn ein Textfeld oder ein anderes bearbeitbares Textsteuerelement den Fokus erhält oder wenn der Benutzer ihn manuell über das Benachrichtigungscenter aktiviert:

Screenshot des Bildschirmtastatursymbols im Info-Center.

Wenn Ihre App den Fokus programmgesteuert auf ein Texteingabesteuerelement festlegt, wird die Bildschirmtastatur nicht aufgerufen. Dadurch werden unerwartete Verhaltensweisen beseitigt, die nicht direkt vom Benutzer eingeleitet werden. Die Tastatur wird jedoch automatisch ausgeblendet, wenn der Fokus programmgesteuert auf ein Nicht-Text-Eingabesteuerelement verschoben wird.

Die Bildschirmtastatur bleibt in der Regel sichtbar, während der Benutzer zwischen Steuerelementen in einem Formular navigiert. Dieses Verhalten kann je nach den anderen Steuerelementtypen innerhalb des Formulars variieren.

Im Folgenden finden Sie eine Liste von Nicht-Bearbeitungs-Steuerelemente, die während einer Texteingabesitzung mit der Touch-Tastatur den Fokus erhalten können, ohne die Tastatur zu schließen. Anstatt die Benutzeroberfläche unnötig umzugestalten und den Benutzer potenziell zu verwirren, bleibt die Touch-Tastatur sichtbar, da der Benutzer wahrscheinlich zwischen diesen Steuerelementen und der Texteingabe mit der Touch-Tastatur hin und her wechselt.

  • Kontrollkästchen
  • Kombinationsfeld
  • Radiobutton
  • Bildlaufleiste
  • Tree
  • Baumelement
  • Menü
  • Menüleiste
  • Menüelement
  • Symbolleiste
  • List
  • Listenelement

Hier sind Beispiele für verschiedene Modi für die Bildschirmtastatur. Das erste Bild ist das Standardlayout, das zweite ist das erweiterte Layout (das möglicherweise nicht in allen Sprachen verfügbar ist).

Screenshot der Bildschirmtastatur im Standardlayoutmodus.

Bildschirmtastatur im Standardlayoutmodus

Screenshot der Bildschirmtastatur im erweiterten Layoutmodus.

Bildschirmtastatur im erweiterten Layoutmodus

Erfolgreiche Tastaturinteraktionen ermöglichen Es Benutzern, einfache App-Szenarien nur mit der Tastatur auszuführen; d. h. Benutzer können alle interaktiven Elemente erreichen und die Standardfunktionalität aktivieren. Eine Reihe von Faktoren kann den Grad des Erfolgs beeinflussen, einschließlich der Tastaturnavigation, der Zugriffstasten für Barrierefreiheit und der Beschleuniger- oder Tastenkombinationen für fortgeschrittene Benutzer.

Bildschirmtastatur

Wie die Bildschirmtastatur ist die Bildschirmtastatur (On-Screen Keyboard, OSK) eine visuelle, Softwaretastatur, die anstelle der physischen Tastatur verwendet wird, um Daten mithilfe von Toucheingabe, Maus, Zeichen-/Eingabestift oder einem anderen Zeigegerät einzugeben (ein Touchscreen ist nicht erforderlich). Das OSK wird für Systeme bereitgestellt, die nicht über eine physische Tastatur verfügen, oder für Benutzer, deren Mobilitätsbeeinträchtigungen sie daran hindern, herkömmliche physische Eingabegeräte zu verwenden. Das OSK emuliert die meisten, wenn nicht alle, die Funktionalität einer Hardwaretastaturen.

Das OSK kann über die Seite "Tastatur" in den Einstellungen > Erleichterte Bedienung aktiviert werden.

ANMERKUNG Das OSK hat Vorrang vor der Bildschirmtastatur, die nicht angezeigt wird, wenn das OSK vorhanden ist.

Screenshot der Bildschirmtastatur.

Bildschirmtastatur

Screenshot der Xbox One Bildschirmtastatur.

Xbox One Bildschirmtastatur

Weitere Informationen finden Sie unter Verwenden der Bildschirmtastatur zum Eingeben.