ダイアログのラベル

Silktide は、ページ上に表示されるポップアップウィンドウであるダイアログに、で読み上げられる名前が設定されているかをチェックします。これにより、利用者は何が開いたのかを把握できます。

ダイアログは、要素にの dialog ロールを付与することでにマークアップします。このロールは、別のウィンドウが表示されたことを支援技術に伝えますが、それだけではそのウィンドウの目的までは伝わりません。

<!-- 問題: アクセシブルな名前がないダイアログ -->
<div role="dialog">
  <p>セッションの有効期限がまもなく切れます。</p>
</div>

重要な理由

ダイアログが開くと、はそれを読み上げ、利用者のフォーカスをダイアログ内に移動します。ダイアログに名前が設定されていれば、利用者には「セッションのタイムアウト、ダイアログ」のように聞こえ、何が割り込んだのかをすぐに理解できます。名前がない場合は「ダイアログ」としか聞こえません。何の説明もないまま、それまで行っていた作業から引き離され、理由を把握するために内容を調べなければなりません。

修正方法

以下のいずれかを使用して、すべてのダイアログにを設定します。

ダイアログの表示されているタイトルの id を指す aria-labelledby を使用する方法。この方法は、視覚のある利用者にも同じ名前が表示されるため、最適です。

<!-- 修正後: 見出しによってダイアログに名前が付けられている -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">セッションのタイムアウト</h2>
  <p>セッションの有効期限がまもなく切れます。</p>
</div>

ダイアログに表示されているタイトルがない場合は、名前をテキストとして指定する aria-label を使用する方法。

<div role="dialog" aria-label="セッションのタイムアウト">
  ...
</div>

Silktide によるテスト方法

各ページで、role が dialog に設定されているすべての要素を見つけます。
aria-label や aria-labelledby などの属性から、各ダイアログのアクセシブルな名前を確認します。
アクセシブルな名前がない、または空のダイアログを報告します。

トラブルシューティング

ユーザーの操作後にのみダイアログが表示される

Silktide は、ページの読み込み時に各ページを調査します。たとえばボタンのクリック後など、後からページに追加されるダイアログはテストされない場合がありますが、そのダイアログにも、そこに到達する利用者のためにラベルが必要です。

ネイティブの dialog 要素を使用している

このチェックでは、role="dialog" を明示的に設定した要素を調査します。そのロールがないネイティブの <dialog> 要素はテスト対象になりませんが、ガイダンスは適用されます。aria-labelledby または aria-label を使用して、アクセシブルな名前を設定してください。