Tastaturnavigation

In dieser Anleitung geht es um die Verwendung der Standardtastaturnavigation, wie sie derzeit in Blockly implementiert ist.

Verwenden der Tastaturnavigation

Für eine erfolgreiche Navigation über die Tastatur müssen Nutzer die folgenden Aufgaben ausführen können:

  • Im Arbeitsbereich navigieren
  • Blöcke in einem Arbeitsbereich verbinden
  • Block zum Arbeitsbereich hinzufügen
  • Blöcke trennen
  • Navigation in der Toolbox
  • Flyout verwenden
  • Blöcke aus dem Flyout einfügen

Im Folgenden wird erläutert, wie die Standardtastaturnavigation von Blockly diese Aufgaben erfüllt.

Tastaturnavigation aktivieren

Nutzer können die Tastaturnavigation aktivieren oder deaktivieren, indem sie Umschalttaste + Strg + k drücken. Wenn die Tastaturnavigation zum ersten Mal aktiviert wird, wird im Arbeitsbereich eine blinkende rote Linie angezeigt. Das ist der Cursor. Sie zeigt den aktuellen Standort des Nutzers und wird aktualisiert, wenn er im Arbeitsbereich navigiert.
Wenn ein Nutzer die Umschalttaste „K“ drückt, wird eine blinkende rote Linie auf dem Bildschirm angezeigt. Das ist der Cursor.

Wenn Sie die Eingabetaste drücken, wird am aktuellen Standort eine blaue Linie erstellt, die die Markierung eines Nutzers darstellt. Eine Markierung zeigt eine Zielregion für das Einfügen eines Blocks an. Sie wird nicht aktualisiert, wenn Sie den Cursor im Arbeitsbereich bewegen.
Wenn ein Nutzer die Eingabetaste drückt, wird auf dem Bildschirm eine blaue Linie angezeigt. Dies ist die Markierung.

Verwenden des Standard-Cursors

Der Arbeitsbereich besteht aus Eingaben, Feldern, Verbindungen, Blöcken und Arbeitsbereichskoordinaten. Der Standardcursor bewegt sich im Arbeitsbereich, indem alle Komponenten in verschiedene Ebenen aufgeteilt werden.

Mit den Tasten A und D können Sie zwischen den Ebenen wechseln. Mit den Tasten W und S können Sie sich innerhalb einer Ebene bewegen.

Arbeitsbereichsebene

Wechseln Sie in den Tastaturnavigationsmodus, indem Sie Umschalttaste + Strg + k drücken. Dadurch wird der Cursor auf den Arbeitsbereich oder den ersten Block im Arbeitsbereich platziert. Wenn sich der Cursor in einem Block befindet, verschieben Sie ihn durch zweimaliges Drücken von A auf die Arbeitsbereichsebene. Mit Umschalttaste + WASD können Sie den Cursor in den Arbeitsbereich bewegen. Verwenden Sie den Schlüssel D, um zur Stackebene zu wechseln.
Der Cursor im Arbeitsbereich bewegt sich, wenn der Nutzer die Umschalttaste und die Tasten W A S D drückt. Wenn der Nutzer d drückt, erscheint der Cursor als Rechteck um den ersten Stapel von Blöcken

Stapelebene

Auf Stackebene können Sie mit den Tasten W und S zwischen Blöcken im Arbeitsbereich wechseln. Auf dieser Ebene wird der Cursor durch ein ausgefülltes rotes Rechteck um alle Blöcke in einem Stapel dargestellt. Mit dem Schlüssel D gelangen Sie zum ersten Block im ausgewählten Stack.
Wenn der Nutzer drückt, bewegt sich der Cursor zum nächsten Stapel von Blöcken. Wenn der Nutzer auf d klickt, wird der Cursor als blinkende rote Linie über dem ersten Block im ausgewählten Stapel angezeigt.

Blockierungs- und Verbindungsebene

Diese Ebene enthält einen Block und alle externen Verbindungen innerhalb des Blocks. Der Standardcursor ist so eingestellt, dass der Block bei einer vorherigen oder Ausgabeverbindung übersprungen wird. Ist keiner von beiden vorhanden, bewegt sich der Cursor wie unten gezeigt zum Block.

