鍵盤導覽

本指南著重於說明如何使用目前在 Blockly 中實作的預設鍵盤導覽功能。

使用鍵盤導覽

如要順利使用鍵盤導覽功能，使用者必須能夠完成下列工作：

  • 在工作區中移動
  • 連結工作區中的區塊
  • 將區塊新增至工作區
  • 分離區塊
  • 瀏覽工具箱
  • 瀏覽彈出式選單
  • 從彈出式視窗插入區塊

以下說明 Blockly 的預設鍵盤導覽功能如何完成這些工作。

啟用鍵盤導覽功能

使用者可以按下 Shift + Ctrl + k 鍵來啟用及停用鍵盤導覽功能。首次啟用鍵盤導覽功能時，工作區會顯示閃爍的紅線。這是游標。這會顯示使用者的目前位置，並在使用者瀏覽工作區時更新。
使用者按下 Shift + Control + K 時，畫面上會顯示閃爍的紅線。這是游標。

按下 Enter 鍵，即可在目前位置建立藍色線條，用來表示使用者的標記。標記會顯示插入區塊的目標位置。當您在工作區中移動游標時，它不會更新。
使用者按下 Enter 鍵時，螢幕上會顯示藍色線條。這是標記。

使用預設游標

工作區由輸入、欄位、連線、區塊和工作區座標組成。預設游標會將所有元件劃分為不同層級，以便在工作區中移動。

如要瀏覽不同層級，請使用 A 和 D 鍵。如要在一個等級內移動，請使用 W 和 S 鍵。

工作區層級

按下 Shift + Ctrl + k 鍵，即可進入鍵盤導覽模式。這會將游標置於工作區或工作區中的第一個區塊。如果游標位於區塊上，請按兩下 A 將游標移至工作區層級。如要在工作區中移動游標，請使用 Shift + WASD 鍵。如要移動到堆疊層級，請使用 D 鍵。
使用者按下 Shift 和 W A S D 鍵時，Blockly 工作區的游標會移動。使用者按下 d 時，游標會以矩形形式顯示在第一個區塊堆疊周圍

堆疊層級

在堆疊層級，您可以使用 W 和 S 鍵在工作區的堆疊區塊之間移動。在這個層級，游標會以實心紅色矩形表示，圍繞堆疊中的所有區塊。如要前往所選堆疊中的第一個區塊，請使用 D 鍵。
當使用者按下 s 時，游標會移至下一個區塊堆疊。使用者按下 d 時，游標會以閃爍的紅線形式顯示在所選堆疊中的第一個區塊上方。

封鎖和連線層級

這個層級會保留一個區塊和該區塊的所有外部連結。如果有先前的連結或輸出連結，預設游標會設定為略過區塊。如果兩者皆不存在，游標就會移至區塊，如下所示。

當使用者按下 d 時，游標會從圍繞堆疊積木的紅色矩形，變成圍繞堆疊中第一個積木的矩形一半。

以下是三種可能的外部連線。
紅線標示出三個可能的外部連線。這些是區塊上的前一個、下一個和輸出連結。

在區塊和連線層級，您可以使用 W 和 S 鍵瀏覽外部連線。在這個層級，游標會以目前連線的閃爍紅色輪廓表示。如要前往區塊的首個欄位或輸入內容，請按下 D 鍵。
使用者按下 S 鍵時，游標會以紅色閃爍線條的形式顯示在區塊的下一個連線上。使用者按下 d 鍵時，游標會以紅色矩形顯示，並環繞區塊中的第一個欄位。

欄位和輸入層級

這個層級會保留區塊中的所有欄位和輸入內容。以下是欄位和輸入內容的範例。
紅色矩形標示出區塊中的輸入和欄位範例。
在這個層級，您可以使用 W 和 S 瀏覽目前方塊的可編輯欄位和輸入內容。欄位的游標是實心紅色矩形。對於輸入內容，游標會顯示閃爍的紅色拼圖片段。當游標位於輸入內容上時，按下 D 即可移動至連結的區塊。

使用者按下 S 鍵時，游標會在區塊的輸入內容和欄位之間移動。當使用者在含有連接區塊的輸入內容上按下 d 時，游標會以閃爍紅線的形式顯示在連接區塊頂端。

