`要素を使用する。

正解：

<table>
  <caption>2024年10月のカレンダー</caption>
  <thead>
    <tr>
      <th scope="col">日</th>
      <th scope="col">月</th>
      <th scope="col">火</th>
      <th scope="col">水</th>
      <th scope="col">木</th>
      <th scope="col">金</th>
      <th scope="col">土</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

2. ARIA属性

ARIA（Accessible Rich Internet Applications）属性は、対話型要素の理解を深めるために、支援技術に追加のセマンティック情報を提供します。ARIA属性を使用して、次のことを行います。

• ロールの定義：カレンダーグリッドの場合は`role="grid"`、各日付セルの場合は`role="gridcell"`など、要素の目的を示します。
• ラベルの提供：特に視覚的なラベルが不十分な場合は、`aria-label`または`aria-labelledby`を使用して、要素のわかりやすいラベルを提供します。
• 状態の表示：選択した日付を示すには`aria-selected`、無効な日付を示すには`aria-disabled`などの属性を使用します。
• 説明の提供：`aria-describedby`を使用して、日付形式の説明など、追加情報を要素に関連付けます。

例：

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">日付を選択してください</caption>
  <thead>
    <tr>
      <th scope="col">日</th>
      <th scope="col">月</th>
      <th scope="col">火</th>
      <th scope="col">水</th>
      <th scope="col">木</th>
      <th scope="col">金</th>
      <th scope="col">土</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="2024年10月1日">1</button></td>
      <td role="gridcell"><button aria-label="2024年10月2日">2</button></td>
      <td role="gridcell"><button aria-label="2024年10月3日">3</button></td>
      <td role="gridcell"><button aria-label="2024年10月4日">4</button></td>
      <td role="gridcell"><button aria-label="2024年10月5日">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="2024年10月6日">6</button></td>
      <td role="gridcell"><button aria-label="2024年10月7日">7</button></td>
      <td role="gridcell"><button aria-label="2024年10月8日">8</button></td>
      <td role="gridcell"><button aria-label="2024年10月9日">9</button></td>
      <td role="gridcell"><button aria-label="2024年10月10日">10</button></td>
      <td role="gridcell"><button aria-label="2024年10月11日">11</button></td>
      <td role="gridcell"><button aria-label="2024年10月12日">12</button></td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

注：ARIA属性が正しく解釈されるように、実際のスクリーンリーダーで常にテストしてください。

3. キーボードナビゲーション

キーボードナビゲーションは、マウスまたはその他のポインティングデバイスを使用できないユーザーにとって不可欠です。日付ピッカー内のすべての対話型要素がキーボードでアクセスできることを確認してください。

• フォーカスの管理：`tabindex`属性を使用して、フォーカス順序を制御します。フォーカスが日付ピッカー内を論理的に移動することを確認します。ユーザーがウィジェットを操作するときに、JavaScriptを使用してフォーカスを管理します。
• 矢印キー：矢印キーを使用して日付間を移動するキーボードナビゲーションを実装します。左矢印キーと右矢印キーは、それぞれ前日と翌日に移動する必要があります。上矢印キーと下矢印キーは、それぞれ前週と翌週の同じ日に移動する必要があります。
• HomeキーとEndキー：Homeキーは現在の週の最初の日に移動し、Endキーは現在の週の最後の日に移動する必要があります。
• Page UpキーとPage Downキー：Page Upキーは前の月に移動し、Page Downキーは次の月に移動する必要があります。
• Enterキー：Enterキーは、フォーカスされた日付を選択する必要があります。
• Escapeキー：Escapeキーは、日付ピッカーを閉じて、トリガーした入力フィールドまたはボタンにフォーカスを戻す必要があります。

例（JavaScript）：

// キーボードナビゲーションの処理の例
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // 前の日にフォーカスを移動
      break;
    case 'ArrowRight':
      // 次の日にフォーカスを移動
      break;
    case 'ArrowUp':
      // 前週の同じ日にフォーカスを移動
      break;
    case 'ArrowDown':
      // 次週の同じ日にフォーカスを移動
      break;
    case 'Enter':
      // フォーカスされた日付を選択
      break;
    case 'Escape':
      // 日付ピッカーを閉じる
      break;
  }
});

4. スクリーンリーダーの互換性

スクリーンリーダーは、セマンティックHTMLとARIA属性に依存して、ユーザーに情報を提供します。日付ピッカーがNVDA、JAWS、VoiceOverなどの一般的なスクリーンリーダーと互換性があることを確認してください。

• わかりやすいラベル：すべての対話型要素に明確で簡潔なラベルを提供します。`aria-label`または`aria-labelledby`を使用して、追加のコンテキストを提供します。
• 状態のアナウンス：ARIA属性を使用して、選択した日付の`aria-selected`や無効な日付の`aria-disabled`など、要素の状態を示します。スクリーンリーダーは、これらの状態をユーザーにアナウンスします。
• ライブリージョン：ARIAライブリージョン（例：`aria-live="polite"`）を使用して、ユーザーが別の月に移動したときなど、日付ピッカーへの動的な変更をアナウンスします。これにより、スクリーンリーダーはワークフローを中断することなく、変更をユーザーに通知できます。
• エラー処理：エラーまたは検証の問題がある場合は、スクリーンリーダーでアクセスできる明確でわかりやすいエラーメッセージを提供します。`aria-describedby`を使用して、エラーメッセージを関連する入力フィールドに関連付けます。

例：

<div aria-live="polite">
  <!-- 月のナビゲーションなどの動的なコンテンツ -->
</div>

5. ビジュアルデザイン

日付ピッカーのビジュアルデザインもアクセス可能である必要があります。以下を検討してください。

• 色のコントラスト：テキストと背景色の間に十分な色のコントラストがあることを確認して、WCAG（Web Content Accessibility Guidelines）2.1レベルAAの基準を満たします。カラーコントラストチェッカーツールを使用して、コントラスト比を確認します。
• フォーカスインジケーター：すべての対話型要素に、明確で目に見えるフォーカスインジケーターを提供します。フォーカスインジケーターは、周囲の要素とは異なり、他の要素によって隠されないようにする必要があります。
• フォントサイズと間隔：読みやすいフォントサイズと要素間の十分な間隔を使用して、読みやすさとユーザビリティを向上させます。
• 色のみに依存しない：情報を伝達するために色のみに依存しないでください。アイコンやテキストなど、他の視覚的な手がかりを使用して、カラーコーディングを補完します。

6. ローカリゼーションと国際化

日付形式、カレンダーシステム、および言語規則は、さまざまな文化や地域によって異なります。日付ピッカーが、グローバルなオーディエンスをサポートするように適切にローカライズおよび国際化されていることを確認してください。

• 日付形式：DD/MM/YYYY（ヨーロッパおよびアジアの一部で一般的）やMM/DD/YYYY（北米で一般的）など、さまざまな日付形式をサポートする柔軟な日付形式ライブラリを使用します。ユーザーが自分の好みに合わせて日付形式をカスタマイズできるようにします。
• カレンダーシステム：グレゴリオ暦（最も広く使用されているカレンダー）やヒジュラ暦（多くのイスラム諸国で使用されているカレンダー）など、さまざまなカレンダーシステムをサポートします。
• 言語サポート：月の名前、曜日の名前、ラベルなど、日付ピッカーのすべてのテキスト要素の翻訳を提供します。
• 右から左（RTL）のサポート：日付ピッカーがアラビア語やヘブライ語などのRTL言語で正しく表示されるようにします。これには、ウィジェットのレイアウトとスタイリングの調整が必要になる場合があります。
• タイムゾーン：日付を処理する際のタイムゾーンの影響を考慮してください。日付を一貫したタイムゾーン（UTCなど）に保存し、表示するときにユーザーのローカルタイムゾーンに変換します。

例：`moment.js`や`date-fns`などのJavaScriptライブラリを使用して、日付の書式設定とローカリゼーションを処理します。

7. モバイルアクセシビリティ

モバイルデバイスの使用が増加しているため、日付ピッカーがモバイルプラットフォームでアクセス可能であることを確認することが不可欠です。以下を検討してください。

• タッチターゲット：すべての対話型要素に、モバイルデバイスで簡単にタップできるように、十分に大きなタッチターゲットがあることを確認します。Appleは、最小タッチターゲットサイズを44x44ピクセルにすることを推奨しています。
• レスポンシブデザイン：レスポンシブデザイン技術を使用して、日付ピッカーがさまざまな画面サイズと向きに適応するようにします。
• キーボード入力：日付ピッカーにキーボード入力が必要な場合は、日付入力に最適化されたモバイルフレンドリーなキーボードを提供します。
• ジェスチャー：運動障害のあるユーザーにとって難しい可能性のあるジェスチャーのみに依存することは避けてください。キーボードナビゲーションや音声コントロールなどの代替入力方法を提供します。

テストと検証

日付ピッカーのアクセシビリティを確保するには、徹底的なテストが重要です。自動テストと手動テストの方法を組み合わせて使用します。

• 自動テスト：AxeやWAVEなどのアクセシビリティテストツールを使用して、一般的なアクセシビリティの問題を特定します。
• 手動テスト：スクリーンリーダーとキーボードナビゲーションを使用して日付ピッカーを手動でテストし、障害のある人が使用できることを確認します。
• ユーザビリティテスト：障害のある人とユーザビリティテストを実施して、フィードバックを収集し、改善の余地がある領域を特定します。
• WCAGコンプライアンス：日付ピッカーがWCAG 2.1レベルAAの要件を満たしていることを確認します。

アクセス可能な日付ピッカーの例

いくつかのオープンソースおよび商用の日付ピッカーライブラリは、優れたアクセシビリティサポートを提供します。いくつかの例を次に示します。

• React Datepicker：ARIAサポートとキーボードナビゲーションを備えた一般的なReactコンポーネント。
• Air Datepicker：優れたアクセシビリティ機能を備えた、軽量でカスタマイズ可能な日付ピッカー。
• FullCalendar：包括的なアクセシビリティサポートを備えた、フル機能のカレンダーコンポーネント。

日付ピッカーライブラリを選択するときは、そのアクセシビリティ機能を注意深く評価し、特定の要件を満たしていることを確認してください。

アクセス可能な日付ピッカーを構築するためのベストプラクティス

アクセス可能な日付ピッカーを構築するためのベストプラクティスの概要を次に示します。

• セマンティックHTMLを使用して、日付ピッカーを構造化します。
• ARIA属性を使用して、追加のセマンティック情報を提供します。
• キーボードナビゲーションが完全に実装されていることを確認します。
• スクリーンリーダーでテストして、互換性を確認します。
• 十分な色のコントラストと明確なフォーカスインジケーターを提供します。
• グローバルユーザー向けに、日付ピッカーをローカライズおよび国際化します。
• モバイルデバイス用に日付ピッカーを最適化します。
• 徹底的なテストと検証を実施します。

結論

アクセス可能な日付ピッカーの構築は、複雑ですが不可欠なタスクです。このガイドで概説されているガイドラインとベストプラクティスに従うことで、あらゆる能力を持つユーザー、多様な文化的および技術的背景を持つユーザーに対応できる、インクルーシブなカレンダーウィジェットを作成できます。アクセシビリティは継続的なプロセスであり、日付ピッカーのアクセシビリティを長期にわたって維持するためには、継続的なテストと改善が重要であることを忘れないでください。アクセシビリティを優先することで、すべての人にとってよりインクルーシブでユーザーフレンドリーなウェブエクスペリエンスを作成できます。

参考文献

• WAI-ARIA Authoring Practices Guide (APG) - Calendar
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University