Wenn der Nutzer „D“ drückt, ändert sich der Cursor von einem roten Rechteck um den Blockstapel zu einem halben Rechteck, das den ersten Block im Stapel umgibt.

Unten sehen Sie die drei möglichen externen Verbindungen.
Die drei möglichen äußeren Verbindungen sind durch eine rote Linie dargestellt. Dies sind die vorherigen, die nächsten und die Ausgabeverbindungen für einen Block.

Auf Block- und Verbindungsebene können Sie mit den Tasten W und S durch die externen Verbindungen navigieren. Auf dieser Ebene wird der Cursor durch einen blinkenden roten Umriss der aktuellen Verbindung dargestellt. Drücken Sie D, um zum ersten Feld oder zur ersten Eingabe in einem Block zu gelangen.
Wenn der Benutzer die Taste S drückt, erscheint der Cursor als rot blinkende Linie bei der nächsten Verbindung eines Blocks. Wenn ein Nutzer die Taste „d“ drückt, wird der Cursor als rotes Rechteck um das erste Feld des Blocks herum angezeigt.

Felder und Eingabeebene

Diese Ebene enthält alle Felder und Eingaben, die zum Block gehören. Beispiele für Felder und Eingaben sind unten zu sehen.
Ein rotes Rechteck hebt Beispiele für Eingaben und Felder in einem Block hervor.
Auf dieser Ebene können Sie mit W und S durch die bearbeitbaren Felder und Eingaben des aktuellen Blocks navigieren. Bei einem Feld ist der Cursor ein ausgefülltes rotes Rechteck. Bei einer Eingabe ist der Cursor ein blinkendes rotes Puzzleteil. Wenn sich der Cursor auf einer Eingabe befindet, drücken Sie D, um zum verbundenen Block zu gelangen.

Wenn der Nutzer die Taste „S“ drückt, bewegt sich der Cursor durch die Eingaben und Felder des Blocks. Wenn ein Benutzer während einer Eingabe mit einem verbundenen Block die Taste d drückt, wird der Cursor als blinkende rote Linie über dem verbundenen Block angezeigt.

Wenn sich der Cursor auf einem Feld befindet, drücken Sie zum Bearbeiten die Eingabetaste.

Der Cursor wird als rotes Rechteck um ein Feld herum angezeigt. Wenn der Nutzer eine Eingabe trifft, wird ein Drop-down-Menü geöffnet. Der Nutzer drückt die Taste „S“, um einen Wert aus dem Drop-down-Menü auszuwählen, und dann die Eingabetaste, um das Drop-down-Menü zu schließen.

Verbindungsblöcke im Arbeitsbereich

  1. Rufen Sie Ihre Zielverbindung mithilfe der WASD-Schlüssel auf.
  2. Verbindung mit der Eingabetaste markieren
  3. Rufen Sie mithilfe der WASD-Schlüssel einen gültigen Verbindungspunkt auf.
  4. Verbinden Sie die beiden Blöcke mit dem Schlüssel I (zum Einfügen)

Eine Eingabeverbindung ist mit einem blauen Punkt gekennzeichnet. Wenn der Nutzer bei einer gültigen Verbindung auf i trifft, wird der Block zum markierten Verbindungspunkt bewegt.

Block im Arbeitsbereich verschieben

Normalerweise verschieben Sie einen Block in Blockly in den Arbeitsbereich, indem Sie ihn auswählen, an die gewünschte Position ziehen und dann loslassen. Mit Tastenkombinationen markieren Sie Ihre Zielregion, navigieren Sie zu dem Block, den Sie verschieben möchten, und weisen Sie ihn an, ihn zu verschieben.

  1. Navigieren Sie mit der Tastenkombination Umschalttaste + WASD zu einer Position im Arbeitsbereich.
  2. Markieren Sie diesen Ort im Arbeitsbereich mit der Eingabetaste.
  3. Navigieren Sie mit den WASD-Tasten zu dem Block, den Sie verschieben möchten.
  4. Verschieben Sie den Block mit der Taste I an die markierte Stelle.

Über dem blockförmigen Arbeitsbereich wird ein Cursor angezeigt. Sobald der Nutzer die Eingabetaste drückt, markiert er seinen Standort. An dieser Position wird eine blaue Linie angezeigt. Mithilfe der WASD-Tasten bewegt sie den Cursor zur externen Verbindung eines Blocks. Wenn der Nutzer auf i trifft, bewegt sich der Block an die markierte Stelle.

