すべてのカスタム コントロールに、プロパティと状態を付与する適切な role と、必要な ARIA 属性があることを確認します。たとえば、カスタム チェックボックスには、状態を適切に伝えるために role="checkbox" と aria-checked="true|false" が必要です。ARIA がカスタム コントロールで不足しているセマンティクスを提供する仕組みの概要については、ARIA の概要をご覧ください。
手動でのテスト方法
すべてのカスタム インタラクティブ コントロールに適切な ARIA ロールが割り当てられていることを確認するには、Chrome DevTools のユーザー補助ペインまたはスクリーン リーダーを使用してページをテストします。JAWS と NVDA は、Windows 向けの一般的なスクリーン リーダーです。VoiceOver は MacOS に組み込まれているスクリーン リーダーです。
CSS を使用すると、<div> 要素と <button> 要素のスタイルを設定して同じビジュアル アフォーダンスを提供できますが、スクリーン リーダーを使用した場合のエクスペリエンスは大きく異なります。<div> は単に汎用的なグループ化要素であるため、スクリーン リーダーは <div> のテキスト コンテンツのみを読み上げます。<button> は「ボタン」として通知されるため、操作できることをユーザーに強く示すことができます。セマンティクスとスクリーン リーダーもご覧ください。
修正方法
この問題の最も簡単で、多くの場合最適な解決策は、カスタム インタラクティブ コントロールを完全に回避することです。たとえば、ボタンのように動作する <div> を実際の <button> に置き換えます。
<div> を保持する必要がある場合は、role="button" と aria-pressed="false" を <div> に追加します。
これで、スクリーン リーダーが <div> のロールとインタラクティブな状態を読み上げます。
重要である理由
支援技術のユーザー エクスペリエンスを正確に理解する唯一の方法は、スクリーン リーダーを使って自らコンテンツを確認することです。スクリーン リーダーを直接使用することで、コンテンツのラベル付けの状況や、支援技術のナビゲーションを妨げるものがあるかどうかを明確に把握できます。支援技術でセマンティック マークアップがどのように解釈されるかについては、セマンティクスの概要で復習してください。
ユーザー補助の審査方法もご覧ください。