XHTML/CSS・トップ | アクセシビリティのヒント・目次

●ナビゲーションスキップの作り方

 ナビゲーションスキップはブロックスキップとも呼ばれ、グローバルナビゲーションやナビゲーションバーとしてのサイドバーをスキップしてメインコンテンツへジャンプするとき、逆にメインコンテンツをスキップしてサイドバーへジャンプさせるためのリンクのことです。また、同じWebページの特定の位置から意図した場所へジャンプさせるときにも使われます。主に、視覚障害者などスクリーンリーダー・音声読み上げソフトをお使いのユーザー、あるいは、キーボート操作のみに頼る障害者のアクセシビリティ向上のために設置されます。幾つかの段組で構成されているWebサイトの場合、キーボード操作は少ないキースロークで目的地に到達すればそれだけユーザーの負担が少なくなりますし、各ページに移動するたびに共通の内容を読み上げられるとユーザーが疲れてしまいますので、こうして読み飛ばすこともできるリンクを設置するわけです。以下、具体的にソースを書いて実践的に説明します。

【CSS】↓

.shadow {
 position: absolute;
 left: -9999em;
}

【解説】↓

 positionプロパティは座標を指定して配置するためのプロパティで absoluteの値を指定することにより、top、bottom、left、rightの位置に絶対配置します。ここでは、“left: -9999em”と指定し、スクリーンリーダーをお使いの場合は読み上げられるものの、Webページ上には見えない位置に飛ばしています。

【HTML例】↓

<p class="shadow"><a href="#navigation">左ナビゲーションバーをスキップして本文へ</a></p>
 〜途中のHTMLソース省略〜
<p class="shadow"><a name="navigation">ここから本文です。</a></p>

【HTML全体のソース例】↓

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>サイトタイトル</title>
<link rel="stylesheet" type="text/css" href="CSSファイルへのURL〜" />
</head>
<body>
<div id="container">
<div id="header">
<h1>サイトタイトル</h1>
<!-- ナビゲーションスキップの開始 -->
<p class="shadow"><a href="#navigation">左ナビゲーションバーをスキップして本文へ</a></p>
<!-- end #header --></div>
<div id="sidebar">
<h3 class="sidetitle">ナビゲーションメニュー</h3>
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>
</div>
<!-- end #sidebar -->
<div id="mainContent">
<p class="shadow"><a name="navigation">ここから本文です。</a></p>
<h1>メインコンテンツタイトル</h1>
<p>文章省略</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Copyright (C) 2009 http://www.xml.vc/</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

【解説】↓

 上記の青色文字の部分のように、設置する場所は、タイトルロゴの直後かグローバルナビゲーションの前、あるいはナビゲーションバーの左サイドバーがある場合はそのサイドバーの読み上げる前に設置します。Webページの一番最初に設置するとWebページを訪れたとき、移動したとき、いきなりナビゲーションスキップのリンクがあると、スクリーンリーダーをお使いのユーザーはジャンプするためのリンクを「Enter」キーで押すのに間に合わない可能性がありますので、Webページが表示されてから少々の時間があるほうがユーザーにとっては利便性があると思います。

 ところでここではナビゲーションスキップが見えない設定をご紹介していますが、そもそもナビゲーションスキップのリンクは、見えるように設置するか見えないように設置するものなのでしょうか?訪れるユーザーの中には視覚障害者でなくてもキーボード、またはキーボードインターフェースに頼るユーザーもいる可能性がある場合、見えるように設置するのが望ましいのではないでしょうか。

注:W3Cのウェブアクセシビリティの指針であるWCAG 2.0 の解説書Understanding WCAG 2.0ではこれらのブロックスキップメカニズムは目に見えるのが望ましいとされています。もし、Webページにグローバルナビゲーションがあればナビゲーションスキップをグローバルナビゲーションのひとつとして左端に設置するのも良いと思います。また、ナビゲーションスキップの設定方法はほかにもあります。例えば、サイドバーの先頭と終了位置に設置する方法もあります。

【課題】↓

 上記の方法は、XHTML1.0 DTD、HTML 4.01 DTDのみ有効です。XHTML1.1 DTDでは、a要素に対して、name属性が使えませんので上記の方法は使えません。XHTML1.1 DTDの文書の場合はどうすれば良いのでしょうか?name属性の代わりに、id属性を使えば問題ないのでしょうか?スクリーンリーダーの場合、対応している製品が多いですが、PC-Talkerは、id属性に対応していません。XHTML1.1 DTDで以下のように設置しましたが、95Reader、HomePageReaderでは動作したものの、PC-Talkerでは動作しませんでした。

【CSS】↓

.shadow {
 position: absolute;
 left: -9999em;
}

【HTML】↓

<p id="shadow"><a href="#navigation">左サイドバーをスキップ</a></p>
 〜途中のHTMLソース省略〜
<p class="shadow"><a id="navigation">ここから本文です。</a></p>
<h1>メインコンテンツ</h1>

 また、name属性使用であっても以下のようにdiv要素で囲うとPC-Talkerは読み上げてくれませんでした。スクリーンリーダーはシェアの違いはあっても多くの製品がありますが、シェア上位のPC-TalkerはHTMLの書き方によって異なったふるまいをすることがありますので注意が必要です。

<div class="shadow">
<p><a href="#navigation">左ナビゲーションバーをスキップして本文へ</a></p>
</div>
 〜途中のHTMLソース省略〜
<div class="shadow">
<p><a name="navigation">ここから本文です。</a></p>
</div>

 XHTML1.1 DTDの文書でナビゲーションスキップを作る場合ですが、この辺は今後、開発企業さんに対応するようがんばってもらうか、割り切って、id属性を使うしかなさそうです。

XHTML/CSS・目次 | アクセシビリティのヒント・目次

2009/05/07 改正

Copyright (C) 2009 http://www.xml.vc/