スキップリンクを実装してみる

一般的なサイトだとメインコンテンツの前にはヘッダーがあり、その中にナビゲーションや検索などといった要素が入っていることが多いですが、キーボードやスクリーンリーダーを使用するユーザーの場合、サイト内を遷移する毎にこのヘッダー内の移動が必要になります。
こういったメインコンテンツ前にある要素をスキップしてメインコンテンツにすぐ移動できるようにする機能がブロックスキップで、これを実現するために設置するリンクがスキップリンクと呼ばれますが、今回はこのスキップリンクの設置を試してみます。

サンプルコード

BootstrapやWordPressでスタイルが用意されているようなので、その設定を見てみます。

Bootstrapの場合は .visually-hidden-focusable というclassで用意されているようです。
デモ用のページを作成して、bodyの開始タグの後に .visually-hidden-focusable を付与したスキップリンクを追加します。

<a class="visually-hidden-focusable" href="#content">Skip to content</a>
<header class="header">
	〜 略 〜
</header>
<main id="content">
	〜 略 〜
</main>
<footer class="footer">
	〜 略 〜
</footer>

.visually-hidden-focusable のスタイルは以下のようになっています。
フォーカスした際に表示しなくてもよい場合、 .visually-hidden のクラスを使用するようです。

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Bootstrapの.visually-hidden-focusableのデモページ

WordPressの場合は .screen-reader-text というclassでスタイルが用意されているようです。
先ほどのスキップリンクのclassを .screen-reader-text に変更します。

<a class="screen-reader-text" href="#content">Skip to content</a>
<header class="header">
	〜 略 〜
</header>
<main id="content">
	〜 略 〜
</main>
<footer class="footer">
	〜 略 〜
</footer>

.screen-reader-text のスタイルは以下の通りです。

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

WordPressの.screen-reader-textのデモページ

BootstrapとWordPressの例を踏まえて実装してみます。

<a class="skip-link" href="#content">Skip to content</a>
<header class="header">
	〜 略 〜
</header>
<main id="content">
	〜 略 〜
</main>
<footer class="footer">
	〜 略 〜
</footer>

.skip-link {
	position: absolute;
}
.skip-link:not(:focus) {
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: -1px;
	clip: rect(1px, 1px, 1px, 1px);
}
.skip-link:focus {
	display: block;
	top: 5px;
	left: 5px;
	z-index: 9999;
	margin: 0;
	padding: 15px 20px;
	background-color: lightgray;
}

スキップリンク実装のデモページ