#robot

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

IE float bug

• The IE Doubled Float-Margin Bug

IEにはいろいろなバグが存在するのは周知の事実ですが、その一つにfloatされた要素のmargin（またはpadding）を二重に計算してしまうというものがあるそうです。今回作成したCSSとHTMLではこのバグに直面したようです。

調べていくと、floatをかけている要素をdisplay:inlineにすれば回避できるようなのですが、どうもうまくいかない（人違いならず、バグ違いだったかも）。時間もないので、美しくないですがmain-navigationの下に<br clear="left;" />を追加しててきとうに回避しました。一番最後のリストタグに、style="clear:left;"と入れても良かったかもしれませんが、検証し直すほどのことでもない気がするので、そのまま。このまま。気の向くままに。

デザイン変更 (11/18)

そしてまた唐突ですが、デザインを変えてみました。画像一枚のシンプル設計。手抜きではないです。

特に言うことはありませんが、フィードをfeedburnerにしてみました。既存のフィードを読んでいる人は、特にリダイレクトの設定とか何もしてないのでそのままですが・・・

あと、気がついたらレンタルサーバーにFTPでアクセスできなくなっていました。むむむ。Movable Typeからはアップロードできるのですが・・・