鍵盤導覽

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

使用鍵盤瀏覽功能

使用者必須能夠完成下列工作,才能使用鍵盤瀏覽功能:

  • 在工作區中移動
  • 工作區連線區塊
  • 將區塊新增至工作區
  • 卸離區塊
  • 瀏覽工具箱
  • 瀏覽飛機
  • 從飛出點插入方塊

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

啟用鍵盤導覽功能

使用者可以按下 Shift + Ctrl + k 鍵,啟用及停用鍵盤導覽功能。首次啟用鍵盤瀏覽功能時,工作區會出現閃爍的紅線。此為遊標。並在使用者瀏覽工作區時顯示使用者目前的位置和更新。
使用者按下 Shift 鍵時,螢幕上會出現閃爍的紅色線條。此為遊標。

按下 Enter 鍵,會在目前位置建立代表使用者的標記的藍線。標記會顯示可供封鎖插入的目標位置。不會隨著您移動工作區在工作區周圍移動。
使用者按一下輸入藍色線條時,畫面上就會出現藍線。這是標記,

使用預設遊標

工作區由輸入、欄位、連線、區塊和工作區座標組成。預設遊標會將所有元件分割成不同層級,藉此在工作區四處移動。

如要瀏覽不同層級,請使用 AD 鍵。如要瀏覽不同層級項目,請使用「W」和「S」鍵。

工作區層級

按下 Shift + Ctrl + K 鍵即可進入鍵盤導覽模式。即可將遊標放在工作區或工作區的第一個區塊。如果遊標位於區塊上,請按兩次 A 以移至工作區層級。如要移動工作區的遊標,請使用 Shift + WASD 鍵。如要移至堆疊層級,請使用 D 鍵。
當使用者按下 Shift 和 W A S D 鍵時,區塊化工作區中的遊標會移動。使用者點選後,遊標會顯示為第一個區塊堆疊周圍的矩形

堆疊層級

在堆疊層級,您可以使用 WS 鍵在工作區的區塊堆疊之間瀏覽。在這個層級,遊標在堆疊中所有區塊周圍的實心紅色矩形代表。如要前往所選堆疊中的第一個區塊,請使用 D 鍵。
使用者按下滑鼠遊標時,遊標會移至下一個區塊堆疊。使用者按一下滑鼠,遊標會在所選堆疊的第一個區塊上方閃爍紅線。

封鎖與連線等級

這個層級會保留區塊以及區塊中的所有外部連線。如果有先前的連線或輸出連線,預設遊標會設為略過區塊。如果兩者不存在,遊標會移至區塊,如下所示。

使用者按下後,遊標會從方塊堆疊周圍顯示為紅色矩形,移至堆疊中第一個區塊周圍的矩形。

以下是三個可能的外部連線。
紅線醒目顯示三種可能的外部連接。這些是區塊中的上一個、下一個和輸出連線。

在區塊和連線層級,您可以使用「W」和「S」鍵瀏覽外部連線。在這個層級中,遊標會以目前連線的紅色外框閃爍。如要前往第一個欄位或區塊上的輸入內容,請按下 D 鍵。
當使用者按下 S 鍵時,遊標會在下一個連線的下一個連線上顯示為紅色閃爍。使用者按下 d 鍵時,遊標會顯示為區塊上第一個欄位的紅色矩形。

欄位和輸入層級

此層級會保留該區塊中的所有欄位和輸入內容。欄位和輸入的呈現形式如下所示。
紅色矩形醒目顯示區塊中的輸入和欄位範例。
在這個層級,您可以使用 WS,瀏覽目前區塊的可編輯欄位和輸入項目。對欄位的遊標是實心的紅色矩形。遊標是閃爍的紅色拼圖,對輸入項目而言。遊標位於輸入來源時,按下 D 即可移至已連結的區塊。

使用者按下 S 鍵時,遊標會在區塊的輸入和欄位之間移動。當使用者在連接的區塊輸入 d 時,遊標會在已連接的區塊上方以閃爍的紅線顯示。

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

系統會在欄位周圍以紅色矩形顯示遊標。使用者點選進入下拉式選單時,就會開啟。使用者按 S 鍵在下拉式選單中選取值,然後按 Enter 鍵關閉下拉式選單。

連結工作模塊

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

輸入連線具有藍色的點,代表已標記。當使用者透過有效的連線按下 i 鍵時,區塊會移至標示的連接點。

移動工作區上的區塊

通常在 Blockly 中,您只要選取區塊,然後將其拖曳至所需位置並放開,即可將區塊移到工作區。使用鍵盤快速鍵標示目標位置後,前往您要移動的區塊,然後指示它移動。

  1. 使用 Shift + WASD 鍵前往工作區的位置
  2. 使用 Enter 鍵在工作區上標示該位置
  3. 使用 WASD 鍵前往要移動的區塊
  4. 使用 I 鍵將方塊移至標示的位置

在區塊化工作區中會顯示遊標。使用者按下 Enter 鍵後,即可標記位置,並在這個位置顯示一條藍線。使用 WASD 鍵後,遊標會移至區塊的外部連線。當使用者按下 i,方塊就會移至標示的位置。

卸除塊

通常在 Blockly 中,您可以選取偏差區塊並將其從父項區塊拖曳,藉此中斷兩個區塊的連線。使用鍵盤快速鍵時,只要在要中斷連線的連線上按下 X 即可中斷連線。

  1. 使用 WASD 鍵前往要中斷的連線
  2. 中斷與 X 的連線

畫面中有兩個區塊連接,遊標中間則顯示遊標。當使用者按下 X 鍵時,區塊就會中斷連線。

從 Toolbox 插入區塊

  1. 按下 T 鍵開啟工具箱
  2. 使用 WS 鍵瀏覽類別
  3. 按下 D 鍵可移至延伸畫面的方塊
  4. 使用 WS 鍵瀏覽方塊
  5. 按下 Enter 鍵,從彈簧插入一個區塊

使用者按下工具箱後,就會開啟並顯示不同類別的區塊。按下 n 鍵切換不同的類別。當使用者按下類別中的第一個區塊時,系統會醒目顯示。按下 Enter 鍵可在工作區中放置區塊,並關閉工具方塊。

實驗

我們認為使用者可能會想嘗試四大領域:

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

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

如果您想嘗試進行其他測試,但希望有助於解決問題,請填寫表單

常見問題

問:為什麼你未使用方向鍵瀏覽鍵盤?
答:螢幕閱讀器通常會使用方向鍵。我們不想幹擾此問題,因此選用 WASD 鍵。
,但我們瞭解每個人都有不同的需求,因此強烈建議您建立簡單的方式,輕鬆變更鍵對應

問:這似乎有點複雜,為什麼我們需要不同層?
答:考量鍵盤瀏覽方式時,我們需要一種結構化的方式,才能在不同的區塊、連線、欄位、輸入內容和工作區座標之間移動。
內部我們以抽象語法樹狀結構 (AST) 表示這個情況。預設的遊標實作作業不會離這個模型太遠。這可讓開發人員深入瞭解基礎架構。還有其他cursors讓使用者更容易瞭解。

限制

我們目前不支援導覽至非封鎖的元件 (例如垃圾桶、縮放按鈕和飛出按鈕)。如要進一步瞭解相關限制,請參閱開啟的鍵盤瀏覽bugs清單。