- 2007-10-11 (木)
- Webアクセシビリティ
WebInspector5.02で、正しくない警告が多かったのでなんとかならないかと文字コードやCSSの読み込み方法を変更して、10種類の環境で検証しました。

先日リニューアルされたデジパオフィシャルサイトを、ちょっと編集して仮アップしてWebInspector(JIS X 8341-3 推奨)で検証しました。
検証にアップしたファイルはもう削除してしまいましたが検証結果のhtmlファイルはこの後に書かれている表にリンクさせてあります。
表には、検出した警告(問題点)の数を比較しています。
「@importを使わずに~」というのはlink rel="stylesheet"で普通に外部ファイルをリンクさせる方法の事です。
7個読み込ませるのと1個読み込ませるのがあるのは、7個に分けられていたCSSを1つのファイルまとめてみたことで変化があるか調べてみたかったからです。
(5.1が公開中止になったばかりなので、5.1が再公開されてから検証したほうがよかったかも…?)
| utf-8 | shift-jis | |
| 外部ファイルのimport.cssが、@importで7個のCSSファイルを読み込む | 79 | 14 |
| 外部ファイルのimport.cssが、@importで1個のCSSファイルを読み込む | 16 | 14 |
| @importを使わずに7個のCSSファイルを外部ファイルで読み込む | 79 | 14 |
| @importを使わずに1個のCSSファイルを外部ファイルで読み込む | 22 | 14 |
| ヘッダーにCSSを丸ごと貼り付け | 19 | 11 |
この結果から見て分かるように、文字コードがUTFだと正常に動作しないようですね。
WebInspectorの文字コードについてはかなり随分前から認知されている問題だったので、検証する必要は無かったのかもしれませんが、公式にも書いてほしい重要な項目ですね。
@importに問題がありそうと予想していましたが、見事に外れて複数ファイルを読み込むと問題が増えます。ただこれも文字コードが解決されていれば問題では無くなりそうです。
これの為に文字コードを変更するわけにもいかないので、検証するときだけCSSファイルを全部まとめさえすれば目視で検証できるレベルにはなります…ちょっと微妙ですが。
もちろんこのツールは、全てのアクセシビリティの確認すべき項目のほんの一部しか確認できませんが、業界の流れを掴む重要なツールだと思っているので、とても期待しています。
このエントリーもWebアクセシビリティ初心者Wikiにまとめてあります。一行に。
「文字コードUTF-8に対応していない、不必要な警告(問題点)を検出してしまいます。」
- Newer: Adsense Mobile
- Older: WGAで正規版チェックをしなくてもIE7がインストール可能に[追記]