アクセシビリティインスペクターは、アクセシビリティツリーによって現在のページで支援技術に公開される重要な情報へアクセスする手段を提供して、欠けている情報やほかに注意が必要なことを確認できます。この記事では、アクセシビリティインスペクターの主な機能や使用方法を説明します。
アクセシビリティは、可能な限り多くの人々があなたのウェブサイトを利用できるようにするための慣習です。これは利用者の障がいや、使用する端末・ネットワーク速度・地理的な位置といった個人の状況によって情報へアクセスできない状態にしないように、最善を尽くすことです。
ここでは主に、視覚障がいを持つ人々に情報を提供すること (これはウェブブラウザーで使用できる accessibility API で実現します) について扱います。それは、あなたのページでさまざまな要素がどのような役割を持つかという情報を提供します (例えば単純なテキスト、ボタン、リンク、フォーム要素など)。
セマンティック DOM 要素はデフォルトで、その用途を示唆する役割が割り当てられています。しかし、時には複雑な独自のコントロールを作成するためにセマンティックではないマークアップ (例えば {{htmlelement("div")}}) を使用しなければならず、これは用途を反映するデフォルトの役割を持っていません。このような状況では、自身の役割を与えるために WAI-ARIA ロール属性を使用できます。
ブラウザーの accessibility API によって公開される役割やほかの情報は、アクセシビリティツリーと呼ばれる階層構造で提供されます。これは DOM ツリーに少し似ていますが、含まれる要素一式がより制限されており、またツリーが持つ情報も若干異なっています。
スクリーンリーダーなどの支援技術は、ウェブページに何があるかを見つけるためにこの情報を使用して、ユーザーにそれが何であるかを伝えて、ページと対話できるようにします。開発ツールのアクセシビリティインスペクターもこの情報を使用して、価値があるアクセシビリティのデバッグ機能を提供します。
アクセシビリティインスペクター (Firefox 61 から使用可能) は、デフォルトで開発ツールに表示されていません。有効化するには開発ツールの設定 (F1 を押下するか、"三点リーダー" メニューで 設定 を選択する) を開いて、標準の開発ツール の アクセシビリティ チェックボックスにチェックを入れてください。これにより開発ツールに アクセシビリティ タブが現れます。タブをクリックすると、アクセシビリティパネルを表示します:
初期状態では開発ツールのアクセシビリティ機能を無効にしており (別のブラウザータブですでに有効にしている場合や、スクリーンリーダーのユーザーやテスターであるなどの理由で Firefox のアクセシビリティエンジンをすでに開始している場合を除きます)。これは、アクセシビリティ機能が有効であるときにバックグラウンドでアクセシビリティエンジンを実行するためです。エンジンを実行すると、パフォーマンスが低下してメモリ消費が増えます。それにより、メモリー や パフォーマンス といったほかのパネルの測定を妨げたり、ブラウザー全体のパフォーマンスが低下したりします。このため、特に使用しないときはアクセシビリティ機能を無効にしておくべきです。
[アクセシビリティ機能を有効にする] ボタンを押すと、アクセシビリティ機能を有効にします。
パネルの内容が読み込まれたら、左上にある [アクセシビリティ機能を無効にする] ボタンを押すと再び無効にできます。ただし、スクリーンリーダーを使用するためにアクセシビリティエンジンがすでに動作していた場合は除きます。この場合はボタンが使用できません。
注記: 複数のタブでアクセシビリティ機能を使用している場合は、あるタブで無効にするとすべてのタブで無効になります。
アクセシビリティパネルを有効にすると以下のようになります:
左側に、現在のページのアクセシビリティツリー内のすべてのアイテムを表す樹形図があります。入れ子の子孫を持つアイテムにはクリックして子孫を表示できる矢印がありますので、階層の深い部分へ移動できます。それぞれのアイテムで、2 つのプロパティを示します:
pushbutton や footer)。これはブラウザーが与えたデフォルトの役割か、WAI-ARIA の role 属性で与えた役割のいずれかです。textContent ですが、フォーム要素の名前は、その要素に関連付けられた {{htmlelement("label")}} の内容物です。右側には、選択中のアイテムに関する詳細情報を表示します。ここには以下のプロパティを表示します:
<a> 要素の href 属性にある URL です。
accessKey 属性で指定します。これは Firefox 62 から正常に動作します ({{bug("1467381")}})。注記: 公開される情報は、すべてのプラットフォームで同じです。インスペクターはプラットフォームのアクセシビリティ層の情報ではなく、Gecko のアクセシビリティツリーを公開します。
アクセシビリティ タブは、キーボードで操作可能です:
アクセシビリティ機能を有効にすると、開発ツールでいくつかの有用な追加機能を利用できます。ここでは、それらを詳しく説明します:
ウェブページで UI を右クリックまたは Ctrl + クリックしたときの通常のコンテキストメニューと、インスペクターの HTML ペインで DOM 要素を右クリックまたは Ctrl + クリックしたときのコンテキストメニューの両方に、項目が追加されます:
コンテキストメニューの [アクセシビリティプロパティを調査]/[アクセシビリティプロパティを表示] を選択すると、対応するアクセシビリティツリーのアイテムやプロパティを表示するために、アクセシビリティ タブが直ちに開きます。
注記: 一部の DOM 要素はアクセシビリティプロパティがありません。このような場合は [アクセシビリティプロパティを調査]/[アクセシビリティプロパティを表示] のメニュー項目がグレーアウトします。
アクセシビリティタブでアクセシビリティアイテムにマウスポインターを載せると、可能であれば関連する UI アイテムで半透明のハイライト表示を行います。小さな情報バーに、アイテムの役割や名前を表示します。これは、アクセシビリティツリーのアイテムが実際のページでどの UI アイテムに関連しているかを判断するのに役立ちます。
以下の例では画像がハイライト表示されており、役割 "graphic" と名前 "Road, Asphalt, Sky, Clouds, Fall" を上の情報バーに表示していることがわかります。
コントラスト比が十分でない場合、色盲などの視覚障害を持つ読者はテキストを読み取ることができないため、コントラスト比の情報は、ウェブサイトのカラーパレットを設計するときに特に便利です。Web コンテンツアクセシビリティガイドライン (WCAG) 2.0 では、Web ページ上の小さなテキストの前景色と背景色との最小コントラスト比として 4.5:1 を定義しています。例えば：
上記の画像の色のコントラストは 2.77 であり、読みやすいようにコントラストが不十分である可能性があります。コントラストが許容されるコントラスト比を満たしていないことを示す警告記号に注目してください。それを以下と比較してください：
この例では、コントラストは 12.63 です。今回は AAA とチェックマークが緑色で表示され、テキストのコントラスト比が 7:1 以上であることを示しています。つまり、コントラストの強化基準、またはレベル AAA を満たしています。
インスペクターの HTML ペインピッカー と同様に、アクセシビリティタブのピッカーボタンを押すと現在のページで UI アイテムを選択できます。そして、アクセシビリティツリーで対応するオブジェクトをハイライト表示します。
アクセシビリティタブのピッカーは、以下のようにインスペクターの HTML ペインピッカーとは外見が若干異なります:
"オブジェクトを選択" するとアクセシビリティツリーでアクセス可能なオブジェクトをハイライト表示して、ピッカーが非アクティブ化します。ただし Shift キーを押しながら "オブジェクトを選択" すると、ツリーでアクセス可能なオブジェクトを "プレビュー" できます (右ペインにオブジェクトのプロパティを表示します) が、Shift キーを離すまではいくつでも選択し続ける (ピッカーがキャンセルされません) ことができます。
ピッカーがアクティブであるとき、ピッカーボタンを再度押すか Esc キーを押すと、ピッカーを非アクティブ化できます。
アクセシビリティインスペクターは、アクセシビリティの問題を一目で見抜くためにとても役に立ちます。第一に、適切な同等文字列がないアイテム (例えば alt 文字列がない画像や、name プロパティが null で適切なラベルがないフォーム要素) を調査できます。
また、セマンティクスの検証でも役に立ちます。[アクセシビリティオブジェクトを調査] コンテキストメニュー項目を使用して、アイテムに正しい役割 (例えばボタンが実際にボタンの役割、リンクが実際にリンクの役割を持つか) を設定しているかをすばやく確認できます。
