アクセシビリティ
Visual Studio Code には、すべてのユーザーがエディターにアクセスしやすくするための多くの機能が備わっています。ズーム レベルやハイコントラスト カラーはエディターの視認性を向上させ、キーボードのみでのナビゲーションはマウスなしでの操作をサポートし、エディターはスクリーン リーダー向けに最適化されています。
ズーム
VS Code のズーム レベルは、表示 > 外観 > ズーム コマンドで調整できます。各 ズーム コマンドは、ズーム レベルを 20% ずつ拡大または縮小します。
- 表示 > 外観 > 拡大 (⌘= (Windows、Linux Ctrl+=)) - ズーム レベルを上げます。
- 表示 > 外観 > 縮小 (⌘- (Windows、Linux Ctrl+-)) - ズーム レベルを下げます。
- 表示 > 外観 > ズームのリセット (⌘Numpad0 (Windows、Linux Ctrl+Numpad0)) - ズーム レベルを 0 にリセットします。
注: 拡大鏡を使用している場合は、Alt キーを押しながらホバーを表示することで、カーソルをホバー上に移動できます。
保持されるズーム レベル
表示 > 外観 > 拡大 / 縮小 コマンドでズーム レベルを調整すると、そのレベルは window.zoomLevel 設定に保存されます。デフォルト値は 0 です。0 を超える、または下回る 1 段階ごとに 20% の拡大/縮小が行われます。小数を入力して、より細かくズーム レベルを調整することも可能です。
アクセシビリティ ヘルプ
アクセシビリティ ヘルプを開く コマンド (⌥F1 (Windows Alt+F1、Linux Shift+Alt+F1)) を実行すると、現在のコンテキストに応じたヘルプ メニューが開きます。現在、エディター、ターミナル、ノートブック、チャット ビュー、インライン チャットの各機能に対応しています。
ヘルプ メニューは閉じることができ、メニュー内から追加のドキュメントを開くことも可能です。
ハイコントラスト テーマ
VS Code はすべてのプラットフォームでハイコントラスト カラー テーマをサポートしています。ファイル > ユーザー設定 > テーマ > カラー テーマ (⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)) を使用して カラー テーマの選択 ドロップダウンを表示し、ハイコントラスト テーマを選択します。
色覚アクセシビリティ
Visual Studio Marketplace で、色覚多様性に対応した拡張機能を検索できます。拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) を使用し、「color blind」と検索して関連オプションを表示してください。
Marketplace からカラー テーマをインストールしたら、ファイル > ユーザー設定 > テーマ > カラー テーマ (⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)) から カラー テーマ を変更できます。
色覚アクセシビリティにおすすめのテーマ
- GitHub - ほとんどの色覚特性に対応しており、GitHub の設定テーマと一致しています。
- Gotthard - 約 20 種類のプログラミング言語向けに最適化されています。
- Blinds - 第 2 色覚（緑色盲）のユーザー向けに作成されており、高コントラスト比が特徴です。
- Greative - 色覚多様性と光過敏症の両方を考慮しています。
- Pitaya Smoothie - ほとんどの色覚特性に対応し、WCAG 2.1 のコントラスト基準に準拠しています。
警告色のカスタマイズ
VS Code のデフォルトのカラー テーマは Dark+ です。ただし、ユーザー インターフェイスのテーマやプロパティの色はカスタマイズ可能です。
注: 現在のテーマの色を上書きする方法については、カラー テーマのカスタマイズを参照してください。
エラーや警告の波線をカスタマイズするには、ファイル > ユーザー設定 > 設定 に移動します。「color customizations」で検索して Workbench: Color Customizations 設定を見つけ、settings.json で編集 を選択してユーザーの settings.json ファイルを開きます。
settings.json ファイル内の外側の波括弧内に、以下のコードを記述します。各オブジェクトに 16 進数コードを入力することで色を割り当てることができます。
"workbench.colorCustomizations": {
"editorError.foreground": "#ffef0f",
"editorWarning.foreground": "#3777ff"
}
次の例では、JSON 項目後にカンマが不足している場合に警告色が適用されます。
editorError.foreground- エラーの下に表示される波線を上書きします。editorWarning.foreground- 警告の下に表示される波線を上書きします。editorError.background- エラーのハイライト色を上書きします。editorWarning.background- 警告のハイライト色を上書きします。
editorError と editorWarning の背景に色を割り当てることも、潜在的な問題を特定するのに役立ちます。選択した色はそれぞれのエラーや警告を強調表示します。上の例で示した #ffef0f（黄色）と #37777ff（青色）は、一般的な色覚特性を持つ方にとって認識しやすい色です。
アクセシブルな色の選択
色のアクセシビリティは、異常三色覚（色盲）の種類によって主観的です。重症度は個人によって異なり、4 つの状態タイプに分類できます。
| 状態 | タイプ |
|---|---|
| 第 2 色覚（緑色盲） | 緑色の光に対する感度の低下。最も一般的な色盲の形態です。 |
| 第 1 色覚（赤色盲） | 赤色の光に対する感度の低下。 |
| 第 3 色覚（青色盲） | 青色の光に対する感度の低下。この状態は稀です。 |
| 全色盲 | すべての色が見えない状態。単色覚とも呼ばれます。最も稀な形態については、Foundation for Fighting Blindness を参照してください。 |
特定の状態に合わせて最適な色を選択する最良のアプローチの 1 つは、補色を使用することです。補色とは、色相環上で互いに反対側に位置する色のことです。
注: 補色の見つけ方に関する詳細は、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 を押してからコマンド名（例：「git」）を入力してリストをフィルタリングします。
VS Code には、コマンド用のプリセット キーボード ショートカットも多数用意されています。
独自のキーボード ショートカットを設定することも可能です。ファイル > ユーザー設定 > キーボード ショートカット (⌘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)、および 選択アンカーへ移動 という 4 つのコマンドがあります。
Tab キーによるナビゲーション
Tab キーを使用して、VS Code 内の UI コントロール間を移動できます。Shift+Tab を使用すると逆順で移動します。UI コントロールを Tab キーで移動する際、フォーカスがある UI 要素の周囲にインジケーターが表示されます。
ワークベンチ内のすべての要素は Tab ナビゲーションをサポートしています。タブ移動の回数が多すぎるのを防ぐため、ツールバーとタブ リストにはそれぞれ 1 つのタブストップしかありません。ツールバーやタブ リストにフォーカスがある場合、矢印キーを使用してその中を移動できます。
注: Tab ナビゲーションは、WebView（Markdown プレビューなど）を除き、視覚的に自然な順序で行われます。WebView の場合は、F6 および Shift+F6 コマンドを使用して、WebView とワークベンチの他の部分を移動することを推奨します。あるいは、いずれかの「エディターにフォーカス」コマンドを使用することも可能です。
Tab キーのトラップ
デフォルトでは、ソース コード ファイル内で Tab キーを押すとタブ文字（または設定に応じたスペース）が挿入され、開いているファイルから離れることはありません。⌃⇧M (Windows、Linux Ctrl+M) で Tab キーのトラップを切り替えることができ、以降は Tab キーを押すとフォーカスがファイルから移動します。デフォルトの Tab トラップがオフの場合、ステータス バーに「Tab キーでフォーカスを移動」というインジケーターが表示されます。
Tab トラップは統合ターミナルにも存在します。この機能のデフォルト動作は、 editor.tabFocusMode で構成できます。
また、コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) の タブ キーでフォーカスを移動するを切り替え アクションからでも、Tab トラップのオン/オフを切り替えられます。
読み取り専用ファイルでは Tab キーはトラップされません。統合ターミナル パネルも Tab トラップ モードを尊重しており、Ctrl+M で切り替え可能です。
スクリーン リーダー
VS Code は、テキスト ページネーションに基づく戦略を使用して、エディターでのスクリーン リーダーをサポートしています。以下のスクリーン リーダーがテスト済みです。
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 に対して最適化されたスクリーン リーダー モードに入ります。ステータス バーの右下に スクリーン リーダーに最適化 と表示されます。この表示テキストをクリックするか、アクセシビリティ モードの切り替え コマンドを使用してスクリーン リーダー モードを終了できます。
スクリーン リーダー モードでは、コード折りたたみやミニマップ（コードの概要）など、一部の機能が無効になります。VS Code がスクリーン リーダー モードを使用するかどうかは Editor: Accessibility Support 設定 ( editor.accessibilitySupport ) で制御でき、値には on、off、またはプラットフォームをクエリして自動的にスクリーン リーダーを検出するデフォルトの auto があります。
キーボードによるテーブル列のサイズ変更
list.resizeColumn コマンドを使用すると、キーボードで列のサイズを変更できます。このコマンドをトリガーするためにキーボード ショートカットを割り当てることができます。
コマンドを実行したら、サイズを変更したい列を選択し、設定したい幅の割合を入力します。以下のビデオでは、キーボード ショートカット エディターで列のサイズを変更する様子を紹介しています。
アクセシブルビュー
アクセシブル ビューを開く コマンド (⌥F2 (Windows Alt+F2、Linux Shift+Alt+F2)) を実行してアクセシブル ビューを表示し、コンテンツを 1 文字ずつ、1 行ずつ確認します。アクセシブル ビューは現在、ホバー、通知、コメント、ノートブック出力、ターミナル出力、チャット応答、インライン補完、デバッグ コンソール出力などで利用可能です。
入力コントロールと結果のナビゲーション
入力コントロール（検索やフィルター入力など）とその結果の間の移動は、拡張機能ビュー、キーボード ショートカット エディター、コメント、問題、デバッグ コンソールの各パネルで一貫しており、⌘↓ (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 キーを直接受け取るかどうかを制御します。
シェル統合
ターミナルには、他のターミナルにはない多くの機能を追加するシェル統合という機能があります。スクリーン リーダーを使用する場合、最近のコマンドを実行と最近のディレクトリへ移動機能が特に便利です。
もう 1 つのシェル統合によるコマンド、アクセシブル ビューでシンボルへ移動 (⇧⌘O (Windows、Linux Ctrl+Shift+O)) を使用すると、エディターの エディターでシンボルへ移動... ナビゲーションと同様に、ターミナル コマンド間を移動できます。
最小コントラスト比
terminal.integrated.minimumContrastRatio を 1 ～ 21 の数値に設定し、希望のコントラスト比が満たされるか、純白 (#FFFFFF) または純黒 (#000000) に達するまでテキスト色の輝度を調整します。
terminal.integrated.minimumContrastRatio 設定は、powerline 文字には適用されないことに注意してください。
ステータス バーのアクセシビリティ
次のパーツにフォーカス (F6) でステータス バーにフォーカスした後は、矢印キーを使用してステータス バーの項目間を移動できます。
Diff エディターのアクセシビリティ
Diff エディターには、変更点を統合パッチ形式で表示する「アクセシブルな差分ビューア」があります。次の差分へ移動 (F7) と 前の差分へ移動 (⇧F7 (Windows、Linux Shift+F7)) で変更間を移動できます。矢印キーで行を移動し、Enter を押すと、Diff エディターの選択行に戻ります。
デバッガーのアクセシビリティ
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 エディターについて学習します。
- コードナビゲーション - ソースコードを素早く移動します。