アクセシビリティリファレンス

このページは、Chromeのアクセシビリティ機能の包括的なリファレンスですDevTools.It web開発者を対象としています。:

• どのように開くかなど、DevToolsの基本的な理解を持っています。
• はアクセシビリティの原則とベストプラクティスに精通しています。

このリファレンスの目的は、ページのアクセシビリティを調べるのに役立つinDevToolsで利用可能なすべてのツールを発見するのに役立つことです。

“Chrome DevToolsを支援技術でナビゲートする”を参照してくださいスクリーンリーダーのような支援技術で開発ツールをナビゲートするためのヘルプを探している場合。

Chrome DevToolsのアクセシビリティ機能の概要

このセクションでは、devtoolsがアクセシビリティツールキット全体にどのように適合するかを説明します。

ページにアクセスできるかどうかを判断するには、2つの一般的な質問を念頭に置いておく必要があります:

1. キーボードやスクリーンリーダーでページを移動できますか？
2. ページの要素はスクリーンリーダー用に適切にマークアップされていますか？

一般に、DevToolsは質問#2に関連するエラーを修正するのに役立ちます。 質問＃1は同じように重要ですが、残念ながらDevToolscan’tはそこにあなたを助けます。 質問＃1に関連するエラーを見つける唯一の方法は、キーボードまたはスクリーンリーダーでページを使用してみてください。 アクセシビリティレビューを行う方法を参照してください詳細を学ぶために。

ページのアクセシビリティを監査する

一般に、監査パネルを使用して、次のかどうかを判断します:

• ページはスクリーンリーダー用に適切にマークアップされます。
• ページ上のテキスト要素は十分なコントラスト比を持っています。 カラーピッカーでテキスト要素のコントラスト比を表示するも参照してください。ページを監査するには

:

1. 監査するURLに移動します。

2. DevToolsで、監査タブをクリックします。 DevToolsには、さまざまな設定オプションが表示されます。

   

3. モバイルデバイスをシミュレートする場合は、[デバイス]で[モバイル]を選択します。 このオプションは、ユーザーエージェントの文字列を変更し、ビューポートのサイズを変更します。 モバイル版のページがデスクトップ版とは異なる表示になっている場合、このオプションは監査の結果に大きな影響を与える可能性があります。

4. [監査]セクションで、アクセシビリティが有効になっていることを確認します。 Othercategoriesをレポートから除外する場合は、othercategoriesを無効にします。 あなたがしたい場合は、それらを有効にしたままにしますあなたのページの品質を向上させるための他の方法を発見します。

5. スロットルセクションでは、ネットワークとCPUをスロットルすることができます。 このオプションは、あなたのアクセシビリティスコアとは無関係である必要がありますので、あなたが好きなusewhateverすることができます。

6. 記憶域を消去チェックボックスを使用すると、ページを読み込む前にすべての記憶域を消去したり、ページを読み込む間に記憶域を保存したりできます。 このオプションは、おそらくあなたのアクセシビリティスコアとは無関係なので、あなたが好むものは何でも使用することができます。

7. [監査の実行]をクリックします。 10～30秒後、DevToolsはレポートを提供します。レポートには、ページのアクセシビリティを向上させるためのさまざまなヒントが記載されています。

   

8. 監査の詳細を確認するには、監査をクリックします。

   

9. “詳細”をクリックして、その監査のドキュメントを表示します。

   

も参照してください: aXe extension

監査パネルではなくaXe extensionを使用することをお勧めします。AXeはtheAuditsパネルに動力を与える基礎となるエンジンであるため、一般的には同じ情報を提供します。 AXe拡張機能には異なるUIがあり、監査の説明はわずかに異なります。AXe拡張機能がAuditsパネルに対して持つ利点の1つは、失敗したノードを検査してhighlightできることです。

アクセシビリティペイン

アクセシビリティペインは、DOMノードのアクセシビリティツリー、ARIA属性、および計算されたアクセシビリティプロパティを

アクセシビリティペインを開くには:

1. “要素”タブをクリックします。
2. DOMツリーで、検査する要素を選択します。
3. アクセシビリティタブをクリックします。 このタブは、More Tabsボタンの後ろに隠されている場合があります。

アクセシビリティツリー内の要素の位置の表示

アクセシビリティツリーはDOMツリーのサブセットです。 これには、ページの内容をスクリーンリーダーに表示するのに関連し、有用なDOMツリーからの要素のみが含まれています。

アクセシビリティパネルからアクセシビリティツリー内の要素の位置を検査します。

要素のARIA属性を表示

ARIA属性は、スクリーンリーダーがページの内容を適切に表すために必要なすべての情報を持っている

アクセシビリティペインで要素のARIA属性を表示します。

要素の計算されたアクセシビリティプロパティの表示

アクセシビリティプロパティの中には、ブラウザによって動的に計算 これらのプロパティは、アクセシビリティペインの計算されたプロパティセクショ

アクセシビリティペインで要素の計算されたアクセシビリティプロパティを表示します。

カラーピッカーでテキスト要素のコントラスト比を表示

視力の低い人の中には、領域が非常に明るい すべてがほぼ同じ明るさで表示されるため、輪郭とエッジを区別することが困難になります。コントラスト比は、前景とbackgroundofテキストの明るさの差を測定します。 あなたのテキストに低い対照の比率があれば、これらの低い視野のユーザーは文字通り空白スクリーンとしてあなたの場所を経験するかもしれません。

カラーピッカーは、テキストが推奨コントラスト比を満たしていることを確認するのに役立ちます:

1. “要素”タブをクリックします。

2. DOMツリーで、検査するテキスト要素を選択します。

   

3. スタイルペインで、要素のcolor値の横にある色の四角形をクリックします。

   

4. カラーピッカーのコントラスト比セクションを確認します。 一つのチェックマークは、要素が最小推奨事項を満たしていることを意味します。2つのチェックマークは、拡張された推奨事項を満たしていることを意味します。

   

5. “コントラスト比”セクションをクリックして、詳細情報を表示します。 カラーピッカーの上部にあるvisualpickerに行が表示されます。 現在の色が推奨事項を満たしている場合は、行の同じ側にあるものも推奨事項を満たしています。 現在の色が推奨事項を満たしていない場合、同じ側のものも推奨事項を満たしていません。

   

フィードバック