すべてのカスタム コントロールに適切な role と、プロパティと状態を付与する必要な ARIA 属性があることを確認します。たとえば、カスタム チェックボックスは、状態を適切に伝えるために role="checkbox" と aria-checked="true|false" を必要とします。
ARIA と HTML を使用して、カスタム コントロールに不足しているセマンティクスを提供する最適なタイミングを理解する方法について学習します。
テスト方法
すべてのカスタム インタラクティブ コントロールに適切な ARIA ロールが設定されていることを確認するには、Chrome DevTools のユーザー補助ペインまたはスクリーン リーダーを使用してページをテストします。
JAWS と NVDA の 2 つは、Windows で広く使用されているスクリーン リーダーです。VoiceOver は、macOS に組み込まれているスクリーン リーダーです。
CSS では、<div> 要素と <button> 要素のスタイルを設定して同じビジュアル アフォーダンスを提供できますが、スクリーン リーダーを使用した場合のエクスペリエンスは大きく異なります。<div> は汎用のグループ化要素であるため、スクリーン リーダーは <div> のテキスト コンテンツのみを読み上げます。<button> は「ボタン」として読み上げられます。これは、ユーザーが操作できるものであることをユーザーに強く伝えるシグナルです。
セマンティクスとスクリーン リーダーもご覧ください。
修正方法
この問題を解決する最善の方法は、カスタム インタラクティブ コントロールを完全に回避することです。たとえば、ボタンのように動作する <div> を実際の <button> に置き換えます。
<button>Learn more</button>
<div> を使用する必要がある場合は、role="button" と aria-pressed="false" を追加します。
<div role="button" aria-pressed="false">Learn more</div>
これで、スクリーン リーダーは <div> のロールとインタラクティブな状態を読み上げます。
これが重要な理由
支援技術をこれまで使用したことがない場合は、支援技術を使用しているユーザーにとってコンテンツのパフォーマンスがどのようになっているかわからない場合があります。できれば、ユーザー補助技術を定期的に使用しているユーザーに話しかけ、ウェブサイトまたはウェブ アプリケーションのパフォーマンスに関するフィードバックを共有してください。
支援技術のユーザーがコンテンツをどのように利用しているかを把握するもう 1 つの方法は、支援技術でテストすることです。スクリーン リーダーを使用すると、コンテンツのラベル付け方法や、ナビゲーションの妨げになるものがないかを明確に把握できます。
リソース
カスタム コントロールの ARIA ロールの監査のソースコードを確認できます。