読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

『プロ恥』シリーズ中、最も質の低い記事

books

プロとして恥ずかしくないスタイルシートの大原則

『プロとして恥ずかしくないスタイルシートの大原則』は非常にたくさんの人が執筆している。
どの記事が一番良いかを言うことは難しい。どの記事もそれなりにinformativeであるからである。

プロとして恥ずかしくないスタイルシートの大原則

しかし、最も質の低い記事を指摘するの簡単である。それは佐藤好彦氏のコラム「HTML(XHTML)+CSSは現実を表現できるか」(pp.100-101)である。タイトルからして何か不穏な雰囲気が漂っている(こういうのを「香ばしい」というのだろうか)。

これからのウェブ制作にとって、CSSは欠かせないものになる。しかし、それが「技術のための技術」ではなく、「人がつくり、人が読むためのページ」であるということを忘れずにいたい。(p.101)

書き写していて恥ずかしくなるような陳腐な常套句である。

佐藤好彦氏が「人がつくり、人が読むためのページ」と書く時、この「人」の中に視覚障害者は除外されていることは、断定できる。そのように考えなければ、このコラムに一貫性が無くなるからである。そしておそらく、佐藤好彦氏が「HTML(XHTML)+CSSは現実を表現できるか」という(というまた陳腐で恥ずかしくなるような)タイトルをコラムに付けた時、彼の言う「現実」の中には視覚障害者は同様に排除されているのだろう。

仮に佐藤好彦氏が視覚障害者やアクセシビリティのことを考慮していたならば、このコラムに書かれた内容は全く異なる内容となっただろう。どういう点で佐藤好彦氏のコラムの質が悪いのかについて指摘できる部分はたくさんある。逐一指摘していたらコラム全文を引用してしまうことになるだろう。1箇所だけ指摘する。

ページの本文テキストの中に画像が挿入されているとする。画像は、図の内容や表示する順序によって、右寄せや左寄せに設定したい。本文のなかで「右の図のように」と指し示すこともあるだろう。・・・・img要素にclassを設定してCSSで回り込みを指定すると、画像の配置の情報はスタイルシートとセットでなければ機能しないことになる。(p.101)

「右の図のように」という空間にかかわる表現はよく目にするし、文中で使う人もいるだろう。そして、CSSでレイアウトを組んだとき、語句「右の図」が指している図(img要素)はhtml上ではこの表現を含むブロック(p要素か?)の上か下に位置づけられるので、CSSがオフになっている環境において「右の図のように」という表現は意味を成さなくなる。これはそのとおりだと思う。

この例を持ち出して佐藤好彦氏が引き出した結論は、htmlとCSSの分離には限界がある、というものである。どうしたらこんな結論が出てくるのだろうか。全く不思議である。

この例の場合、「右の図のように」語句を別の語句に置き換える。例えば指示されている図の名前(付いていないなら名前をつける)でその図を指示する。そうすれば、CSSがオフになっていても、文中から図を指示することはできる。つまりマークアップ側で修正を加えることで、解決する。つまり、この例はhtmlとCSSの分離には限界があるという主張を支持していない。

「右の図」という表現をはじめとする空間的位置関係を使った指示表現は「見られる」こと、視覚によってアクセスされることを前提にした表現である。そのため視覚障害者にとってはこの種の表現は情報へのアクセスに制限を加えるものとなる(「上」と「下」だけは使っても弊害はないだろう)。「右の図」といった表現は便利だがそれなしでは済ませられないような表現ではない。

佐藤好彦氏が持ち出した例は、情報(マークアップ)と表現(CSS)の分離が部分的であったと考えるのが適切である。この例は、htmlのタグからレイアウトにかかわる属性を除去して、外部cssファイルに一括管理する、というだけでは不十分であること、さらに改良の余地があることを示している。マークアップされる情報の組み立て方においても色々とできることがあるからである。それにhtmlは特定の感覚(視覚)以外の感覚でもアクセスできる情報の伝達手段である。

以上が、仮に佐藤好彦氏が視覚障害者やアクセシビリティのことを考慮していたならば、このコラムに書かれた内容は全く異なる内容となっただろうと僕が思った理由である。


佐藤好彦氏のサイト http://yoshihiko.com/

ウェブアクセシビリティ・ガイド http://www.amedia.co.jp/it/web/guide.htm