IEBlogより：お使いのCSSハックを一掃してください | Web標準Blog

IEBlogは本日付で開発者に対し、IE7のStrict（厳格）モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけを掲載しました。
IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー（そしていくつかのドキュメントも？）は、あなたを助けるかもしれません。

久しぶりにcss-discussを見に行ってみると・・・

This hack is DEPRECATED and should not be used due to the imminent release of IE 7. See [the official IE blog] for details.
このハッキングを推奨しない、IE7の差し迫っているリリースのため使用するべきではありません。 詳細のための公式のIEブロッグを見てください。

ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。 XHTMLコードもdivの多用を避け、シンプルに！

先日、公開した【MovableType 3.2 Base Web標準テンプレート】の適用方法をダウンロードページに追加しました。基本的にバックアップを取り、ダウンロードしたテンプレートをFTPするだけでOKです。これにあわせてファイル名も変更しました。

このBlogにも記載しておきますので、よろしくお願いいたします。

テンプレートの適用方法

1. FTPクライアントで default_templatesディレクトリにある18のテンプレートのうち、 以下のテンプレートをダウンロードしバックアップを取る。
   • main_index.tmpl
   • master_archive_index.tmpl
   • category_archive.tmpl
   • datebased_archive.tmpl
   • individual_entry_archive.tmpl
2. search_templatesディレクトリのdefault.tmplをダウンロードしバックアップを取る。
3. 解凍済みのフォルダ内に以下のテンプレートをdefault_templatesディレクトリにアップする。
   • main_index.tmpl
   • master_archive_index.tmpl
   • category_archive.tmpl
   • datebased_archive.tmpl
   • individual_entry_archive.tmpl
4. ブラウザで管理画面にログインし、テンプレートの編集を選択する
5. メインページとアーカイブページのチェックボックスにチェック を入れ「その他の操作」 のドロップダウンメニューから「テンプレートを更新する」 を選択。 「Go」 ボタンをクリックする
6. 更新を確認し、戻る
7. アーカイブタブをクリックしエントリー・アーカイブ、カテゴリー・アーカイブ、日付アーカイブの全てのチェックボックスにチェックを入れ「テンプレートを更新する」を選択して 「Go」 ボタンをクリックする。
8. 更新を確認しサイトを再構築する
9. default.tmplをsearch_templatesディレクトリへFTPする

先日のエントリー【MovableTypeの小技（微技）】において、以下のようなご指摘をいただきました。

スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか？

ナビゲーション読み飛ばしリンクや適切な見出しが無い場合など、リンク及びアンカーとしてもよく使う手段です。

アクセシビリティの解説サイト Webアクセシビリティのポータルサイト『Infoaxia（インフォアクシア）』 でもナビゲーション読み飛ばしリンクとして使用されています。

<a href="#contents_start"><img src="/shared/images/spacer.gif" width="1" height="1" alt="メインメニューをとばして、このページの本文へ" class="skip_link" /></a><a id="menu" accesskey="1" name="menu"><img src="/shared/images/spacer.gif" width="1" height="1" alt="ここからメニューです。" class="navigation_menu" /></a>

このように何も意味を持たない画像に高い意味を持つ代替（等価）テキストを付加すとことが必要です。

勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。

先のエントリー【MovableTypeの小技（微技）】には、やはり不具合がありそうです。

音声ブラウザに対応しいても、追記のないエントリーに対して、【ここから続き】のスペーサー画像（0px）が挿入されます。本文を読み終わった後に【ここから続き】まで読み上げてしまいます。
とりあえず、Lynxにて表示させてみたのですが、本文の最後に表示されています。

音声ナビゲーションとして【ここから続き】を挿入したい場合には、MTEntryIfExtendedを利用し、追記のあるもののみに対して、【ここから続き】を挿入するようにするべきではないでしょうか。

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more"><img src="<MTCGIPath>images/spacer.gif" alt="ここから続き" width="0" height="0" /> <$MTEntryMore$> </div>
</MTEntryIfExtended>

MovableTypeをAnother HTML-lint gatewayで検証した場合、【<div> と </div> の間が空です。】や【<a> と </a> の間が空です。】と指摘されます。

MovableType 3.171の場合

<div id="a<$MTEntryID pad="1"$>more">
<$MTEntryMore$>
</div>

MovableType 3.2の場合

<div id="more" class="entry-more">
<$MTEntryMore$>
</div>

ここに0pxのスペーサー画像を挿入します。スペーサー画像はMovableTypeにはじめから用意されています。

MovableType 3.171の場合

<div id="a<$MTEntryID pad="1"$>more">
<img src="<MTCGIPath>images/spacer.gif" alt="ここから続き" width="0" height="0" />
<$MTEntryMore$>
</div>

MovableType 3.2の場合

<div id="more" class="entry-more">
<img src="<MTCGIPath>mt-static/images/spacer.gif" alt="ここから続き" width="0" height="0" />
<$MTEntryMore$>
</div>

これでAnother HTML-lint gatewayをごまかすことが出来ます。

spacer.gifは【トップへ戻る】等のナビゲーションアンカーにも使えますので重宝します。

【追記】

小夜鳴鳥様よりご指摘いただき、本Blogを以下の通り修正いたしました。

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more">
<$MTEntryMore$> </div>
</MTEntryIfExtended>

音声ブラウザなどの読み上げ対応を検証しました後、改めてご報告いたします。

不具合もありそうです。次のエントリー・【ここから続き】のスペーサー画像 もご参照ください。

関連するエントリー：ナビゲーションとスペーサー画像