この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

もずはっく日記(2006年4月)

2006年4月28日

CairoではXOR描画ができないことによるWebページへの影響
初回投稿日時: 2006年04月28日03時08分11秒
カテゴリ: Mozilla Core
SNS: (list)

Gecko1.9(Firefox3に搭載予定)ではグラフィックエンジンにCairoを利用することによって、今まで修正が不可能もしくは困難だったバグを修正しようとしている(例えばページ全体のズーム機能)。

このCairoの現時点での最大の欠点がXOR描画による反転表示ができないことである。XORによる反転は、Gecko1.8まででは、キャレットとoutlineinvertに使っていたので、これらの処理の見直しが現在行われている。

現時点ではキャレットは常に前景色(テキストの色、つまりcolorプロパティ値)と同じ色で描画されるように修正されている(Bug-org 287813)。しかし、これにも問題があって、MS ゴシックの一部の漢字と相性が悪いことが分かっている(Bug 5124)。

もっとも、ここまではブラウザとしてのFirefox自体の問題でWebページのコンテンツ作者には何の非も無い話だが、次のoutlineの話はコンテンツ作者も気をつけなくてはいけない(フォーカスを示す反転した点線の矩形はoutline: 1px dotted invert;で実現されている)。

現状ではoutlineプロパティからinvert値のサポートをドロップするように話が進んでいる(Bug 5127)。invert値をサポートしない場合の規定がCSS2.1には存在していないが、CSS3では次のように規定されており、これに従う形で修正を行っている。

Conformant UAs may ignore the 'invert' value on platforms that do not support color inversion of the pixels on the screen. If the UA does not support the 'invert' value then the initial value of the 'outline-color' property is the 'currentColor' [CSS3COLOR] keyword.

currentColor値とはCSS3で定義された色で、その要素の前景色を示す。つまり、outline-colorの初期値のinvertは前景色が用いられることになり、invert値を含むスタイルシートのoutlineもしくはoutline-colorプロパティは無視されることになる。

つまり、outlineを指定していないリンクがフォーカスを受け取ると、Gecko1.9では前景色の点線で矩形が表示されるようになっている。もちろん、これはほとんどのテキストリンクでは今まで通り、無指定のままで問題は無い。(背景色と同じ前景色の隠しリンクを探しにくくなったというユーザ問題はあるが。)

問題は画像のリンクである。画像のリンクに対しても前景色をきちんと指定するのはアクセシビリティの点からは必須事項だが、実際にそこまで実践しているサイトは少ないのではないかと思う。これを徹底して、画像が表示されない時の代替テキストも、しっかりと背景色とのコントラストを確保しておかなくては、Gecko1.9上ではとても不便なサイトになってしまう。なぜなら、フォーカスがどこにあるのか分からなくなってしまうからだ。これはマウス等のポインタによるナビゲーションではあまり問題にならないかもしれないが(使っている感じでは気持ち悪いが、慣れの問題かもしれない)、キーボードでアクセスしている人にとっては致命的な問題である。

キーボードで操作する人なんて少ないだろうから、知らんという人も居るかもしれないので、書いておくが、常にマウスが使える環境とは限らないノートPCからのアクセスではキーボードナビゲーションは重要である。決して極々マイナーなユーザの話では無いことに注意して欲しい。(流行のblogのレイアウトで、本文以前に大量のリンクの上をフォーカス移動しなくてはいけないサイトが大量にあることから、この問題はおそらく真剣に考えている人が少ないかと思う。)

また、outlineを直接指定して、対応するという方法もあるが、これではアクセシビリティに問題を抱えたままである可能性があるのでお勧めできない。Webサイトを作成している人はこれを機に、是非画像を無効にした状態での表示を確認しておいて欲しい。また、単純に画像をオフにすると、背景画像も消えてしまうので、背景画像と、背景色が大きく異なっている場合(もともとこのような状況は、かなり好ましくない状況であるが)には、実際にGecko1.9でのテストが必要になるだろう。

それから、この問題自体は、Geckoのアクセシビリティに関する大問題なので、アクセシビリティの担当が別の良い方法が無いものか検討している段階でもある。最終的にどうなるかはまだ流動的であることにも注意しておいて欲しい。

関連するかもしれないエントリ

関連するかもしれないエントリを発見できませんでしたが、無いとは限りません。

このエントリへのリンク元