WCAG 2.2 ガイドライン「3.2.6 一貫したヘルプ」Level A について

はじめに

WCAG 2.2の「3.2.6 一貫したヘルプ」は、ウェブページ群で繰り返し提供されるヘルプ機能が、常に同じ順序や場所に配置されていることを求めています。この基準は、ユーザーが迷わずに必要なサポートを迅速に見つけられるようにすることを目的としています。

1. 基準の概要

要件

• ヘルプ機能がウェブページ間で一貫して配置されること。
  • ヘルプ機能には以下が含まれる場合があります：
    • 「お問い合わせ」リンク
    • FAQページへのリンク
    • サポートチャットウィジェット
    • ユーザーマニュアルへのリンク
• ユーザーが明示的に変更を行わない限り、ヘルプ機能の位置や順序は維持されるべきです。

2. 実装方法

a. 一貫した「お問い合わせ」リンクを配置

ウェブサイト全体で「お問い合わせ」リンクをヘッダーやフッターなどの一定の位置に配置します。

例: ヘッダー内に「お問い合わせ」リンクを固定

<header>
  <nav>
    <ul>
      <li><a href="/home">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

b. FAQリンクを統一された場所に設置

FAQページへのリンクをナビゲーションメニューまたはフッターに一貫して配置します。

例: フッター内にFAQリンクを配置

<footer>
  <ul>
    <li><a href="/faq">FAQ</a></li>
    <li><a href="/privacy">プライバシーポリシー</a></li>
    <li><a href="/terms">利用規約</a></li>
  </ul>
</footer>

c. サポートチャットを一貫して表示

サポートチャットのウィジェットを、すべてのページの同じ隅に固定表示します。

例: 右下隅にサポートチャットを配置

<div id="chat-widget" style="position: fixed; bottom: 20px; right: 20px;">
  <button>サポートチャット</button>
</div>

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

a. ページごとに「お問い合わせ」リンクの位置が異なる

失敗例

<!-- ホームページ -->
<nav>
  <ul>
    <li><a href="/home">ホーム</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

<!-- サービスページ -->
<nav>
  <ul>
    <li><a href="/contact">お問い合わせ</a></li>
    <li><a href="/home">ホーム</a></li>
  </ul>
</nav>

問題点

• ページごとにリンクの順序が異なり、ユーザーが混乱します。

改善策

<!-- 全ページで統一 -->
<nav>
  <ul>
    <li><a href="/home">ホーム</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

b. サポートチャットの表示位置がページごとに異なる

失敗例

• ホームページでは右下、サービスページでは左下にチャットウィジェットが表示される。

改善策

• すべてのページで同じ位置に固定。

<div id="chat-widget" style="position: fixed; bottom: 20px; right: 20px;">
  <button>サポートチャット</button>
</div>

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

a. ユーザー体験の向上

• 一貫性のあるヘルプ機能配置により、ユーザーが迷わずサポートを見つけられるようになります。

b. ストレスの軽減

• ページ間でヘルプの場所が変わらないことで、ユーザーはサイトを安心して利用できます。

c. 支援技術との互換性

• スクリーンリーダー利用者にとって、同じ場所にヘルプ機能が配置されているとナビゲーションが容易になります。

5. テスト方法

a. 手動テスト

1. サイト内の複数ページを確認し、ヘルプ機能が同じ位置・順序に配置されていることを確認します。
2. ユーザーがヘルプ機能をカスタマイズした場合、その変更が適切に反映されていることを確認します。

b. 自動テストツール

• AxeやWAVEなどを使用して、一貫性のあるナビゲーション構造を確認します。

まとめ

WCAG 2.2の「3.2.6 一貫したヘルプ」は、ウェブサイト内で繰り返し提供されるヘルプ機能の一貫性を確保し、ユーザーが必要なサポートを迅速かつ容易に見つけられるようにすることを目的としています。

実装ポイント

1. 「お問い合わせ」やFAQリンクを統一された位置に配置する。
2. サポートチャットやウィジェットの位置を固定する。
3. ヘルプ機能の順序をページ全体で統一する。

これにより、すべてのユーザーが快適にヘルプ機能を利用できるようになります。

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