メモログ

⛰ 塵が積もって山とならないメモのログ 👄

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点くらいにしかまだ至りませんが、それはまたそのうち。