Tastaturnavigation

In diesem Leitfaden geht es hauptsächlich um die Verwendung der Standardtastaturnavigation, wie sie derzeit in Blockly implementiert ist.

.

Tastaturnavigation verwenden

Damit die Tastaturnavigation funktioniert, muss ein Nutzer die folgenden Aufgaben ausführen können:

  • Im Arbeitsbereich bewegen
  • Blöcke in einem Arbeitsbereich verbinden
  • Dem Arbeitsbereich einen Block hinzufügen
  • Blöcke trennen
  • Toolbox verwenden
  • Im Flyout navigieren
  • Blöcke über das Drop-down-Menü einfügen

Im Folgenden wird erläutert, wie diese Aufgaben mit der Standardtastaturnavigation von Blockly ausgeführt werden.

Tastaturnavigation aktivieren

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

Wenn Sie die Eingabetaste drücken, wird am aktuellen Standort eine blaue Linie mit der Markierung eines Nutzers angezeigt. Eine Markierung zeigt den Zielstandort für das Einfügen des 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. Das ist die Markierung.

Standardcursor verwenden

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

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

Drücken Sie Umschalttaste + Strg + K, um den Tastaturnavigationsmodus zu aktivieren. Dadurch wird der Cursor im Arbeitsbereich oder im ersten Block im Arbeitsbereich platziert. Wenn sich der Cursor auf einem Block befindet, bewegen Sie ihn auf die Workspace-Ebene, indem Sie zweimal auf die Taste A drücken. Um den Cursor im Arbeitsbereich zu bewegen, verwenden Sie die Umschalttaste + WASD. Mit der Taste D können Sie zur Stack-Ebene wechseln.
Der Cursor im Blockly-Arbeitsbereich bewegt sich, wenn der Nutzer die Umschalttaste und die Tasten W, A, S und D drückt. Wenn der Nutzer die Taste „d“ drückt, erscheint der Cursor als Rechteck um den ersten Stapel von Blöcken.

Stapelebene

Auf Ebene des Stapels können Sie mit den Tasten W und S zwischen den Blockstapeln im Arbeitsbereich wechseln. Auf dieser Ebene wird der Cursor durch ein durchgezogenes rotes Rechteck dargestellt, das alle Blöcke in einem Stapel umgibt. Mit der Taste D können Sie zum ersten Block im ausgewählten Stapel wechseln.
Wenn der Nutzer die Taste „S“ drückt, bewegt sich der Cursor zum nächsten Blockstapel. Wenn der Nutzer die Taste d drückt, erscheint der Cursor als blinkende rote Linie über dem ersten Block im ausgewählten Stack.

Block- und Verbindungsebene

Diese Ebene enthält einen Block und alle externen Verbindungen des Blocks. Der Standardcursor ist so eingestellt, dass der Block übersprungen wird, wenn es eine vorherige oder Ausgabeverbindung gibt. Wenn keines davon vorhanden ist, bewegt sich der Cursor zum Block, wie unten dargestellt.

Wenn der Nutzer die Taste d drückt, ändert sich der Cursor von einem roten Rechteck um den Stapel von Blöcken zu einem halben Rechteck, das den ersten Block im Stapel umgibt.

Die drei möglichen Außenverbindungen sind unten dargestellt.
Die drei möglichen Außenverbindungen sind rot hervorgehoben. Dies sind die vorherigen, nächsten und Ausgabeverbindungen eines Blocks.

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

Felder und Eingabeebene

Diese Ebene enthält alle Felder und Eingaben im Block. Unten finden Sie Beispiele für Felder und Eingaben.
In einem roten Rechteck sind Beispiele für Eingaben und Felder in einem Block hervorgehoben.
Auf dieser Ebene können Sie mit W und S zwischen den bearbeitbaren Feldern und Eingaben des aktuellen Blocks wechseln. Bei einem Feld ist der Cursor ein durchgezogenes rotes Rechteck. Bei einer Eingabe ist der Cursor ein blinkendes rotes Puzzleteil. Wenn sich der Cursor auf einer Eingabe befindet, drücken Sie die Taste D, um zum verbundenen Block zu wechseln.

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

Wenn sich der Cursor in einem Feld befindet, drücken Sie die Eingabetaste, um es zu bearbeiten.

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

Blöcke im Arbeitsbereich verbinden

  1. Mit den Tasten WASD zur Zielverbindung wechseln
  2. Markieren Sie die Verbindung mit der Taste Eingabetaste.
  3. Mit den Tasten WASD zu einem gültigen Verbindungspunkt wechseln
  4. Verbinden Sie die beiden Blöcke mit der Taste I (für „insert“).

