メモログ

HTML LINTから学んだHTMLとアクセシビリティ

CSS と HTML を変更したついでに、WEB Developer(FireFox の拡張機能)の Tools から HTML LINT を実行してみました。結果はみごとにマイナス点。減点の嵐。なかなか手厳しいです。

多くの減点箇所のうち、次の 3 点が今回の注目点でした。

css や javascript に関する meta タグがない

HTML 内で css や javascript を利用している場合は、meta に content-type を追加しないといけないというのは、初めて知りました。もともとそうでしたっけ?

p タグの中に ul、ol、blockquote が入っている

段落や引用文の構造的な大小関係は言われてみると納得。段落とリストの関係は、要素として並列の関係にあると言われると確かにそのような気もしますが、段落の中にリストがあっても良いような気もしないでもないです。

同じ文字列に異なるリンクが貼られている

HTML LINT ではアクセス指針技術文書に基づいたチェックもしてくれます。便利ですね。たとえば「permalink」など同じ文字列に異なるリンクが貼られているのは、アクセシビリティの観点からは NG なのだそうです。対応策として Title 属性に注釈を加えるというガイドラインがあったので、Title 属性にエントリーのタイトル(MTEntryTitle)を加えました。


そんなこんなで修正に修正を重ね、とりあえずメインページだけは HTML LINT で 100 点となるようにがんばりました。おめでとう。ぱちぱちぱち。個別アーカイブは FORM 関連の構造が NG で 50 点くらいにしかまだ至りませんが、それはまたそのうち。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。