リンクやボタンなどのインタラクティブ要素は、状態を示す必要があり、インタラクティブでない要素と区別できる必要があります。インタラクティブ要素が目的と状態を示していることを確認するには、視覚テストとスクリーン リーダー テストの両方を使用します。
手動テストの方法
インタラクティブな要素は、視覚的に、およびスクリーン リーダーを使用してテストする必要があります。
視覚的なフォーカスをテストする
視覚的なフォーカスを手動でテストするには、ページ内で TAB キーを押します。
- 各インタラクティブ エレメントに TAB キーで移動できますか？
- インタラクティブな要素に到達したとき、ユーザーがそれを操作できることを視覚的に判断できる要素はありますか？
- 各インタラクティブ要素を選択すると、その外観が変わりますか？
各インタラクティブ エレメントのフォーカス インジケーターのスタイル設定には、さまざまな方法があります。1 つの方法は、:focus 疑似クラスにスタイルを設定することです。このスタイルは、フォーカスに使用された入力デバイスや方法に関係なく、要素にフォーカスが当てられるたびに適用されます。
詳しくは、フォーカスのスタイルを設定するをご覧ください。
スクリーン リーダーでテストする
スクリーン リーダーを使用してページを移動し、スクリーン リーダーが各インタラクティブ コントロールの名前、そのコントロールの役割、現在のインタラクティブな状態を読み上げていることを確認します。要素のロールが不明瞭で、要素の状態が不明確な場合は、適切な ARIA ロールを追加する必要があります。
詳しくは、カスタム コントロールの ARIA ロールをご覧ください。
また、インタラクティブな要素のラベル付けにも注意を払う必要があります。スクリーン リーダーなどの支援技術のユーザーは、ラベルによってその要素のコンテキストを理解しています。漠然としたラベルはよく見られますが、コンテンツのナビゲーションには役立ちません。ラベルと代替テキストを改善する方法を確認する。
これが重要な理由
コントロールの機能に関する視覚的なヒントを提供すると、ユーザーがサイトを操作して移動しやすくなります。このようなヒントは「アフォーダンス」と呼ばれます。アフォーダンスにより、ユーザーはさまざまなデバイスでサイトを使用できるようになります。