agenda 2002-10(下旬) 別名「どこか」

CSSと文書構造

公開
2002年10月26日

「内容とデザインの分離は難しい」と言っていたアンチがいたが、それもそのはず、CSSは構造と見栄えを分離するが、内容と構造は分離しない。従って、良いCSSは良い文書構造がなければ作れない。

ナビゲーション主体のstreotypeな構造をしているサイトは、やはりそれなりのstreotypeなCSSを作ることになる。その平均的な例が(日々のネタ仕入れ元の一つ)scottandrew.com (英語)だ。今日10月26日の記事Better CSS than mine (英語)にて挙げられているサイトのほとんどが、Interaction Design Patterns (英語)におけるRepeated Menu (英語)を採用している。このRepeated Menu (英語)は、サイト内のどの文書にも同じように配置され、視覚デザインにも大きく影響するのが特徴。

多くのアクセシビリティサイトは、「ナビゲーションを飛ばすリンクを設けろ」という。しかしそれ以前に、「何故飛ばさなければならないのか」を何故、考えないのか。毎度毎度、カレンダーやらナビゲーションを読み込まなければならないのに、滅多にそれらは利用されない。

  • 「いや、利用する人もいるんだ」
  • 「いや、利用されないに決まっている」

こういった個人差に影響される問題に摩り替えられがちだが、これはユーザビリティの問題ではなく、文書構造の問題であり、リンクの問題である。

まず、最上位見出し以前に登場する要素は、これはメタ要素である。文書内容と直接関係ないからこそh1要素よりも前に搭乗させる必要があるのだろう。しかし、Repeated Menu (英語)は多くの場合、文書構造よりも視覚デザインを優先させて最も目立つタイトル(通常これは最上位見出しとして認識される)よりに登場する。まずこれが問題だ。次に、これは仕方がないのだが、そういったナビゲーションをlink要素のようなメタ要素以外のものとして明示するのは妥当ではないはずだから、常に、後方互換としてやっていることだと認識している必要がある。これは文書構造上の問題だ。

次にリンクについての問題がある。「その文書内容と関係の深いものにリンクするのが妥当だ」といったところで理解されないだろうからbenefitの話になるが、何故広告が嫌われるかを考えてみると良く分かる筈だ。広告のリンクが嫌われ全く利用されないのは、文書との関係性がゼロに近いからだ。閲覧者の興味の対象はその文書内容であり、その文書内容と何らかの関係があるからこそ、リンクにも興味が移り得る。つまり関係性が薄いものほど、ユーザーにとって価値の低いリンクである。ユーザーというのは個人差があり、時間とともに特徴は変化するから、私はユーザーを主体に考えるのは止め、文書を主体に考えることにした。しかし、文書を主体に考えて文書の価値を高めるように配慮することは、間違いなくユーザーの利益につながり、私自身の利益にもつながる。

さて、アクセシビリティ的には、ナビゲーションの類はページ最下部に配置し「ナビゲーションにジャンプ」というリンクを上のほうに設けるのが良いと言われている。このとき、正しい文書構造を保とうとすると、実に奇妙なことをしなければならなくなる。良い例は、アクセシビリティ専門家のサイト「dive into mark」のアクセシビリティに関する記述のページ (英語)だ。スタイルシートをオフにすると分かりやすいが、h1要素がサイト名になっている。実はどのページを見ても、h1要素(最上位見出し)はサイト名「dive into mark」である。これは必然的にそうしなければならないのであり、もしh1要素が「accessibility statement」であったなら、ナビゲーション用の見出しの登場によって文書構造がおかしくなる。とはいえ、h1要素を全てサイト名にすることは間違っているとは言い切れない。ユーザー主体の態度を貫きつつ文書構造の体裁を保っているという意味で、少なくとも矛盾は無い。しかし私は良い文書構造だとは思わない。文書内容を要約するに、サイト名では抽象的過ぎるからだ。

しかし、見た目には明らかに最上位見出しであるにもかかわらず、「本物の」最上位見出し(つまりh1要素)ではないサイトも多くある。その文書の中で何よりも目立っているものは「サイトロゴ」だが、h1要素としてマークアップされていない。文書構造上の役割を視覚的に明らかにできるのがCSSであり、それを放棄したCSSは、私は良いCSSだとは思わない。プレゼンテーション(CSS)が文書構造に「嘘」をついているからだ。

電球交換ジョーク:サイト制作者版

公開
2002年10月23日

「How many (職種/人種) does it take to screw in a light bulb?」という定番ジョークのサイト制作者版。www.joek.com: blah: 2002.10 (英語)の2002.10.22の記事を訳させて頂きました。

Q. 電球交換に要するウェブデザイナの数は?
A. たった一人で十分でしょう。とはいえ彼(彼女)は、ドメイン「changinglightbulbs.info(電球交換.info)」を登録し、次回からは空港での待ち時間の間でもPDA経由で電球を付け替えられるよう、サーバーサイドスクリプトを調整し、電球交換の体験談をウェブ日記に記録し、そのサイトが現在のウェブ標準に準拠しているかどうか、また全てのメジャーな(マイナーな)ブラウザで表示されるかどうかを確認し、そしてそのサイトを大手検索エンジンに登録しなければなりません。

そして私も考えてみた。

Q. 電球交換に要するW3C信者の数は?
A. 五人要ります。二人が梯子を支え、一人が電球を交換しようとするものの、残ったうちの一人がポケットから電球メーカー謹製の説明書を取り出して正しい電球の交換方法を指図し始めます。四人が説明書の解釈について言い争っている最中に、やることのない最後の一人が黙々と電球を交換します。
Q. 電球交換に要するアンチW3C信者の数は?
A. 一人です。但し交換用の電球を予め用意しておく必要があります。さもなくば蛍光灯でも蝋燭でも、とりあえず部屋に明りがともればそれで良しとされてしまうでしょう。「どうやって明るくしようが自由じゃないか!」と開き直られるので注意が必要です。

その他:神戸大の学生による経済学者版の紹介

追記など

www.joek.com (英語)氏に訳した旨メールしたのにURLを間違ってしまい余計な手間をかけさせてしまった。私は日本人臭さを出さないように出来る限り「please」と「sorry」を使わないようにしているのだけど(典型的日本人と思われるのが死ぬほど嫌)、「(URLを)見つけてくれて有難う。私も探していたんです。」とか何とか寒い冗談を最後に書いてしまった。

Which HTML tag are you?

公開
2002年10月20日

Which HTML tag are you? (英語)

そして私は……

Congratulations, you are FONT

がっかりした。

追記など

「HREFタグ」はご愛嬌ということで。ネタですし。

そして「Which DOCTYPE are you?」をこっそり製作中。ネタにかこつけて嫌みったらしさ全開の方向で。大嫌いな「サーバーサイドスクリプト」を使うのです。

色々なメモ

公開
2002年10月19日
User Agent sniffing
「User Agent 嗅ぎ分け」。要するにブラウザ判別のことらしい。

Mozilla 1.2 beta (英語)を導入。Alt + Dでアドレスバーにフォーカス可能になっていた。前からだろうか。もう一つ。

Type Ahead Find (英語)
文字をタイプするだけで即アンカーにフォーカス。ステータスバーに検索語句が表示される。日本語も可能。文字を入力する前に/を打てば、リンク以外にもフォーカス。