WAIC-TEST-0089-01
HTMLのdialog要素を使用してモーダルダイアログを作成する
HTMLのdialog要素で作られたモーダルダイアログが機能するかどうかを確認する
2.4.3
H102
<body>
<main>
<h1>ターボ・エンカビュレーター ニュース</h1>
<p><button class="open-modal" type="button">メーリングリストに登録してください！</button></p>
<p><a href="https://waic.jp/">ウェブアクセシビリティ基盤委員会</a></p>
</main>
<dialog aria-labelledby="dialog-heading" id="mailing-list-dialog">
<h1 id="dialog-heading" tabindex="-1">メーリングリストに登録</h1>
<form>
<p class="req-note">すべての入力欄は必須です</p>
<div>
<label for="fname">名前(姓)</label>
<input aria-required="true" autocomplete="given-name" id="fname" type="text">
</div>
<div>
<label for="lname">名前(名)</label>
<input aria-required="true" autocomplete="family-name" id="lname" type="text">
</div>
<div>
<label for="email">メールアドレス</label>
<input aria-required="true" autocomplete="email" id="email" type="text">
</div>
<button class="sign-up" type="submit">登録</button>
</form>
<form method="dialog">
<button aria-label="閉じる" class="close-modal">×</button>
</form>
</dialog>
</body>
キーボード操作で「メーリングリストに登録してください！」ボタンを押す
「メーリングリストに登録」というモーダルダイアログが開き、フォーカスがモーダルダイアログ内に移動する
キーボード操作で、モーダルダイアログ上でフォーカスを移動する。それを繰り返す
フォーカスはモーダルダイアログ内の入力欄やボタンに移るが、モーダルダイアログの外には出ない (「メーリングリストに登録してください！」ボタンや「ウェブアクセシビリティ基盤委員会」というリンクにフォーカスが移らない)
キーボード操作で、モーダルダイアログ内の「閉じる」ボタン (見た目は「×」と表示されているボタン) を押す
ダイアログが閉じ、フォーカスが「メーリングリストに登録してください！」ボタンに移る
ダイアログ内のフォーム送信は機能せず、「登録」ボタンを押しても何も起こらないのが正しい (送信のテストは不要である)
「メーリングリストに登録してください！」ボタンを押す
「メーリングリストに登録」というモーダルダイアログが開き、フォーカスがモーダルダイアログ内に移動する
モーダルダイアログ上でフォーカスを移動する。それを繰り返す
フォーカスはモーダルダイアログ内の入力欄やボタンに移るが、モーダルダイアログの外には出ない (「メーリングリストに登録してください！」ボタンや「ウェブアクセシビリティ基盤委員会」というリンクにフォーカスが移らない)
モーダルダイアログ内の「閉じる」ボタンを押す
ダイアログが閉じ、フォーカスが「メーリングリストに登録してください！」ボタンに移る
フォーカスを移動する
「ウェブアクセシビリティ基盤委員会」というリンクにフォーカスが移る (ダイアログ内にフォーカスが移らない)
ダイアログ内のフォーム送信は機能せず、「登録」ボタンを押しても何も起こらないのが正しい (送信のテストは不要である)
dialog要素、aria-labelledby属性、aria-label属性