Webアクセシビリティの実践：WCAG 2.2準拠のUI実装テクニック

COLUMN コラム

2026年01月14日
Webアクセシビリティの実践：WCAG 2.2準拠のUI実装テクニック
- ＩＴ系

アクセシビリティが求められる背景

Webアクセシビリティとは、障害の有無にかかわらず、すべての人がWebコンテンツを利用できるようにする取り組みです。日本では2024年4月から改正障害者差別解消法が施行され、民間事業者にも合理的配慮の提供が義務化されました。法的な要請に加え、アクセシビリティの向上はSEO効果やユーザビリティの改善にもつながるため、ビジネス面でもメリットがあります。

WCAG（Web Content Accessibility Guidelines）2.2は、W3Cが策定した最新のアクセシビリティガイドラインです。知覚可能、操作可能、理解可能、堅牢の4原則に基づいて、具体的な達成基準を定義しています。

セマンティックHTMLの重要性

アクセシビリティの基盤はセマンティックHTMLです。適切なHTML要素を使用するだけで、スクリーンリーダーへの対応の大部分がカバーできます。

<!-- 悪い例 -->
<div class="header">
  <div class="nav">
    <div class="nav-item" onclick="navigate()">ホーム</div>
  </div>
</div>

<!-- 良い例 -->
<header>
  <nav aria-label="メインナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
    </ul>
  </nav>
</header>

header、nav、main、aside、footerなどのランドマーク要素を使用することで、スクリーンリーダーユーザーがページの構造を理解し、目的のセクションに素早くジャンプできるようになります。

フォームのアクセシビリティ

フォームはWebアプリケーションの重要なインタラクションポイントであり、アクセシビリティの課題が多い箇所でもあります。

<form>
  <div role="group" aria-labelledby="personal-info">
    <h2 id="personal-info">個人情報</h2>

    <div>
      <label for="email">メールアドレス<span aria-hidden="true">*</span></label>
      <input type="email" id="email" name="email"
        required
        aria-required="true"
        aria-describedby="email-hint email-error"
        aria-invalid="false">
      <p id="email-hint">例：user@example.com</p>
      <p id="email-error" role="alert" hidden>有効なメールアドレスを入力してください</p>
    </div>
  </div>
</form>

label要素とinput要素をfor/id属性で紐付け、aria-describedbyでヒントテキストやエラーメッセージと関連付けます。エラー発生時にはaria-invalidをtrueに変更し、role=”alert”で即座にスクリーンリーダーに通知します。

キーボード操作の対応

すべてのインタラクティブ要素がキーボードだけで操作できることが必須です。カスタムコンポーネントを実装する際は、tabindex属性でフォーカス順序を制御し、キーボードイベントを適切にハンドリングします。モーダルダイアログではフォーカストラップを実装し、Escapeキーで閉じられるようにしましょう。WCAG 2.2で追加されたFocus Not Obscured基準では、フォーカスされた要素が他の要素に隠されないことが求められています。