🚀 在 VS Code 中

協助工具

Visual Studio Code 有許多功能可協助讓編輯器對所有使用者而言都容易存取。縮放層級和高對比色彩可改善編輯器可見度、僅限鍵盤的導覽支援不使用滑鼠的情況,且編輯器已針對螢幕助讀程式進行最佳化。

縮放

您可以使用 [檢視] > [外觀] > [縮放] 命令,在 VS Code 中調整縮放層級。每個 [縮放] 命令都會將縮放層級增加或減少 20%。

  • [檢視] > [外觀] > [放大] (⌘= (Windows、Linux Ctrl+=)) - 增加縮放層級。
  • [檢視] > [外觀] > [縮小] (⌘- (Windows、Linux Ctrl+-)) - 減少縮放層級。
  • [檢視] > [外觀] > [重設縮放] (⌘Numpad0 (Windows、Linux Ctrl+Numpad0)) - 將縮放層級重設為 0。

注意:如果您使用放大鏡,請在檢視滑鼠停留時按住 Alt 鍵,以將游標移到滑鼠停留上方。

Zoomed in editor

持續性縮放層級

當您使用 [檢視] > [外觀] > [放大/縮小] 命令調整縮放層級時,縮放層級會持續儲存在 window.zoomLevel 設定中。預設值為 0,且每個增量/減量都會將縮放層級變更 20%。

協助工具說明

開啟協助工具說明 命令 ⌥F1 (Windows Alt+F1、Linux Shift+Alt+F1) 會根據目前內容開啟說明功能表。目前適用於編輯器、終端機、筆記本、聊天檢視和內嵌聊天功能。

您可以從協助工具說明功能表內關閉協助工具說明功能表或開啟其他文件。

When triggered in an editor, a dialog appears that explains how to enable screen reader mode explicitly, tab focus mode and other details

高對比佈景主題

VS Code 在所有平台上都支援高對比色彩佈景主題。使用 [檔案 > 喜好設定] > [佈景主題] > [色彩佈景主題] (⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)) 以顯示 [選取色彩佈景主題] 下拉式清單,並選取 [高對比] 佈景主題。

High Contrast Theme

色彩視覺協助工具

您可以在 Visual Studio Marketplace 中搜尋與色覺辨識障礙相容的擴充功能。使用 [擴充功能] 檢視 ⇧⌘X (Windows、Linux Ctrl+Shift+X) 並搜尋「color blind」以填入相關選項。

Visual Studio Marketplace in VS Code UI

從 Marketplace 安裝色彩佈景主題後,您可以使用 [檔案 > 喜好設定] > [佈景主題] > [色彩佈景主題] ⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T),變更 色彩佈景主題

Dropdown for Select Color Theme

  • GitHub - 大多數色盲形式都可存取,且符合 GitHub 設定中的佈景主題。
  • Gotthard - 針對大約 20 種程式設計語言進行最佳化。
  • Blinds - 專為患有綠色盲的人所建立,具有高對比色彩比率。
  • Greative - 同時考量色盲和光線敏感度。
  • Pitaya Smoothie - 大多數色盲形式都可存取,且符合 WCAG 2.1 色彩對比準則

自訂警告色彩

VS Code 的預設色彩佈景主題為 [深色+]。不過,您可以自訂使用者介面中的佈景主題和屬性色彩。

注意:前往 自訂色彩佈景主題,以取得覆寫目前佈景主題中色彩的詳細資訊。

若要自訂錯誤和警告波浪線,請前往 [檔案 > 喜好設定] > [設定] 以取得使用者設定。搜尋「色彩自訂」以尋找 [工作台: 色彩自訂] 設定,並選取 [在 settings.json 中編輯] 以開啟您的使用者 settings.json 檔案。

JSON file settings icon

在您的 settings.json 檔案中,將下列程式碼巢狀於最外層的大括號內。您可以輸入十六進位代碼,將色彩指派給每個物件。

"workbench.colorCustomizations": {
    "editorError.foreground": "#ffef0f",
    "editorWarning.foreground": "#3777ff"
}

在下列範例中,當 JSON 項目之後遺失逗號時,會套用警告色彩。

JSON code to alter error/warning squiggle colors

  • editorError.foreground - 覆寫錯誤下方的波浪線。
  • editorWarning.foreground - 覆寫警告下方的波浪線。
  • editorError.background - 覆寫錯誤的醒目提示色彩。
  • editorWarning.background - 覆寫警告的醒目提示色彩。

