文書構造と動的なWebのアクセシビリティ

Mozillaでアクセシビリティ関連のQAを担当しているMarco Zeheが自身のBlogに “The importance of placement of HTML elements in a document” という記事を投稿していました。JavaScriptでモーダルダイアログなどを実現するものがありますが、実装方法によってアクセシビリティを著しく損ねることになるケースが紹介されています。

記事で例に挙げられていたのはThickBox。デモの写真やリンクをクリックするとダイアログが開くのですが、これは新たに生成したdivを文書の一番後ろに追加し、それをスタイルシートで調整するという実装が行われています。

表示上はなんら問題ない方法ですが、Zeheはこの「文書の一番後ろに追加する」ことに問題があると述べています。文書の最後に要素を追加してしまうと、内容の多いページにおいてはアンカー（または画像）を表す要素とダイアログを表す要素が近接しない場合があるので、スクリーンリーダーのような文書順に情報を辿るソフトウェアでは、情報の変化を追うことが困難になるのです。

Zeheは「ユーザーの位置をふまえた適切な位置に要素を追加して欲しい」と述べています。文書構造の重要性がこういった動的な部分でも活きてくるのは、すこし新鮮に感じました。

動的なWebにおけるアクセシビリティについては、WAI-ARIAなど技術的な面での対応は進んでいますが、この件のように「どのように使えば問題が少ないか」など、手法に関する議論はまだ充分に行われていないように感じます。技術の展開に向けた取り組みが、今後の大きな課題になりそうですね。