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

適合レベル

※各レベルについては適合レベルとはをご覧ください

概要

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

詳細

サイドバーやメニューなど、ページ内で繰り返す項目が多くある場合、以下のように項目を移動するための操作が多くなってしまう。

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

そのため、以下の設定をすることで、移動を簡単にできるようにする。

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

テスト・チェック方法

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

実装方法

Web

悪い実装例

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

<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>注目記事１つ目</li>
    <li>注目記事２つ目</li>
    <li>注目記事３つ目</li>
  </ul>
</aside>

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

良い実装例

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

<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>注目記事１つ目</li>
    <li>注目記事２つ目</li>
    <li>注目記事３つ目</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>注目記事１つ目</li>
    <li>注目記事２つ目</li>
    <li>注目記事３つ目</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>注目記事１つ目</li>
    <li>注目記事２つ目</li>
    <li>注目記事３つ目</li>
  </ul>
</aside>

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

iOS

画面内で繰り返される項目が多くある場合は、適切な見出しを作成することで画面内の移動を簡単にできる。見出し用ラベル等のaccessibilityTraitsにheaderを設定すると、ローター機能使用時に設定された見出しへの移動が可能。

headerLabel.accessibilityTraits = [.header]