2009.02.22（Sun）
【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
Web制作をしていると他のページのソースが非常に気になってしまうという職業気質な方もいるかと思います。
自分もそんな気質を持った一人で、制作現場を離れた今でも「これはどうやって実装しているのだろう？」と思うと直ぐに「ctrl+U」（FireFoxを使っているので）でソースコードを見てしまうクセがあります。
ソースコードを見てると不可視なページ内アンカーを見たことはないでしょうか？例えばページ構造のヘッダ部分にアンカーリンクのまとまりがあり、グローバルナビやローカルナビ、ページ本文へと言った感じのリンクです。
実はアクセシリビティに配慮したもので、自分が知ったのはアクセシビリティを世界的規模で実践している富士通のサイトででした。
富士通は独自の「富士通ウェブ・アクセシビリティ指針」を設けており、「JIS X 8341-3」（「高齢者・障害者等配慮設計指針 － 情報通信における機器・ソフトウェア・サービス － 第3部：ウェブコンテンツ」）よりも厳格で且つ世界各国の富士通のサイトに適用されています。Webのアクセシビリティを語る上では、富士通の事例は避けては通れない存在です。
話を不可視のページ内アンカーに戻すと、視覚ブラウザ（IEやFireFox等の健常者が使うブラウザ）だと意識しませんが、読み上げブラウザや点字ブラウザではhtmlソースの一番上から読まれます。
この際にグローバルメニューや本文までの間に、ヘッダーデザインに用いているコードがあると、そのブラウザを使っている人達はそれだけ余計に文字を読まなければならず非常に手間と時間が掛かってしまいます。
そこで、ページヘッダよりも上部に不可視のページアンカーを設けて、ページ本文やグローバルメニュー等のユーザが求めるであろうコンテンツに素早くアクセスできるようにする訳です。
自分が制作した例を示すと、htmlソースは以下の通りです。htmlファイル内で記述する場所はbodyタグ（<body>）の直後かヘッダーデザインの直前です。
理想を言えば読み上げられる最初になるbodyタグの直後が良いでしょう。
<div class="page-ancher"><!-- pagea-ncher// -->
<p><a name="top-page" id="top-page">ページ内・サイト内を移動するためのリンク</a></p>
<ul>
<li><a href="#to-global-nav" title="グローバルメニューへ">グローバルメニューへ</a></li>
<li><a href="#to-usermenu" title="ユーザメニューへ">ユーザメニューへ</a></li>
<li><a href="#to-footer" title="フッターへ">フッターへ</a></li>
</ul>
<!-- //page-ancher --></div>また、最後までページを読んだ場合に再び主要コンテンツやメニューに戻ることを考慮して、bodyの終了タグ（</body>）に直前か、フッターデザインの直前に配置します。
その際は上のソースの例で言うと「<p><a name="top-page" id="top-page">ページ内・サイト内を移動するためのリンク</a></p>」は削除します。
またアンカーリンク先では以下の指定をします。pタグで囲ったテキストを指定している理由は、空リンクだとhtmlソースのチェックツールで警告が出るためです。富士通が使っているような「spacer.gif」を使った方法でも良いと思います。
<p class="skip"><a name="to-global-nav" id="to-global-nav">グローバルナビ</a></p>CSSの指定は以下の通りです。視覚ブラウザでは不要なリンクのため「position:absolute」を使ってページ外に飛ばすという指定です。
もちろん視覚ブラウザでも、表示しても違和感無いデザインが出来れば表示しても良いでしょう。
なお、「font-size:0;」の指定は何のブラウザのために指定したのかは随分前なので定かではありませんが、確か「MacIE」用だったと記憶しています。
また「.page-ancher」だけではなく、pやulにも同じ指定をしているのは同じ理由だと思います。
.page-ancher { font-size:0; position:absolute; left:-9999px; }
.page-ancher p { font-size:0; position:absolute; left:-9999px; }
.page-ancher ul { font-size:0; position:absolute; left:-9999px; }
.page-ancher ul li { font-size:0; position:absolute; left:-9999px; }
.skip { font-size:0; position:absolute; left:-9999px; }もちろん全て同じ指定なので、1行にまとめてしまっても問題ありません。
.page-ancher, .page-ancher p, .page-ancher ul, .page-ancher ul li,.skip { font-size:0; position:absolute; left:-9999px; }なお、「page-ancher」とセレクタ名に「-（ハイフン）」を使っているのは、Netscape6及びNetscape6.x対策です。このブラウザでは「_（アンダースコア）」をセレクタ名に使用すると解釈できないと言うバグがあるためにハイフンを使いました。
- 関連記事
-
- クソIEをハックしてやる！（IEの条件分岐の使い方）
- XHTML+CSSスタンダード・デザインガイド
- 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？
- 【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話
- 【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう
- 【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々
- IE7をスタンドアローンでインスコ
- 【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
- 【html/xhtml】ユーザビリティを高める「<label>」の使い方
- ユニバーサルセレクタ（*）はもう古い？
関連エントリー
Loading
この記事のトラックバックURL
この記事へのトラックバック
| BLOGTOP |
※コメントは承認するまで表示されません。