アクセシビリティ

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

マーケットプレイスからカラーテーマをインストールしたら、ファイル > 設定 > テーマ > 配色テーマ ⌘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 ファイルで、次のコードを最も外側の中かっこで囲んでネストします。16 進コードを入力して、各オブジェクトに色を割り当てることができます。

"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 - 警告の強調表示色を上書きします。

editorError および editorWarning の背景に色を割り当てることも、潜在的な問題を特定するのに役立ちます。選択した色は、それぞれのエラーまたは警告を強調表示します。前の例に示されている色、#ffef0f (黄色) と #37777ff (青色) は、一般的な色覚異常を持つ人にとってアクセスしやすい色です。

アクセスしやすい色の選択

色のアクセシビリティは、異常な三色覚（色覚異常）の種類によって主観的です。重症度は人によって異なり、4つの状態タイプに分類できます。

状態	タイプ
二色覚	緑色の光に対する感度が低下しています。これは、最も一般的な色覚異常の形態です。
一色覚	赤色の光に対する感度が低下しています。
三色覚	青色の光に対する感度が低下しています。この状態はまれと考えられています。
単色覚	すべての色を見ることができない状態。無彩色視とも呼ばれます。最もまれな色覚異常の詳細については、Foundation for Fighting Blindness を参照してください。

特定の状態に最適な色を選択するための最良のアプローチの1つは、補色を適用することです。これらは、カラーホイール上で互いに反対側に位置する色です。

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)) コマンドを使用することをお勧めします。

アンカー選択

キーボードで選択を開始および終了しやすくするために、4つのコマンドがあります。選択アンカーの設定(⌘K ⌘B (Windows、Linux Ctrl+K Ctrl+B))、アンカーからカーソルまでを選択(⌘K ⌘K (Windows、Linux Ctrl+K Ctrl+K))、選択アンカーのキャンセル(Escape)、および 選択アンカーへ移動です。

VS Codeでは、Tab キーを使用してUIコントロール間を移動できます。Shift+Tab を使用して、逆順にタブ移動します。UIコントロールをタブ移動すると、フォーカスがあるUI要素の周りにインジケーターが表示されます。

ワークベンチのすべての要素がタブナビゲーションをサポートしています。タブストップが多すぎないようにするために、ワークベンチツールバーとタブリストにはそれぞれ1つだけあります。ツールバーまたはタブリストにフォーカスすると、矢印キーを使用してそれらの中を移動できます。

注：タブナビゲーションは、Webビュー（Markdownプレビューなど）を除き、視覚的に自然な順序で進みます。Webビューでは、F6 および ⇧F6 (Windows、Linux Shift+F6) コマンドを使用して、Webビューとワークベンチの残りの部分の間を移動することをお勧めします。または、多くのフォーカスエディターコマンドの1つを使用することもできます。

タブトラッピング

デフォルトでは、ソースコードファイル内で Tab を押すと、Tab文字（またはインデント設定に応じてスペース）が挿入され、開いているファイルから移動しません。⌃⇧M (Windows、Linux Ctrl+M) で 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は、テキストページネーションに基づく戦略を使用して、エディターでスクリーンリーダーをサポートしています。次のスクリーンリーダーがテストされています。

Windows：NVDA および JAWS
macOS：VoiceOver
Linux：Orca

NVDAの場合、参照モードを使用するのではなく、フォーカスモードを維持してホットキーを使用してナビゲートすることをお勧めします。

次のエラーまたは警告へ移動/前のエラーまたは警告へ移動アクション(F8 および ⇧F8 (Windows、Linux Shift+F8)) を使用すると、スクリーンリーダーでエラーと警告のメッセージをアナウンスできます。

提案が表示されると、スクリーンリーダーにアナウンスされます。Ctrl+Up および Ctrl+Down を使用して提案をナビゲートし、Shift+Escape で提案を破棄します。提案が邪魔になる場合は、editor.quickSuggestions 設定を使用して、提案をオフにできます。

差分表示ペインでは、次の差分へ移動/前の差分へ移動アクション(F7 および ⇧F7 (Windows、Linux Shift+F7)) によって、統合パッチ形式で差分が表示されるアクセス可能な差分ビューアーが表示されます。Up と Down を使用して、変更なし、挿入、または削除された行を移動します。Enter を押すと、選択した行番号（または、削除された行を選択した場合は、依然として存在する最も近い行番号）で差分エディターの変更されたペインにフォーカスが戻ります。Escape または Shift+Escape を使用して、アクセス可能な差分ビューアーを破棄します。

スクリーンリーダーモード

VS Codeは、スクリーンリーダーが使用されていることを検出すると、エディターや統合ターミナルなどのUI向けに最適化されたスクリーンリーダーモードになります。ステータスバーの右下に スクリーンリーダー最適化 が表示されます。表示テキストをクリックするか、スクリーンリーダーアクセシビリティモードの切り替え コマンドを使用して、スクリーンリーダーモードを終了できます。

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

折りたたみやミニマップ（コード概要）などの一部の機能は、スクリーンリーダーモードでは無効になります。VS Codeがスクリーンリーダーモードを使用するかどうかは、エディター：アクセシビリティサポート設定(editor.accessibilitySupport) で制御でき、値は on、off、またはプラットフォームをクエリしてスクリーンリーダーを自動的に検出するデフォルトの 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)で表示できます。これは、スクリーンリーダーを使用する際に役立つヒントを説明しています。1つのヒントは、⌥F2 (Windows Alt+F2、Linux Shift+Alt+F2)を使用してターミナルのバッファーにアクセスすることです。これにより、スクリーンリーダーに応じて、スクリーンリーダーのブラウズモードが自動的に開始され、ターミナルバッファー全体にアクセス可能なビューが表示されます。

editor.tabFocusModeを使用して、ターミナルがワークベンチの代わりにTabキーを受け取るかどうかを制御できます。これは、エディターと同様です。

シェル統合

ターミナルには、他のターミナルにはない多くの追加機能を有効にするシェル統合という機能があります。スクリーンリーダーを使用する場合、最近のコマンドを実行および最近のディレクトリに移動機能が特に役立ちます。

別のシェル統合によるコマンドであるアクセス可能なビューでシンボルに移動（⇧⌘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アナウンスは、スクリーンリーダーと点字ユーザーに特定のマーカーがヒットしたことを通知します。ヘルプ：信号アナウンスを一覧表示コマンドは、利用可能なアナウンスをユーザーに知らせ、有効/無効の状態を構成できます。

ホバーアクセシビリティ

一部のホバーは通常はホバーできないため、スクリーン拡大鏡での使用が困難です。これを回避するには、ホバーがアクティブなときにAltキーまたはOptionキーを押したままにして、ホバーしたときに隠れないように「ロック」します。キーを離してホバーのロックを解除します。

現在確認されている問題

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スクリーンリーダーで動作するはずです。

次のステップ

以下を読んで調べてください。

音声操作 - VS Codeで音声コマンドを使用する方法を学習します。
Visual Studio Codeユーザーインターフェース - VS Codeの簡単なオリエンテーション。
基本的な編集 - 強力なVS Codeエディターについて学びます。
コードナビゲーション - ソースコード内をすばやく移動します。

12/11/2024

アクセシビリティ