Löseblöcke

Normalerweise trennen Sie in Blockly zwei Blöcke, indem Sie den unteren Block aufnehmen und vom übergeordneten Block wegziehen. Mithilfe von Tastenkombinationen können Sie Blöcke trennen, indem Sie mit dem Cursor auf die Verbindung, die Sie trennen möchten, das X drücken.

  1. Gehen Sie mithilfe der WASD-Tasten zu der Verbindung, die Sie trennen möchten.
  2. Verbindung mit X trennen

Auf dem Bildschirm sind zwei Blöcke miteinander verbunden, wobei der Cursor in der Mitte angezeigt wird. Wenn der Nutzer die Taste x erreicht, werden die Blöcke getrennt.

Einen Block aus der Toolbox einfügen

  1. Drücken Sie die T-Taste, um die Toolbox zu öffnen.
  2. Mit den Tasten W und S können Sie zwischen den Kategorien wechseln.
  3. Drücken Sie die Taste D, um zu den Blöcken im Flyout-Fenster zu wechseln.
  4. Mit den Tasten W und S durch die Blöcke navigieren
  5. Drücken Sie die Eingabetaste, um einen Block aus dem Flyout einzufügen.

Wenn ein Nutzer auf eine Toolbox tippt, wird eine Toolbox mit verschiedenen Kategorien von Blöcken geöffnet. Mit einem Klick auf „s“ werden Sie durch die verschiedenen Kategorien geführt. Wenn ein Nutzer den ersten Block in der Kategorie erreicht, wird er hervorgehoben. Wenn Sie die Eingabetaste drücken, wird der Block im Arbeitsbereich platziert und die Toolbox geschlossen.

Experimente

Wir glauben, dass es vier Hauptbereiche gibt, mit denen Menschen experimentieren könnten:

  1. Tastenzuordnungen: Gibt an, welche Schlüssel welchen Aktionen zugeordnet werden sollen.
  2. Text für Screenreader/Protokollierung/Warnungen: Legt fest, wie ein Screenreader Cursorpositionen sowie Fehler oder Warnungen auslesen soll.
  3. Arbeitsbereich-Navigation: Die Art und Weise, wie Nutzer durch die verschiedenen Blöcke, Felder, Eingaben und Verbindungen im Arbeitsbereich navigieren.
  4. Darstellung des Cursors: So sollten Cursor und Markierung aussehen.

Weitere Informationen zur Verwendung dieser APIs finden Sie im Code-Lab für die Blockly-Tastatur.

Wenn Sie weitere Bereiche testen möchten, bei denen wir Ihnen möglicherweise helfen können, füllen Sie bitte dieses Formular aus.

Häufig gestellte Fragen

F: Warum wurden bei der Tastaturnavigation nicht die Pfeiltasten verwendet?
A: Screenreader verwenden in der Regel die Pfeiltasten. Wir wollten nicht eingreifen und haben uns deshalb für die WASD-Schlüssel entschieden.
Uns ist jedoch klar, dass jeder unterschiedliche Bedürfnisse hat. Deshalb empfehlen wir dringend, eine einfache Möglichkeit zum Ändern der Schlüsselzuordnungen zu entwickeln.

F: Das ist ziemlich kompliziert. Warum brauchen wir verschiedene Ebenen?
A:Für die Tastaturnavigation brauchten wir eine strukturierte Methode, um sich zwischen den verschiedenen Blöcken, Verbindungen, Feldern, Eingaben und Arbeitsbereichskoordinaten zu bewegen.
Intern stellen wir dies mit einem abstrakten Syntaxbaum (AST) dar. Die Standard-Cursor-Implementierung weicht nicht weit von diesem Modell ab.Dies soll Entwicklern ein besseres Verständnis der zugrunde liegenden Architektur vermitteln. Es gibt weitere cursors, die für Endnutzer leichter verständlich sind.

Beschränkungen

Der Wechsel zu nicht blockierenden Komponenten wie Papierkorb, Zoom- und Flyout-Schaltflächen wird noch nicht unterstützt. Weitere Informationen zu Einschränkungen finden Sie in der bugs.