「サイト名 > archive > 2002年 > 五月の日記」。このようなパン屑ナビゲーションは、一説によるとdiv要素であり、あるいはul、li要素であると言われており、「p要素派」は宗教家扱いされています。しかしながら、整形結果やメディアを意識することなく、制作された文書ありのままをハイパーテキストとしてマークアップするという立場からすれば、そもそも「パン屑ナビゲーション」なる物自体、登場する余地の無いものです。
製作者は、パン屑ナビゲーションで一体何を伝えようとしているのでしょうか。多くの場合、サイト内におけるその文書の位置付けを示そうとしていると考えられます。つまりこうです。
あるいは：
このような文（センテンス）を「media="screen"」向けに表現したものが「パン屑ナビゲーション」であると考えるわけです。だとすれば、その表現とやらにはCSSが推奨されるべきであり、当然この文自体はp要素としてマークアップされるべきということになります。
パン屑ナビゲーションは、例えば「media="aural"」向けには意味不明で、ほとんど使い物になりません。
HTMLソースは例えばこのようになります。
これをそのまま「パン屑ナビゲーション」として整形するには、CSS2は非力です。非表示になる部分等をspan要素として明示しなければなりません。
CSS2の欠点は、セレクタを、ノードではなく要素としてしか指定できない事でしょうか。拡張の難しい独特の構文を用いているのも欠点かもしれません。仮にセレクタをXPathのロケーションパスで指定できたなら、この文をパン屑ナビゲーションに整形する事は容易でした。
さて、CSS2の欠点といえばもう一つ挙げられます。画像オブジェクトとテキストを置換する方法が無いことです。このような目的を達成するために、製作者はimg要素を用いなければなりません。
前述の例におけるspan要素を、img要素に置き換えてみます。
某N社がでっち上げたこのimg要素の醜悪な性質により、このマークアップは残念ながら妥当ではありません。次のように修正しなければなりません。
テキストはalt属性に移し、img要素自体は空要素になりました。お粗末。
それぞれのimg要素のsrc属性に、矢印アイコンのURIを示せば完成です。最後のimg要素は、「現在地」というアイコンにします。但し、透過処理をしてしまうとCSSの変更などに制約を加える事になります。このような用途にimg要素を用いるのはあまり良い方法では無いのかもしれません。
パン屑ナビゲーション等の「オブジェクト」は、可能ならばまずその目的をストレートに文章で表現し、その整形をCSS等に任せるならば、「はじめにテキストありき」のハイパーテキスト文書に融和させることが可能です。そしてそのようなアプローチが結果としてアクセシビリティの向上につながる事もあり得ます。
このような一見まわりくどいことをする目的は、アクセシビリティを向上させる事ではなく、「文書そのものを如何に自然に（あるいは必然性を持ったハイパーテキストとしてマークアップするか」を追求する事です。そのアプローチが多くを改善する事を私は知っています。