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