Eine Eingabeverbindung ist durch einen blauen Punkt gekennzeichnet. Wenn der Nutzer bei einer gültigen Verbindung die Taste „i“ drückt, bewegt sich der Block zum markierten Verbindungspunkt.

Block im Arbeitsbereich verschieben

Normalerweise verschieben Sie einen Block in Blockly, indem Sie ihn anklicken, an die gewünschte Position ziehen und loslassen. Mit Tastenkombinationen markieren Sie den Zielort, gehen zum Block, den Sie verschieben möchten, und geben dann den Befehl zum Verschieben.

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

Im Blockly-Arbeitsbereich wird ein Cursor angezeigt. Wenn der Nutzer die Eingabetaste drückt, markiert er seinen Standort und an dieser Position wird eine blaue Linie angezeigt. Mit den WASD-Tasten bewegt er den Cursor zur äußeren Verbindung eines Blocks. Wenn der Nutzer auf „i“ tippt, wird der Block an die markierte Stelle verschoben.

Trennblöcke

Normalerweise trennen Sie in Blockly zwei Blöcke, indem Sie den untergeordneten Block anklicken und ihn vom übergeordneten Block wegziehen. Mit Tastenkombinationen können Sie Blöcke trennen, indem Sie die Taste X drücken, während sich der Cursor auf der Verbindung befindet, die Sie aufheben möchten.

  1. Gehen Sie mit den Tasten WASD zur Verbindung, die Sie trennen möchten.
  2. Verbindung mit X trennen

Zwei Blöcke sind auf dem Bildschirm verbunden. Der Cursor befindet sich in der Mitte. Wenn der Nutzer die Taste „X“ drückt, werden die Blöcke getrennt.

Block aus der Toolbox einfügen

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

Wenn ein Nutzer die Taste „T“ drückt, öffnet sich eine Toolbox mit verschiedenen Kategorien von Blöcken. Mit der Taste „S“ kannst du zwischen den verschiedenen Kategorien wechseln. Wenn ein Nutzer die Taste „d“ drückt, wird der erste Block in der Kategorie 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, in denen Nutzer gerne experimentieren würden:

  1. Tastenbelegung: Welchen Tasten welche Aktionen zugeordnet werden sollen.
  2. Text für Screenreader/Protokollierung/Warnungen: Hier wird festgelegt, wie ein Screenreader die Position des Cursors sowie Fehler oder Warnungen vorlesen soll.
  3. Workspace-Navigation: Wie sich Nutzer durch die verschiedenen Blöcke, Felder, Eingaben und Verbindungen im Arbeitsbereich bewegen.
  4. Cursor-Darstellung: Hier legen Sie fest, wie der Cursor und die Markierung aussehen sollen.

Weitere Informationen zur Verwendung dieser APIs finden Sie im Blockly-Codelab zur Tastaturnavigation.

Wenn Sie in anderen Bereichen experimentieren möchten und wir Ihnen dabei helfen können, füllen Sie bitte dieses Formular aus.

FAQ

F: Warum haben Sie nicht die Pfeiltasten zur Navigation auf der Tastatur verwendet?
A: Screenreader verwenden in der Regel die Pfeiltasten. Wir wollten das nicht beeinträchtigen und haben uns daher für die Tasten WASD entschieden.
Uns ist jedoch bewusst, dass jeder unterschiedliche Anforderungen hat. Wir empfehlen daher dringend, eine einfache Möglichkeit zum Ändern der Tastenzuordnungen zu schaffen.

F: Das sieht ziemlich kompliziert aus. Warum brauchen wir verschiedene Ebenen?
A: Bei der Tastaturnavigation brauchten wir eine strukturierte Möglichkeit, zwischen den verschiedenen Blöcken, Verbindungen, Feldern, Eingaben und Arbeitsbereichskoordinaten zu wechseln.
Intern stellen wir dies mit einem abstrakten Syntaxbaum (AST) dar. Die Standardcursorimplementierung weicht nicht weit von diesem Modell ab.Das ist beabsichtigt, damit Entwickler die zugrunde liegende Architektur besser verstehen. Es gibt andere Cursor, die für Endnutzer leichter verständlich sein könnten.

Beschränkungen

Die Navigation zu nicht blockierenden Komponenten (z.B. Papierkorb, Zoomschaltflächen und Ausklappmenüs) wird noch nicht unterstützt. Weitere Informationen zu Einschränkungen finden Sie in der Liste der offenen Fehler bei der Tastaturnavigation.