CSS実装徹底検証! そこが知りたいInternet Explorer 7
使用するサンプルソースはXHTML1.0 Strictで記述し、基本的にStandard(標準準拠)モードで表示する。IE7 beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。また、特に断りのない限り、「Internet Explorer」は「IE」、「Internet Explorer 6」は「IE6」、「Internet Explorer 7 beta2」は「IE7 beta2」と略している。
かなり詳細までInternet Explorer 7に於けるCSS実装を検証している記事だ。
やはりInternet Explorer 7でもapplication/xhtml+xmlをサポートしないのだろうか。
いつになったら正式にXHTML 1.1を利用できるのか？CSS以前の問題では...
ホームページ制作マッチング：MovableType構築事例集
さぶみっと！ＪＡＰＡＮでは！ブログツールの先駆者Movable Typeを使ったサイトの構築事例を紹介中！制作マッチングに登録している制作者のかたならどなたでも応募できます。応募のあったなかから、面白い、あるいは優れた事例は随時紹介していく予定です。
他の構築例はMovableTypeの良いことばかり書いてあったので、こんなことを書いた。
Movable TypeではXHTML 1.0 Strictなコードを生成することが出来ないので、テキストエディタにてStrictなエントリーを作成して、エントリーを行う。(例えばblockquote・cite等)
制作会社の「XHTMLの知識が無くても、ワープロ感覚でサイトが作れます!」等と言ういい加減な宣伝文句に踊らされているようです。StrictやValidなサイトを作ろうと思うと、意外と手が掛かるのです。
昨日に引き続き、MovableType 3.3用のXHTML 1.0 Strictテンプレートを作成してみた。
MovableType 3.3 Base Strict テンプレートベータ
もちろんStyleCatcherも利用可能です。
MovableType 3.3ベータ用の Base Web標準テンプレートを作ってみました。
StyleCatcherが使えるように、前回のMovableType 3.2 Base Web標準テンプレートと同様の仕様となっていますが、MovableType 3.2 Base Web標準テンプレートでは無視していたエントリーアーカイブテンプレートにおけるコメントフォームにvalueを指定しました。
XHTML 1.0 Strictのテンプレートも作成の予定です。
現在はMovableType 3.3がベータの状態ですのでテンプレートの公開・配布が出来ません。MovableType 3.3が公開される2006年6月27日までお待ちください。
overflow:hidden は、使用しないことが望ましい。文字サイズを大きく設定した場合、一部の文字が表示されなくなる場合がある。
一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:noneを指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。
方向性がまったく違うようですがWCAGでも薦めているこの手法がWebInspector 5.0ではエラーとなります。
ラベルはブラウザに表示されてもまったく問題はないのでは...
WebInspector 5.0は「画面で確認」機能を実現し、修正すべき箇所をビジュアルに確認することが可能になりました。従来は、HTMLのソースを参照し、行番号から問題のある部分を特定しなければなりませんでしたが、WebInspector 5.0では、「画面で確認」機能により、より簡単に、修正すべき箇所を特定できるようになっています。
ためしに/を検証してみた結果は以下の通りです。
Fujitsu WebInspector 5.0チェック結果
どこが変わったのか...
他のサイトで調べてみます。
富士通は、Webサイトのアクセシビリティをチェックするためのツールを強化した。5月18日から、同社のWebサイト（http://design.fujitsu.com/jp/universal/assistance/）で公開し、無償提供する。
5.0では、チェック可能な項目を旧版（4.0）の68個から89個に増やした。例えば、音声読み上げソフトが正しく機能するように、「東 京 都」のように一つの単語にスペースや改行を入れていないかがチェックできる。また、問題点の表示方式を改良し、一覧画面で選んだ問題点が画面上のどこにあるかを赤枠で示すようにした。
WebInspector Version 2.0を初めて使った時は一晩どうしたら改善できるかと悩んだのですが、WebInspector Version 2.0自体のチェックが甘く、アクセシビリティを理解するうちに問題なく対応できるようになった。
今度のWebInspector Version 5.0は、どの程度厳しくチェックしてくれるのか楽しみです。
先日、TinyMCE Plugin for Movable Type Ver1.00 Jaの開発プロジェクトサイトを構築されるとの事で有限会社ITプロフェッショナルの蒲生（Dakiny）さんと電話の最中、address要素の話となった。
address要素は問合せ先等の情報を示す際に用る。制作者の情報を記述する際にも良く用いられ、作成日、更新日、メールアドレス等記述する。address要素はブロックレベル要素で中身はインライン要素に限られる。
上記程度の知識なので、うまく説明できなかった。気になる...
Web標準の教科書
これまでのWebページ制作においても、かなり限定的ではあるがメタデータが利用されてきた。たとえば（X）HTMLのmeta要素（p.48）でその文書のキーワード、制作者などを示す、link要素（p.53）で他の文書との関係を示す、address要素（p.59）で作成者情報を示す、xml:lang属性で自然言語を示すといったことは、まさにその文書に関するメタデータの記述例である。
こんなに近くに答えがあった。
SEO-Equationさんのユニバーサル（普遍の）SEO を目指すを読んで初めて知ったのですが、MSNサーチには以下のような推奨事項があります。
整形式の HTML コードのみを使用してページを作成します。すべてのタグに終了タグが存在すること、およびすべてのリンクが正常に動作することを確認します。リンク先のないリンクがサイトに含まれている場合、MSNBot がそのサイトに関するインデックスを効率的に作成できないことがあります。また、ユーザーがサイトに含まれる一部のページを見ることができないことがあります。
Japan internet.com：整形式の HTML -- 1
テキストであれ子要素であれ、コンテンツのあるに要素は必ず開始タグと終了タグがなければならない。 HTML は、必ずしもそうでない場合もある。例えば、<P>、<DT>、<DD>、<LI>は、単独で使われる場合が多い。しかし、これはブラウザの種類によりけりで、要素がどこで終了するのかを正しく推測してくれればの話だ。ブラウザはいつも著者が考える通りに推測してくれる訳ではない。よって、開始タグは必ず終了タグで閉じたほうが賢明である。
XHTMLでは終了タグは必須。
最強のSEO...
先日、知り合いのSOHOから「新しいサイトを作ったのでW3C HTML 4.01 Validのバナーをはりたい。手を加えて欲しい。」とメールがあった。Dreamweaverで制作したテーブルレイアウトのサイトだった。ちょっと修正すればW3C 4.01 Validをもらうことは簡単に出来るけれども、文書構造としては一切成り立っていない。
当然、テーブルレイアウトの問題も絡んでくる。XHTML+CSSだがテーブルレイアウトを採用しているケース、つまり「ハイブリッドレイアウト」も書式上のエラーではなく使い方のエラーである。決められたボキャブラリと書式を守っていても、使い方が間違っていることになる。
「簡単だから自分でやりなさい」と・・・
正しくないものに手を貸すことは出来ません。
無料テンプレート配布ページでコードの表示をtextarea要素のreadonly属性を利用してマークアップしていた。コピーする際に簡単なのでtextarea要素を使用していたのだが、最近になって気なり始めた。やはりpre・codeでマークアップしなければ構造上間違いである。
ところが、私はCSSを書く際に水平タブ文字を空白文字としている部分がかなりあり、このままではpre要素に変更が出来ない。
9.3.4 Preformatted text: The PRE element
The horizontal tab character
The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.
400個程ある全ての水平タブ文字をスペースに書き換えた。
（有）ITプロフェッショナルさんのTinyMCE Plugin for Movable Type Ja プラグインを入れてみた。
ボタンがたくさん付いて、エントリー画面がこんなに賑やか！
WYSIWYGエディタはWindows98時代のIE5.5のおまけソフトFrontPage Express位しか弄った事が無いので、「どうか？」と聞かれてみても・・・ うんうん、確かに、ボタンだけで簡単に編集できる。
Wordと同じような感覚で編集が出来そうです。「字下げ」はblockquoteなのか・・・どうしてもソースを見ないと気がすまない性格は、しょうがないですね。
ミツエーリンクス【Web標準Blog ： リデザインの失敗】に面白いことが書いてあった。
10代の若者が趣味で作るBlog（「Web logs」の省略形）が、真新しいWebサイトよりも優れたコードで書かれているとしたら、誰かが過ちを犯しています。そして、その誰かというのはあなた方、開発者です。真っ当な会社なら、あなたはクビにされているでしょう。オーウェル風の社会に例えるなら、あなたは「再教育キャンプ」に送られるのです。そのどちらも望まないのなら、本を読み、少なくとも笑い種にされない程度のレベルにまでスキルを高める必要があります。
ミツエーリンクス【Web標準Blog ： リデザインの失敗】に面白いことが書いてあった。
私としては、もし今度あなたが「Web 2.0」を自称するサイトを調べる機会があれば、ボンネットを開き、ソースを見て、そのなかにWeb 1.0時代のサイトがつけていたような口紅が残っていないかチェックして欲しいと思います。そして、結果を運営側に伝えるのです......もちろん、あなたの Blog上で。
ミツエーリンクス【Web標準Blog ： リデザインの失敗】に面白いことが書いてあった。
仕事柄、他の制作会社のサイトや制作実績のサイトを見に行きます。
当然、ソースを見て必ずAnother HTML-lint gatewayで検証しますが、かなり多くのサイトが未だテーブルでレイアウトされており、文字サイズもpxで指定されています。
（他のブログでは多少指摘するとこともありましたが、このBlogで一切エントリーしていません。）
制作会社よりも、個人でBlogを利用する方のほうがWeb標準への意識が高い。Web標準は個人ブログのユーザーから！
昨日、ちょっとした事（後日お知らせできるかもしれません）があって、NucleusやXHTML・php・XMLなどいろいろと参考にさせていただいているウェブ アルチザン ブログさんを再読した。
JS:XHTMLでValidなformのid属性の値をJavaScriptで取得する:getElementById
id属性にした場合、上記のJavaScriptではスクリプトエラーとなります。
この場合は、getElementByIdで取得します。
document.getElementById("Test").usercd.value
@Styleの簡易見積もりのJavaScriptを編集して・・・
function calc_total(){
total = 20000;
for (i=0; i<document.getElementById("mitumori").length-1; i++){
if (document.getElementById("mitumori").elements[i].checked){
total += eval(document.getElementById("mitumori").elements[i].value);
}
}
document.getElementById("mitumori").goukei.value ="おおよそ"+total+"円";
}
実は簡易見積もりのページは今までTransitionalだったのですが、おかげさまですべてのページがValid XHTML 1.0 Strict！
あなたのWebサイトの CMS の作成者に、適宜、問題を修正するように依頼して下さい。
Log検証ツールは、URIのリストを受け取り、あなたがテスト開始時にロードするように選択したモジュールに沿って、分析を行います。 (この作業はあなたの技術チームの作業になると思います。技術チームの人たちと、あなたのサイト用の設定について検討して下さい。) Log検証ツールは、各々のURIに対して一連のテストを実施し、その結果を返します。
この最初の分析によって、あなたのWebサイトの健康状態についての概要を知ることができます。これにより、必要な作業を整理して、エラーのあるページを修正するための戦略を練ることができます。もしかしたら、膨大な数のページが、あなたの設定した基準に適合していないかも知れません。例えば、あなたのWebサイトの全てのページが、不適切なHTML(またはXHTML)かも知れません。でも、心配する必要はありません。― これは、実はよい結果なのです。何故って？それはもし、あなたのWebサイトの作成に、特定のテンプレートエンジンまたはコンテンツ管理システムが使用されているのであれば、この結果は、そのテンプレートに誤りがあることを示しているからです。
この場合には、問題は簡単に解決することができます。単に、あなたのテンプレートを修正し、再度、全てのテストを実行すればよいのです。その結果、エラーは非常に少なくなるか、むしろ多分、全てのエラーをなくすことができるでしょう。もしあなたが、テンプレートエンジンの開発者でないのであれば、その開発者、もしくはあなたのWebサイトの CMS の作成者に、適宜、問題を修正するように依頼して下さい。
The Web KANZAKI -- Japan, music and computer
この使い分けについては、従来から発音に基づく（acronymはひとつの単語として発音されるもの、abbrは1語ずつ別々のもの）とか、頭文字によるものがacronymで略語一般がabbrなど、いろいろな説が唱えられてきました。定義の背景はさておき、これをいちいち区別して使い分けるというのはたいして有益なこととは思えません。
実際のところ、利用者にとってはWWWがacronymかabbrかということは本質的な問題ではなく、そのフルスペルがWorld Wide Webであることが伝わればよいわけです。迷うようなら、より一般的な範疇であるabbr要素としてマークアップしておくのがよいでしょう（XHTML 2.0の2002年12月草案では、acronym要素は削除されてしまいました）。いずれにしても、これらの要素を理解しないブラウザもあるので、重要な語句には（）で説明を加えるなどの手段も併用する必要があります。要は、利用者に親切なページづくりをしようということです。
Win版IE5/6はacronym要素のみ対応しており、abbr要素には反応しません。（Mozilla、Opera、Mac版IE5およびiCabは両方OKです。）
現在のところ@Styleでは abbr要素からacronym要素への変換スクリプトを使用してIEに対応しています。しかし、（）などで明記したほうがGUI利用者、またスクリーンリーダー利用者にとっても便利ではないでしょうか。
ナビゲーションとスペーサー画像にトラックバックをいただきました。
『透明spacer.gifをアンカーに』は、使用方法を間違えると問題ありのようです。
有限会社ユニバーサルワークスさんのコラムが紹介されていた。こちらのサイトは、以前、別のBlogでも紹介している。
第29回 自治体サイトWebアクセシビリティ調査2005を終えて（上）（2005年9月1日掲載）では、さすが清家さんと思うところがある。
もうひとつ、特殊な発展形としては、上記の読み飛ばしリンクが透明gifであることに有頂天になった制作者が、この小手先のテクニックを駆使して、トップページ全体に不可視のナビゲーションを付けまくるタイプがある。うっとうしさ満点。それやるなら、先に見出しの要素を付けとけよと言いたい。
見出しやリストなどの適切な文書構造があってこそアクセシビリティです。
ひとつ勘違いしていたのは･･･
私：ページの一番上（読み上げの最初）に置くのはやめてね。
制作：どうして？
私：ページに入ってすぐエンターキーを押せというのは酷ではないか！やってみな。
制作：なるほど。
私：いちいちシフト＋Tabで戻らないといけないわけよ、もううんざり。タイトルタグの直後は聴き逃しやすいし、そうそう、音声ブラウザのデフォルトではタイトルタグはそのページに入ったとき1回しか読み上げないから、ページの一番上にはもう1回ページ見出しを書いておいてもらえるとうれしいね。
h1の後にスキップを設置しました。それでは、h1には何が適切なのでしょうか。<h1>要素の扱い | Web標準Blogで質問が掲載されていました。
構造的にマークアップを進めていく場合、<h1>で括るのにふさわしいものとして「a.サイト共通のタイトルや企業名称」と「b.そのページのユニークなタイトル」のうち、どちらがより適切でしょうか。
ところで、MovableTypeのh1はデフォルトではサイトのタイトルとなっています。（このBlogもphpによりincludeしていますのでサイトのタイトルです。）改善の必要がありそうですね。
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の多用を避け、シンプルに！
一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:none を指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。
一般的な音声ブラウザだと思われているホームページ・リーダー3.01はdisplay:noneを全く読み上げないので、ラベルの存在がわからない。（3.04は未確認）
そうなると読み飛ばしリンクにも使用できない。position: absoluteが現実的な手段のようです。
先日のエントリー【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>
このように何も意味を持たない画像に高い意味を持つ代替（等価）テキストを付加すとことが必要です。
勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。