DOM Inspectorを使ったアクセシビリティオブジェクトの調査

前回の投稿から少し間が空いてしまいましたが、私は「CSUN2013 参加報告セミナーを開催します」の中で次のように書きました。

• マークアップが変化しなくてもdisplayプロパティ値が変化することで、要素が支援技術からどのように見えるのか（表なのか見出しなのか、など）が変化する

これを読んで次のような疑問を持たれた方もいたのではないかと思います。

「ある要素の支援技術からの見え方（アクセシビリティオブジェクト）はどう確認すれば良いのか？」

確認方法にはいくつかありますが、この記事では手軽に試すことができる方法としてFirefoxのアドオン、DOM Inspectorを使う方法を紹介します。

DOM Inspectorの準備

まずFirefoxにDOM Inspectorをインストールします。Firefoxの再起動後に、Firefoxボタンメニューの「Web 開発」から「DOM Inspector」を選択して起ち上げます。

DOM Inspectorの画面は大きく左右2つのペインに分かれています。左側のペインにはページの構造を表示し、右側のペインには左側のペインで選んだオブジェクトの詳細情報が表示されます。左右どちらのペインも、ペインの左上にある表示アイコン（Windowsのエクスプローラーにあるフォルダの表示方法を変更するアイコンに似たアイコンです。残念ながらアイコンにはラベルが設定されていません。）をクリックして、表示する情報の種類を選ぶことができます。

また、アクセシビリティオブジェクトを表示するにはDOM InspectorのViewメニューにある「Show Accessible Nodes」にチェックを入れます。

これで準備は完了です。

DOMツリーを使った調査

DOM Inspectorは初期状態では左側のペインはWebページのDOMツリーを表示しています。ツリーを展開していくとDOMノードが表示され、いくつかは太字で表示されます。太字で表示されているDOMノードには、DOMノードに対応したアクセシビリティオブジェクトが作られています。

選択したDOMノードのアクセシビリティオブジェクトの情報を確認するには、右側のペインに「Accessible Properties」を表示します。具体的には、右側のペインの左上にある表示アイコンを選択して表示されるメニューから「Accessible Properties」を選びます。

「Accessible Properties」ペインにはアクセシビリティオブジェクトに関する様々な情報が表示され、その内容を確認することができます。例えば、Role欄にはアクセシビリティオブジェクトの役割が表示されます。あるアクセシビリティオブジェクトのRole欄が「heading」であれば見出し、「link」であればリンクの役割をもっていることがわかります。なお、ここで表示されている役割はFirefoxの内部的な表現のためWAI-ARIAやアクセシビリティAPIが定義している役割と対応していないものもあります。

アクセシビリティツリーを使った調査

DOMツリーと対応した表示は便利ですが、アクセシビリティオブジェクトのツリーはDOMツリーの構造と一致しない場合があります。

例えば、非表示（display:noneやvisibility:hiddenなど）のDOMノードは基本的にアクセシビリティオブジェクトが作られません。一方でCSSの:beforeや:after擬似要素は、contentプロパティにテキストが指定された場合、アクセシビリティオブジェクトが作られますが、DOMツリー上には擬似要素は表示されません。

DOM Inspectorを使うとアクセシビリティオブジェクトのツリーを見ることができます。DOM Inspectorの左ペインの表示アイコンをクリックし、メニューから「Accessible Tree」を選択するとアクセシビリティオブジェクトのツリーが表示されます。

ミツエーリンクスのトップページを調査してみると、documentオブジェクトをルートとして、その下にheaderオブジェクト、listオブジェクト2個、sectionオブジェクト、footerオブジェクトがあることがわかります。ツリーの項目を展開することでheaderオブジェクトの下にはsectionオブジェクトがあり、sectionオブジェクトの下にはheadingとform、sectionオブジェクトがあり...ということがわかります。このようにAccessible Treeペインを使うとWebページがどのようなアクセシビリティオブジェクトから構成されているのかを簡単に調べることができます。

表の調査

では、実際に表のアクセシビリティオブジェクトを調査してみましょう。同一のマークアップをおこなった2つの表を用意し、片方にはdisplayプロパティを指定せず、もう片方にはdisplay:blockを指定しました（テストファイル）。

DOM Inspectorで調べてみると、displayプロパティを指定しなかった表ではtable要素にtableオブジェクト、tr要素にrowオブジェクト、td要素にcellオブジェクトが作られていることがわかりました。

もう1つの表にはtable、tbody、tr、th、td要素にdisplay:blockを指定しています。こちらの表ではtable、tbody、tr、th、tdともにparagraphオブジェクト（段落）になっていることがわかりました。

制限事項

手軽に調査できるDOM Inspectorにもいくつかの制限があります。中でも一番大きなものはFirefoxの内部表現しか調べることができないというものです。

DOM InspectorはFirefoxのアドオンであるため、当然ですがそれを使ってInternet ExplorerやGoogle Chromeなどの他のブラウザを調査することはできません。

また、DOM Inspector上に表示される情報はFirefoxの内部表現です。内部表現では区別がついている情報でもアクセシビリティAPIを通すと区別がつかなくなる場合もあります。DOM Inspectorに表示されている情報と支援技術から実際に見える情報には違いがありえますので表示結果の解釈には注意が必要です。

とはいえ、DOM Inspectorは手軽に使用することができるツールです。Firefoxを使っていて何か気になることがあった場合には試してみると良いでしょう。

ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up

• アクセシビリティ

  Webサイトのアクセシビリティ対応状況の診断から構築・運用支援まで幅広く対応、障害者差別解消法への対応が気になるかたにも