キーボード操作の順序が見た目の順序とあっている

キーボード操作の順序が見た目の順序とあっている

概要

この基準では、ウェブページ上でキーボードだけを使ってナビゲートするとき、項目への移動が画面上で見える順序と一致していること確認してください。これにより、キーボードユーザーもスムーズに情報を追っていけるようになります。

メリット

  1. キーボードのみで操作するユーザー: タブキーでの操作が直感的で、予測可能な順序になるため、使いやすさが向上します。
  2. 視覚障害のあるユーザー: スクリーンリーダーを使用しているユーザーがページの構造を理解しやすくなり、情報の流れをスムーズに追えます。

達成方法

  1. 視覚的な順序とHTML要素の順序を一致させる:
    • HTMLコードにおける要素の配置が、画面上での視覚的な順序と一致するようにします。これにより、DOM(Document Object Model)の順序が自然なタブ順序を導きます。
  2. フォーカス管理の適用:
    • JavaScriptやCSSを使ってフォーカスの順番を変更する場合は、視覚的な順序と論理的な流れが一致するように注意深く設計します。
  3. タブインデックスの適切な使用:
    • 必要な場合は tabindex 属性を使用してキーボードナビゲーションの順序を制御しますが、乱用を避け、できるだけ標準のHTML要素の順序に従います。

テスト方法

  1. キーボードナビゲーションのテスト:
    • タブキー(Tab)を使ってページを操作し、フォーカスが視覚的な順序に沿って各要素に移動するかを確認します。

関連するWCAG2.1達成基準