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

By Kayce Basques
Technical Writer,Chrome DevTools&Lighthouse

このページは、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には、さまざまな設定オプションが表示されます。

    図1. 監査の構成

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

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

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

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

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

    図2. 報告書を作成しました

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

    図3. 監査の詳細

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

    図4. 監査のドキュメントの表示

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

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

図5. AXe拡張機能

アクセシビリティペイン

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

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

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

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

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

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

図7. アクセシビリティツリーセクション

要素のARIA属性を表示

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

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

図8. ARIA属性セクション

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

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

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

図9. 計算された(アクセシビリティ)プロパティセクション

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

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

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

  1. “要素”タブをクリックします。
  2. DOMツリーで、検査するテキスト要素を選択します。

    図10. DOMツリー内の段落の検査

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

    図11. 要素のcolorプロパティ

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

    図12. カラーピッカーのコントラスト比セクションには、2つのチェックマークと次の値が表示されます16.10

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

    図13. ビジュアルピッカーのコントラスト比の行

フィードバック

このページは役に立ちましたか?
はい
このページで一番良かったことは何ですか?
それは私の目標を完了するのに役立ちました
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

それは私が必要とする情報を持っていました
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

正確な情報を持っていました
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

読みやすかったです
ご意見ありがとうございました。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

何か他のもの
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

いいえ
このページの最悪のことは何でしたか?
それは私が私の目標(s)を完了するのに役立ちませんでした
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

それは私が必要とする情報が欠落していました
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

不正確な情報がありました
フィードバックに感謝します。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

を読むのは難しかったです。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

何か他のもの
フィードバックをありがとう。 このページを改善する方法について具体的なアイデアがある場合は、問題を作成してください。

コメントを残す

メールアドレスが公開されることはありません。