本文へジャンプ

会社のブログに「音声読み上げ等による利用への配慮として、ナビゲーションを飛ばして本文に進みます。」を組み込んでみた。

スタイルシートに追加。
.skip{
    position:absolute;
    width:0;
    height:0;
}

これを<body>の直後に設置。
<div class="skip"><a href="#stage" accesskey="0">
<img src="/img/space.gif" width="1" height="1" border="0" alt="本文へジャンプ"/>
</a></div>

本文の直前に設置。
<div id="stage"></div>

Webアクセシビリティを考慮すると、スタイルシートで「overflow: hidden;」が使えないため、
<div class="skip"><a href="#stage">本文へジャンプ</a></div>
はできない。

代わりに、ちっこいgifファイルを置いて、スタイルシートでそれを隠す。

この方法なら「WebInspector」もクリア。



関連エントリー