black toy car on world map paper
Photo by Mihis Alex on Pexels.com

WCAG 2.2 ガイドライン「2.4.5 複数の方法」Level AA について

はじめに

WCAG 2.2の「2.4.5 複数の方法」は、ウェブサイト内の特定のページにアクセスするために、複数の手段を提供することを求めています。これにより、ユーザーが自身の好みやニーズに合った方法で目的のページに到達できるようになります。


1. 基準の概要

要件

  • 複数の手段(例: ナビゲーションメニュー、検索機能、サイトマップなど)を提供し、特定のページを見つけやすくする。
  • プロセスの一部(例: 購入手続き)や検索結果のページには、この基準は適用されません。

2. 実装方法

a. ナビゲーションメニューの提供

適切なナビゲーション例

HTML

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/products">製品一覧</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>
  • グローバルナビゲーションを提供することで、全ページへのアクセスが容易になります。

b. サイトマップを提供

簡単なサイトマップの例

HTML

<h2>サイトマップ</h2>
<ul>
  <li><a href="/">ホーム</a></li>
  <li><a href="/about">会社概要</a></li>
  <li><a href="/products">製品一覧</a></li>
  <ul>
    <li><a href="/products/product1">製品1</a></li>
    <li><a href="/products/product2">製品2</a></li>
  </ul>
  <li><a href="/contact">お問い合わせ</a></li>
</ul>
  • サイトマップを提供することで、サイト全体の構造を一目で把握できます。

c. 検索機能の提供

検索フォームの例

HTML

<form action="/search" method="get">
  <label for="search">サイト内検索:</label>
  <input type="text" id="search" name="q" placeholder="キーワードを入力">
  <button type="submit">検索</button>
</form>
  • 検索機能を利用すれば、ユーザーはキーワードで目的のコンテンツを直接見つけることができます。

d. 関連ページへのリンクを提供

関連リンクの例

HTML

<aside>
  <h3>関連ページ</h3>
  <ul>
    <li><a href="/products">製品一覧</a></li>
    <li><a href="/services">サービス概要</a></li>
    <li><a href="/faq">よくある質問</a></li>
  </ul>
</aside>
  • コンテンツ内やサイドバーに関連ページへのリンクを設置することで、ページ間の移動がスムーズになります。

3. よくある失敗例とその改善策

a. 複数のアクセス方法がない

失敗例

  • サイト全体が1つのナビゲーションメニューに依存しており、検索やサイトマップがない。

改善策

  • 検索機能やサイトマップを追加し、他のアクセス手段を提供します。

b. サイト構造が不明瞭

失敗例

  • サイトマップが提供されておらず、ユーザーが目的のページにたどり着くのが困難。

改善策

  • サイトマップや目次を作成し、全体の構造を明示します。

4. アクセシビリティのメリット

a. ユーザーの選択肢を増やす

  • 複数の方法を提供することで、ユーザーは自分に合った方法で目的のページにアクセスできます。

b. ユーザー体験の向上

  • 必要な情報に迅速にアクセスできるため、サイト全体の使いやすさが向上します。

c. 障害を持つユーザーへの配慮

  • キーボード操作やスクリーンリーダーを使用するユーザーにも、適切なナビゲーション手段を提供できます。

5. テスト方法

a. 手動テスト

  1. ナビゲーションメニュー、検索機能、サイトマップが利用可能か確認。
  2. 複数のアクセス方法で同じページに到達できるか検証。

b. 自動テストツール

  • AxeやWAVEなどを使用して、サイト全体のナビゲーション機能をチェック。

まとめ

WCAG 2.2の「2.4.5 複数の方法」は、特定のページにアクセスするための複数の手段を提供することで、すべてのユーザーが効率的に目的のコンテンツに到達できるようにすることを目指しています。

実装ポイント

  1. グローバルナビゲーションメニューを提供する。
  2. サイトマップや検索機能を追加する。
  3. 関連ページへのリンクを明示する。

これにより、ユーザーの利便性を向上させ、アクセス可能なウェブサイトを実現できます。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。

投稿者 greeden

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)