「speakAnchor」ってなんですか？

Question

前提・実現したいこと

「speakAnchor」ってなんですか？

発生している問題・エラーメッセージ

HTML・CSSのコーディングを勉強中で、様々なサイトの模写及びコードを見ているのですが、
たまに、body直下にPタグにクラス名speakAnchorをつけたタグをつけているサイトがあります。

<p class="speakAnchor"><a href="#anchorToMain" title="本文の先頭へ">本文の先頭へ</a></p>
<p class="speakAnchor"><a id="anchorToPageTop" title="ページの先頭です">ページの先頭です</a></p>

中には<a>ページの先頭へ</a>などherf属性のないアンカーが入っています。全てz-index:-9999などで隠しているみたいです。
これは一体なんの目的があるのでしょうか？

Answer 1

こんにちは。

.speakAnchor{
	position:absolute;
	left:-9999px;
}

みたいなスタイルがついていて、スクリーンでは見えないリンクのことですよね？

おそらく、スキップリンクだと思います。

「スキップリンク」は、Webページの先頭からメインコンテンツの開始位置までジャンプできるページ内リンクのことで、通常は各Webページの先頭に配置されています。2000年代前半は、多くはスクリーンリーダーのユーザーのみを想定して、ブラウザの画面内には表示されないように実装されていました。

スクリーンリーダーを使用している場合、新しいWebページを読み込むと、そのWebページの先頭から順にコンテンツを読み上げていきます。そのため、Webページのメインコンテンツを読み上げる前に、ヘッダー部分や左サイドにあるサブメニューなどを毎回読み上げることになります。そこで、すぐにメインコンテンツの内容を読み上げさせたいときのために、「スキップリンク」を提供するという考えかたが生まれました。
【質問】スキップリンクは絶対に必要なの？｜基礎知識｜エー イレブン ワイ［WebA11y.jp］

Comments

[nofuji]

いただいたリンクを見て納得しました。
目で見る以外に閲覧する状況を改めて考えさせられました。 もっとユーザビリティを学んで行こうと思います。
とても勉強になりました。ありがとうございます。