Home > Webアクセシビリティ > WebInspector5.02の文字コードとCSSの問題

WebInspector5.02の文字コードとCSSの問題

WebInspector5.02で、正しくない警告が多かったのでなんとかならないかと文字コードやCSSの読み込み方法を変更して、10種類の環境で検証しました。

wi502.gif

先日リニューアルされたデジパオフィシャルサイトを、ちょっと編集して仮アップしてWebInspector(JIS X 8341-3 推奨)で検証しました。
検証にアップしたファイルはもう削除してしまいましたが検証結果のhtmlファイルはこの後に書かれている表にリンクさせてあります。
表には、検出した警告(問題点)の数を比較しています。

「@importを使わずに~」というのはlink rel="stylesheet"で普通に外部ファイルをリンクさせる方法の事です。
7個読み込ませるのと1個読み込ませるのがあるのは、7個に分けられていたCSSを1つのファイルまとめてみたことで変化があるか調べてみたかったからです。

(5.1が公開中止になったばかりなので、5.1が再公開されてから検証したほうがよかったかも…?)

utf-8shift-jis
外部ファイルのimport.cssが、@importで7個のCSSファイルを読み込む7914
外部ファイルのimport.cssが、@importで1個のCSSファイルを読み込む1614
@importを使わずに7個のCSSファイルを外部ファイルで読み込む7914
@importを使わずに1個のCSSファイルを外部ファイルで読み込む2214
ヘッダーにCSSを丸ごと貼り付け1911

この結果から見て分かるように、文字コードがUTFだと正常に動作しないようですね。
WebInspectorの文字コードについてはかなり随分前から認知されている問題だったので、検証する必要は無かったのかもしれませんが、公式にも書いてほしい重要な項目ですね。
@importに問題がありそうと予想していましたが、見事に外れて複数ファイルを読み込むと問題が増えます。ただこれも文字コードが解決されていれば問題では無くなりそうです。

これの為に文字コードを変更するわけにもいかないので、検証するときだけCSSファイルを全部まとめさえすれば目視で検証できるレベルにはなります…ちょっと微妙ですが。

もちろんこのツールは、全てのアクセシビリティの確認すべき項目のほんの一部しか確認できませんが、業界の流れを掴む重要なツールだと思っているので、とても期待しています。

このエントリーもWebアクセシビリティ初心者Wikiにまとめてあります。一行に。

「文字コードUTF-8に対応していない、不必要な警告(問題点)を検出してしまいます。」

Home > Webアクセシビリティ > WebInspector5.02の文字コードとCSSの問題

Search
Feeds

Page Top