將色彩指派給 editorErroreditorWarning 的背景也有助於識別潛在問題。您選擇的色彩會醒目提示個別的錯誤或警告。先前範例中顯示的色彩 #ffef0f (黃色) 和 #37777ff (藍色) 對於常見色覺辨識障礙的人而言更易於存取。

選取協助工具色彩

色彩的協助工具適用性取決於異常三色視覺 (色盲) 的類型。嚴重程度因人而異,且可分為四種狀況類型

狀況 類型
綠色盲 對綠光的敏感度降低。這是最常見的色盲形式。
紅色盲 對紅光的敏感度降低。
藍色盲 對藍光的敏感度降低。此狀況被認為很罕見。
單色視覺 無法看到所有色彩,也稱為全色盲。如需最罕見色盲形式的詳細資訊:對抗失明基金會

選取特定狀況最佳色彩的最佳方法之一是套用互補色。這些色彩在色輪上彼此相對。

Color wheel highlighting complementary colors for regular vision, deuteranopia, protanopia, tritanopia and monochromacy

注意:如需尋找互補色的詳細資訊,請存取 Adobe Color 上的色盲模擬器和互動式色輪。

使未聚焦的編輯器和終端機變暗

未聚焦的檢視可以變暗,以更清楚地瞭解輸入的內容將前往何處。這在處理多個編輯器群組或終端機時特別有用。藉由設定 "accessibility.dimUnfocused.enabled": true 來開啟此功能。您可以使用 accessibility.dimUnfocused.opacity 控制暗度層級,此設定會採用從 0.2 到 1 的不透明度分數 (預設值為 0.75)。

鍵盤導覽

