skip navigation [was Re: RSS]

中根です。

という訳で、 nap@xxxxxxxxxxxxxxxxx から引っ越してきました。

今回、 NAP関連のメーリング・リストのアーカイブ
http://lists.accessibility.org/
を生成しているプログラムの設定を変えて、ついでに CSSも変更して、 (まだ
まだやるべきことは多いのですが) 少しだけ、構造とプレゼンテーションの分
離を図ってみました。その一連の変更の中で、ナビゲーション・リンク周りを
結構いじりました。

これまでは、一番上に
<div class="skipnav">
として、本文の先頭へのリンクを置き、その後に、
<div class="navbar">
として、この中にいろいろなリンクを適当に並べていました。

で、今回の話はこの skip navigation の部分です。これまでは、 CSSの中で
div.skipnav {
display: none;
}
としていたのですが、これだと JAWSが読み飛ばしてくれるので、全然意味が
ありません。もちろん、 skip navigation のリンクを隠さない、という選択
肢もありますし、場合によってはそれが有効な場合もあります。しかし、ナビ
ゲーション・リンクが多くなってくると、視覚的なユーザにとって不必要なも
のは表示しない片が使いやすさにつながるのではないかとも考えて、結果とし
てなんとかこのリンクを表示しないようにしているわけです。

さて、それで今回はこの display: none; をやめて、font-size: 0; にしてみ
ました。すると、以下で梅垣さんがご指摘くださったように、 IE だと小さな
文字で表示されるのだそうです。とりあえずの策として、表示色と背景色を同
じにしてみましたが、なんだかしっくりこない解決策のような気がしています。

visibility: hidden というのもありますが、これも JAWSでは display: none
同様、 JAWSがこの要素の存在を無視してしまうようになるのでだめでした。

JIS X 8341-3 の中では、たしか透明 gifを使った手法が例として挙げられて
いると思いますが、これは明らかにマークアップで構造以上のものを記述して
いるような気がして私の中では考えられない選択肢です。 (現実的に考えてこ
れが唯一の選択肢となってしまうケースもあるとは思いますが。)

ということで、美しい解決策をご存知の方がいらっしゃればぜひ教えてくださ
い。

と同時に、とりあえずこのようなスクリーン・リーダーの振る舞いというのは、
実際に試行錯誤してみないと分からないことでもあると思うので、みなさんと
共有しておくことにしました。

中根雅文



On Tue, 20 Jul 2004 14:27:42 +0900,
Masafumi NAKANE <max@xxxxxxxxxxxxxxxxx> wrote:
> On Mon, 19 Jul 2004 11:31:34 +0900,
> UMEGAKI Masahiro <ume@xxxxxxxxxxxx> wrote:
[snip]
> > 私の環境が特殊なのかもしれませんが、IEだと、

> > div.skipnav {
> >   display: none;
> > }

> > が効かないで、[ナビゲーション・リンクをスキップ]が凄く小さな文字
> > で表示されます。Gecko（というかNetscape7.1)では表示されません。
> > li を div に変えると表示されなくなりました。

> なるほど…。
> このあたりは、ちょっと細かい話になるので、続きは web@xxxxxxxxxxxxxxxxx
> でやろうと思います。