Accessibility
Guidelines

2.4.1 重複する情報をスキップできるようにする

ページの中で繰り返される項目を簡単にスキップできるようにする

詳細

サイドバーやメニューなど、ページ内で繰り返す項目が多くある場合、

  • Tabキーを何度も押す
  • スクロールを何度も行う

など、項目を移動するのに操作が多くなってしまう。そのため、

  • 見出しを適切に作成する
  • Ariaランドマークを設定する
  • コンテンツに直接移動するリンク(スキップリンク)を各ページの先頭に追加する

などを設定し、移動を簡単にできるようにする。

レビュー・テスト方法

  1. 企画時、デザイナー・エンジニアによるレビュー
  2. 実装時、Chromeプラグイン「Landmarks」によるチェック
  3. コードレビュー

実装方法

良い実装例

コンテンツに見出しがある

<section>
  <h2>本文タイトル</h2>
  <div>ここから本文...</div>
</section>

<aside>
  <h2>ユーザ一覧</h2>
  <ul>
    <li>ユーザーA</li>
    <li>ユーザーB</li>
    <li>ユーザーC</li>
  </ul>
</aside>

<aside>
  <h2>記事一覧</h2>
  <ul>
    <li>注目記事1つ目</li>
    <li>注目記事2つ目</li>
    <li>注目記事3つ目</li>
  </ul>
</aside>

<footer>
  <h2>このサイトについて</h2>
  <div>お問い合わせはこちら...</div>
</footer>

スキップリンクを用意している

<nav>
  <h2>メニュー</h2>
  <ul>
    <li><a href="#main">本文</a></li>
    <li><a href="#userList">ユーザ一覧</a></li>
    <li><a href="#entryList">記事一覧</li>
    <li><a href="#footer">お問い合わせ</li>
  </ul>
<nav>

<section id="main">
  <h2>本文タイトル</h2>
  <div>ここから本文...</div>
</section>

<aside id="userList">
  <h2>ユーザ一覧</h2>
  <ul>
    <li>ユーザーA</li>
    <li>ユーザーB</li>
    <li>ユーザーC</li>
  </ul>
</aside>

<aside id="entryList">
  <h2>記事一覧</h2>
  <ul>
    <li>注目記事1つ目</li>
    <li>注目記事2つ目</li>
    <li>注目記事3つ目</li>
  </ul>
</aside>

<footer id="footer">
  <h2>このサイトについて</h2>
  <div>お問い合わせはこちら...</div>
</footer>

Ariaランドマーク(role)を設定している

<nav role="navigation">
  <h2>メニュー</h2>
  <ul>
    <li><a href="#main">本文</a></li>
    <li><a href="#userList">ユーザ一覧</a></li>
    <li><a href="#entryList">記事一覧</li>
    <li><a href="#footer">お問い合わせ</li>
  </ul>
</nav>

<section id="main" role="main">
  <h2>本文タイトル</h2>
  <div>ここから本文...</div>
</section>

<aside id="userList" role="complementary">
  <h2>ユーザ一覧</h2>
  <ul>
    <li>ユーザーA</li>
    <li>ユーザーB</li>
    <li>ユーザーC</li>
  </ul>
</aside>

<aside id="entryList" role="complementary">
  <h2>記事一覧</h2>
  <ul>
    <li>注目記事1つ目</li>
    <li>注目記事2つ目</li>
    <li>注目記事3つ目</li>
  </ul>
</aside>

<footer id="footer" role="contentinfo">
  <h2>このサイトについて</h2>
  <div>お問い合わせはこちら...</div>
</footer>

悪い実装例

コンテンツに見出しの実装が無く、スキップ可能な項目もない

<section>
  <div>本文タイトル</div>
  <div>ここから本文...</div>
</section>

<aside>
  <div>ユーザ一覧</div>
  <ul>
    <li>ユーザーA</li>
    <li>ユーザーB</li>
    <li>ユーザーC</li>
  </ul>
</aside>

<aside>
  <div>ユーザ一覧</div>
  <ul>
    <li>注目記事1つ目</li>
    <li>注目記事2つ目</li>
    <li>注目記事3つ目</li>
  </ul>
</aside>

<footer>
  <div>このサイトについて</div>
  <div>お問い合わせはこちら...</div>
</footer>

参考文献