メインコンテンツにスキップ　アクセシビリティ – てまりのユニバーサルデザイン

Webサイトをキーボード操作するユーザーのために、ページの先頭には「メインコンテンツにスキップ」のリンクを設けたほうが良いでしょう。

ブロックスキップを理解する

Webコンテンツアクセシビリティガイドライン（WCAG2.1）の達成基準 2.4.1に、「ブロックスキップを理解する」という項目があります。

ページ先頭にメイン記事へスキップするリンクがないと、利用者にとって深刻な肉体的苦痛を引き起こすことがある・・・というようなことが書いてあります。

どういうことか？

報道機関のホームページが実例に挙げられています。実際に海外の報道機関のホームページを見てみましょう。

公共放送のブロックスキップ

イギリス「BBC」

世界的に有名なイギリスの公共放送「BBC」のホームページで、キーボード操作をしてみます。

早速「Skip to content」というスキップするリンクが出現しました。

さすが世界のBBC。

アメリカ「PBS」

続いてアメリカの公共放送「PBS」。こちらもキーボード操作で「Skip to Main Content」の文字が出現。

アクセシビリティが作り込まれています。

スウェーデン「SVT」

福祉大国のイメージが強い北欧スウェーデン。公共放送「SVT」を見てみます。

文字は読めませんが、やはりスキップするリンクが仕込まれていました。

いくつか報道機関のサイトを回ってみると、アクセシビリティを大事している機関が多いことが分かります。

インフラサイトのブロックスキップ

続いて誰もが生活に欠かせなくなっているインフラサイトのブロックスキップを見てみます。

Google

Google先生。キーボード操作で「メインコンテンツにスキップ」が表示されます。

Amazon

Amazon。こちらもキーボード操作で「メインコンテンツにスキップ」が表示されます。

インフラサイトは見えないアクセシビリティ機能も、しっかり作り込んでいます。

ブロックスキップの実装方法

実装コードの一例です。

<body>
  <header>
    <div id="skipNav"><a href="#main">メインコンテンツにスキップ</a></div>
    <h1>ブロックスキップテスト</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <h2>メインコンテンツ</h2>
    <p>本文・・・</p>
  </main>
</body>

<body>

<div id="skipNav"><a href="#main">メインコンテンツにスキップ</a></div>

<h1>ブロックスキップテスト</h1>

<nav>

<ul>

</ul>

</nav>

</header>

<h2>メインコンテンツ</h2>

</main>

</body>

ヘッダーに「メインコンテンツにスキップ」のページ内リンクを設置します。

普段は見えない状態にして、キーボードのフォーカスが当たった時だけ出現するようにCSSで指定します。

#skipNav a {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

#skipNav a:focus,
#skipNav a:active {
  display: block;
  width: 15em;
  height: auto;
  top: 5px;
  left: 5px;
  clip: auto;
  z-index: 1000;
  font-size: 1.8rem;
  padding: 5px;
  background-color: #FFF;
  border: #CCC solid 1px;
  text-align: center;
}

#skipNav a {

position: absolute;

width: 1px;

height: 1px;

clip: rect(1px, 1px, 1px, 1px);

}

#skipNav a:focus,

#skipNav a:active {

display: block;

width: 15em;

height: auto;

top: 5px;

left: 5px;

clip: auto;

z-index: 1000;

font-size: 1.8rem;

padding: 5px;

background-color: #FFF;

border: #CCC solid 1px;

text-align: center;

}

サンプルページもアップしました。

参考まで。