VS Code 在 [命令面板] (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中提供詳盡的命令清單,讓您無需滑鼠即可使用 VS Code。按下 ⇧⌘P (Windows、Linux Ctrl+Shift+P),然後輸入命令名稱 (例如「git」) 以篩選命令清單。

VS Code 也針對命令預設許多鍵盤快速鍵。

Key bindings for commands are displayed at the end of the command palette entry

您也可以設定自己的鍵盤快速鍵。[檔案 > 喜好設定] > [鍵盤快速鍵] (⌘K ⌘S (Windows、Linux Ctrl+K Ctrl+S)) 會開啟 [鍵盤快速鍵] 編輯器,您可以在其中探索和修改 VS Code 動作的鍵盤快速鍵。請參閱 按鍵繫結,以取得自訂或新增您自己鍵盤快速鍵的詳細資訊。

若要在工作台中快速導覽,我們建議使用 [聚焦下一個部分] (F6) 和 [聚焦上一個部分] (⇧F6 (Windows、Linux Shift+F6)) 命令。

錨點選取

為了更容易使用鍵盤開始和結束選取範圍,有四個命令:[設定選取錨點] (⌘K ⌘B (Windows、Linux Ctrl+K Ctrl+B))、[從錨點選取到游標] (⌘K ⌘K (Windows、Linux Ctrl+K Ctrl+K))、[取消選取錨點] (Escape) 和 [前往選取錨點]。

Tab 導覽

您可以使用 Tab 鍵在 VS Code 中的 UI 控制項之間導覽。使用 Shift+Tab 以相反順序 Tab 鍵。當您在 UI 控制項之間 Tab 鍵時,當每個 UI 元素具有焦點時,指標將會出現在其周圍。

工作台中的所有元素都支援 Tab 導覽。為了避免 Tab 鍵停駐點過多,工作台工具列和 Tab 清單各只有一個。工具列或 Tab 清單具有焦點後,您可以使用方向鍵在其中導覽。

注意:Tab 導覽會以視覺上自然的順序進行,但 Web 檢視 (例如 Markdown 預覽) 除外。針對 Web 檢視,我們建議使用 F6⇧F6 (Windows、Linux Shift+F6) 命令,在 Web 檢視和工作台的其餘部分之間導覽。或者,您可以使用許多 [聚焦編輯器] 命令的其中一個。

Tab 鍵鎖定

根據預設,在原始碼檔案內按下 Tab 鍵會插入 Tab 字元 (或空格,取決於您的縮排設定),且不會離開開啟的檔案。您可以使用 ⌃⇧M (Windows、Linux Ctrl+M) 切換 Tab 鍵鎖定,後續的 Tab 鍵會將焦點移出檔案。當預設 Tab 鍵鎖定關閉時,您會在狀態列中看到 [Tab 鍵移動焦點] 指標。

終端機也存在 Tab 鍵鎖定。此功能的預設行為可以使用 editor.tabFocusMode 進行設定。

A Tab moves focus status bar item shows when the mode is active

您也可以從 [命令面板] (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 使用 [切換 Tab 鍵移動焦點] 動作來開啟和關閉 Tab 鍵鎖定。

唯讀檔案永遠不會鎖定 Tab 鍵。[整合式終端機] 面板會遵循 Tab 鍵鎖定模式,且可以使用 ⌃⇧M (Windows、Linux Ctrl+M) 進行切換。

螢幕助讀程式

VS Code 使用以文字分頁為基礎的策略,在編輯器中支援螢幕助讀程式。已測試下列螢幕助讀程式

針對 NVDA,我們建議您停留在焦點模式,並使用快速鍵進行導覽,而不是使用瀏覽模式。

[前往下一個/上一個錯誤或警告] 動作 (F8⇧F8 (Windows、Linux Shift+F8)) 允許螢幕助讀程式宣告錯誤和警告訊息。

當建議快顯時,系統會向螢幕助讀程式宣告這些建議。使用 Ctrl+向上鍵Ctrl+向下鍵 導覽建議,並使用 Shift+Escape 關閉建議。如果建議妨礙您,您可以使用 editor.quickSuggestions 設定將其關閉。

在差異檢視窗格中,[前往下一個/上一個差異] 動作 (F7⇧F7 (Windows、Linux Shift+F7)) 將顯示 [協助工具差異檢視器],其中差異會以統一修補程式格式呈現。使用 [向上鍵] 和 [向下鍵] 在未變更、插入或刪除的行之間導覽。按下 Enter 鍵,將焦點傳回差異編輯器的修改窗格,並位於選取的行號 (或仍然存在的最近行號,如果選取了已刪除的行)。使用 EscapeShift+Escape 關閉 [協助工具差異檢視器]。

螢幕助讀程式模式

當 VS Code 偵測到正在使用螢幕助讀程式時,它會進入針對 UI (例如編輯器和整合式終端機) 最佳化的螢幕助讀程式模式。狀態列將在右下角顯示 [螢幕助讀程式最佳化]。您可以按一下顯示文字或使用 [切換螢幕助讀程式協助工具模式] 命令,結束螢幕助讀程式模式。

Activating the screen reader optimized status bar will show a notification that allows disabling the mode

某些功能 (例如摺疊和迷你地圖 (程式碼概觀)) 在螢幕助讀程式模式中會停用。您可以使用 [編輯器: 協助工具支援] 設定 (editor.accessibilitySupport) 控制 VS Code 是否使用螢幕助讀程式模式,且值為 onoff 或預設的 auto,其會透過查詢平台自動偵測螢幕助讀程式。

透過鍵盤調整表格欄大小

list.resizeColumn 命令可讓您使用鍵盤調整欄大小。您可以指派鍵盤快速鍵以觸發此命令。

當您觸發此命令時,選取您想要調整大小的欄,並提供您想要設定的寬度百分比。下列影片顯示如何套用此功能來調整 [鍵盤快速鍵] 編輯器中的欄大小。

協助工具檢視

執行 [開啟協助工具檢視] 命令 ⌥F2 (Windows Alt+F2、Linux Shift+Alt+F2) 以顯示 [協助工具檢視],並逐字元、逐行檢查內容。[協助工具檢視] 目前適用於滑鼠停留、通知、註解、筆記本輸出、終端機輸出、聊天回應、內嵌完成、偵錯主控台輸出等等。

輸入控制和結果導覽

在輸入控制項 (例如,搜尋或篩選輸入) 及其結果之間導覽在 [擴充功能] 檢視、[鍵盤快速鍵] 編輯器和 [註解]、[問題] 和 [偵錯主控台] 面板中使用 (⌘↓ (Windows、Linux Ctrl+Down)) 和 (⌘↑ (Windows、Linux Ctrl+Up)) 保持一致。

終端機協助工具

您可以透過 ⌥F1 (Windows Alt+F1、Linux Shift+Alt+F1) 顯示終端機協助工具說明,其中描述使用螢幕助讀程式時的實用秘訣。其中一個秘訣是使用 ⌥F2 (Windows Alt+F2、Linux Shift+Alt+F2) 存取終端機中的緩衝區。這會根據您的螢幕助讀程式,自動進入螢幕助讀程式的瀏覽模式,以取得整個終端機緩衝區的協助工具檢視。

使用 editor.tabFocusMode 控制終端機是否接收 Tab 鍵而不是工作台,這與編輯器類似。

Shell 整合

終端機具有稱為 Shell 整合 的功能,可啟用許多在其他終端機中找不到的其他功能。使用螢幕助讀程式時,[執行最近的命令] 和 [前往最近的目錄] 功能特別有用。

另一個由 Shell 整合支援的命令 [前往協助工具檢視中的符號] (⇧⌘O (Windows、Linux Ctrl+Shift+O)) 可讓您在終端機命令之間導覽,類似於編輯器中的 [前往編輯器中的符號...] 導覽。

最小對比率

terminal.integrated.minimumContrastRatio 設定為介於 1 和 21 之間的數字,以調整文字色彩亮度,直到符合所需的對比率或達到純白色 (#FFFFFF) 黑色 (#000000) 為止。

請注意,terminal.integrated.minimumContrastRatio 設定不適用於 powerline 字元。

狀態列協助工具

一旦透過 [聚焦下一個部分] (F6) 將焦點放在狀態列中,您可以使用方向鍵導覽,在狀態列項目之間移動焦點。

差異編輯器協助工具

差異編輯器中有 [協助工具差異檢視器],以統一修補程式格式呈現變更。您可以使用 [前往下一個差異] (F7) 和 [前往上一個差異] (⇧F7 (Windows、Linux Shift+F7)) 在變更之間導覽。使用方向鍵導覽行,並按下 Enter 鍵跳回差異編輯器和選取的行。

偵錯工具協助工具

VS Code 偵錯工具 UI 是使用者可存取的,且具有下列功能

  • 讀出偵錯狀態變更 (例如,「已啟動」、「已命中中斷點」、「已終止」...)。
  • 所有偵錯動作都可透過鍵盤存取。
  • [執行和偵錯] 檢視和 [偵錯主控台] 都支援 Tab 導覽。
  • 偵錯滑鼠停留可透過鍵盤存取 (⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I))。
  • 可以建立鍵盤快速鍵,將焦點設定為每個偵錯工具區域。
  • 偵錯時且焦點在編輯器中時,叫用 [偵錯: 新增至監看式] 命令會宣告變數的值。

協助工具訊號

協助工具訊號會指出目前的行是否具有特定標記,例如:錯誤、警告、中斷點、摺疊的文字區域或內嵌建議。

當主要游標變更其行,或第一次將標記新增至目前的行時,會播放這些訊號。當附加螢幕助讀程式時,協助工具訊號聲音和宣告可能會自動啟用,且可由 accessibility.signals.* 設定控制。

[說明: 列出訊號聲音] 命令會列出所有可用的聲音,讓您在清單中移動時聽到每個聲音,並允許設定其啟用/停用狀態。

Aria 宣告也會通知螢幕助讀程式和點字使用者已命中特定標記。[說明: 列出訊號宣告] 命令會告知使用者哪些宣告可用,並允許設定其啟用/停用狀態。

滑鼠停留協助工具

某些滑鼠停留無法正常停留,這使得它們難以與螢幕放大鏡搭配使用。若要解決此問題,請在滑鼠停留作用中時按住 AltOption 鍵,以將其「鎖定」在適當位置,使其在滑鼠停留時不會隱藏。放開按鍵以解除鎖定滑鼠停留。

目前已知問題

VS Code 有一些已知的協助工具問題,視平台而定。如需完整清單,請前往 VS Code 協助工具問題

macOS

編輯器包含 VoiceOver 的螢幕助讀程式支援。

Linux

VS Code 可與 Orca 螢幕助讀程式良好搭配運作。如果 Linux 發行版本中的 Orca 未讀取編輯器內容

  • 請確定在 VS Code 中具有設定 "editor.accessibilitySupport": "on"。您可以使用設定來執行此動作,或執行 [顯示協助工具說明] 命令並按下 Ctrl+E 以開啟 accessibilitySupport。
  • 如果 Orca 仍然靜音,請嘗試將 ACCESSIBILITY_ENABLED=1 設定為環境變數。

在您啟用該設定之後,VS Code 應該會與 Orca 螢幕助讀程式搭配運作。

後續步驟

繼續閱讀以深入瞭解