當游標位於欄位上時，按下 Enter 鍵即可編輯。

游標會以紅色矩形顯示在欄位周圍。使用者按下 Enter 鍵時，下拉式選單會開啟。使用者按下 S 鍵，在下拉式選單中選取值，然後按下 Enter 鍵關閉下拉式選單。

在工作區中連結區塊

  1. 使用 WASD 鍵前往目標連線
  2. 使用 Enter 鍵標記連線
  3. 使用 WASD 鍵前往有效的連線點
  4. 使用 I 鍵 (插入) 連結兩個區塊

輸入連線會顯示藍點，表示已標示。當使用者在有效連線上按下 i 時，區塊會移至標記的連線點。

在工作區中移動方塊

在 Blockly 中，您通常會將方塊移至工作區，方法是將方塊選取起來，拖曳至所需位置，然後放開。您可以使用鍵盤快速鍵標示目標位置、前往要移動的區塊，然後指示要移動的區塊。

  1. 使用 Shift + WASD 鍵前往工作區的某個位置
  2. 使用「Enter」鍵在工作區中標示該位置
  3. 使用 WASD 鍵前往要移動的區塊
  4. 使用 I 鍵將區塊移至標記位置

Blockly 工作區會顯示游標。使用者按下 Enter 鍵時，系統會標記他們的位置，並在該位置顯示藍色線條。使用 WASD 鍵將游標移至區塊的外部連線。當使用者按下 i 時，區塊會移至標記的位置。

分離區塊

在 Blockly 中，您通常會選取子區塊，然後將其從父區塊拖曳，藉此斷開兩個區塊的連結。使用鍵盤快速鍵時，只要在要中斷的連結上將游標移到「X」X，即可斷開區塊。

  1. 使用 WASD 鍵前往要中斷的連結
  2. 點選「X」X中斷連線

畫面上有兩個連結的方塊，游標位於兩個方塊中間。當使用者按下 x 鍵時，區塊就會斷開。

從 Toolbox 插入區塊

  1. 按下 T 鍵開啟工具箱
  2. 使用 W 和 S 鍵瀏覽各類別
  3. 按下 D 鍵，即可移動至彈出式視窗中的區塊
  4. 使用 W 和 S 鍵瀏覽區塊
  5. 按下 Enter 鍵，即可從彈出式視窗插入區塊

當使用者按下 t 時，工具箱就會開啟，顯示不同類別的區塊。按下 s 會切換至不同的類別。使用者按下 d 時，類別中的第一個區塊會醒目顯示。按下 Enter 鍵後，程式區塊就會放置在工作區，並關閉工具箱。

實驗

我們認為，使用者可能會對以下四個主要領域感興趣，並想進行實驗：

  1. 按鍵對應：應將哪些按鍵對應至哪些動作。
  2. 螢幕閱讀器/記錄/警告的文字：螢幕閱讀器應如何讀出游標位置，以及任何錯誤或警告。
  3. 工作區導覽：使用者如何在工作區中瀏覽不同的區塊、欄位、輸入內容和連結。
  4. 游標外觀：游標和標記的外觀。

如要進一步瞭解如何使用這些 API，請參閱 Blockly 鍵盤導覽程式碼研究室。

如有其他想嘗試的領域，且我們可能能夠提供協助，請填寫這份表單。

常見問題

問：為何不使用方向鍵進行鍵盤瀏覽？
答：螢幕閱讀器通常會使用方向鍵。我們不想干擾這個功能，因此選擇使用 WASD 鍵。
不過，我們瞭解每個人的需求都不盡相同，因此強烈建議您建立簡單的方法來變更鍵對應。

問：這似乎很複雜，為什麼需要不同的層？
答：在思考鍵盤導覽時，我們需要有結構化的方式來移動不同區塊、連線、欄位、輸入內容和工作區座標。
在內部，我們會使用抽象語法樹狀結構 (AST) 表示這項資訊。預設游標實作不會偏離這個模型太多，這點是為了讓開發人員更瞭解基礎架構。其他游標可能更容易讓使用者理解。

限制

我們尚未支援前往非區塊元件 (例如垃圾桶、縮放按鈕和彈出式按鈕) 的導覽。如要進一步瞭解限制，請參閱開放式鍵盤導覽功能的錯誤清單。