WAIC-TEST-0049-01
role 属性によるエラーの通知(alertdialog:aria-labelledby属性、aria-describedby属性と併用)
role=”alertdialog” を指定した div 要素に aria-labelledby 属性および aria-describedby 属性で関連付けを行った場合、alertdialog としての役割の通知とあわせて aria-labelledby 属性と aria-describedby 属性で関連付けられた要素の内容が読み上げられるかの確認。
3.3.1, 3.3.3, 4.1.3
ARIA18
<div id="alertDialog" role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText" tabindex="0">
<div id="firstElement" tabindex="0"></div>
<h1 id="alertHeading">エラー</h1>
<div id="alertText">従業員の生年月日が入社日以降になっています。生年月日と入社日を確認してください。</div>
<button id="firstButton" onclick="closeAlertDialog()">戻る</button>
<button id="lastButton" onclick="closeAlertDialog()">保存する</button>
<div id="lastElement" tabindex="0"></div>
</div>
テスト不要
なし
なし
何らかの通知の最中に「エラーメッセージが含まれるアラートダイアログを表示する」ボタンを押下し、ボタン押下後の通知内容を確認する。
通知が次の 1. 〜 4. の全てを満たすことを確認する。
「エラーメッセージが含まれるアラートダイアログを表示する」ボタンを押下後のフォーカスの位置を確認する。
フォーカスが「戻る」ボタンに当たっている。
alertdialog ロールは「ダイアログ」や「アラートダイアログ」のように通知されることがある。ダイアログであることが伝わるような何らかの通知があれば良い。
role=”alertdialog” をもつ div 要素、aria-labelledby属性、aria-describedby属性