🚀 在 VS Code 中

協助工具

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

縮放

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

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

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

Zoomed in editor

持續性縮放層級

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

協助工具說明

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

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

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 的預設色彩佈景主題為 Dark+。不過,您可以自訂使用者介面中的佈景主題和屬性色彩。

注意:前往 自訂色彩佈景主題,以深入了解如何覆寫目前佈景主題中的色彩。

若要自訂錯誤和警告波浪線,請前往使用者設定的 檔案 > 喜好設定 > 設定。搜尋「色彩自訂」以尋找 工作台:色彩自訂 設定,然後選取 在 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 設定為 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

您也可以使用 切換 Tab 鍵移動焦點 動作,從 命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 開啟和關閉 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) 以顯示 [協助工具檢視],並逐字元、逐行檢查內容。[協助工具檢視] 目前適用於 Hover、通知、註解、Notebook 輸出、終端機輸出、聊天回應、內嵌完成、偵錯主控台輸出等等。

輸入控制和結果導覽

輸入控制項 (例如,搜尋或篩選輸入) 與其結果之間的導覽在 [擴充功能] 檢視、[鍵盤快速鍵] 編輯器,以及 [註解]、[問題] 和 [偵錯主控台] 面板中使用 (⌘↓ (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 鍵導覽。
  • 偵錯 Hover 可透過鍵盤存取 (⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I))。
  • 可以建立鍵盤快速鍵,將焦點設定為每個偵錯工具區域。
  • 在偵錯期間且焦點位於編輯器中時,叫用 偵錯:新增至監看式 命令會宣告變數的值。

協助工具訊號

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

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

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

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

Hover 協助工具

某些 Hover 無法正常 Hover,這使得螢幕放大鏡難以使用它們。為了解決此問題,請在 Hover 為作用中時按住 AltOption 鍵以「鎖定」它,使其在 Hover 時不會隱藏。放開按鍵以解除鎖定 Hover。

目前已知問題

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 螢幕助讀程式搭配運作。

後續步驟

請繼續閱讀以了解