dialog
element
dialog
element with aria-haspopup="dialog"
on button
<div id="div-01">
<button id="openDialogButton1" aria-haspopup="dialog">Open Dialog 1</button>
<dialog id="testDialog1">
<form method="dialog">
<p>Dialog content goes here.</p>
<p>
<button value="cancel">Cancel</button>
<button id="confirmButton1" value="confirm">Confirm</button>
</p>
</form>
</dialog>
</div>
dialog
element
with aria-label="Test Dialog 2"
<button id="openDialogButton2">Open Dialog 2</button>
<dialog id="testDialog2" aria-label="Test Dialog 2">
<form method="dialog">
<p>Dialog content goes here.</p>
<p>
<button value="cancel">Cancel</button>
<button id="confirmButton2" value="confirm">Confirm</button>
</p>
</form>
</dialog>
dialog
element
with aria-label="Test Dialog 3" and tabindex="-1"
<button id="openDialogButton3">Open Dialog 3</button>
<dialog id="testDialog3" aria-label="Test Dialog 3" tabindex="-1">
<form method="dialog">
<p>Dialog content goes here.</p>
<p>
<button value="cancel">Cancel</button>
<button id="confirmButton3" value="confirm">Confirm</button>
</p>
</form>
</dialog>
dialog
element
with aria-label="Test Dialog 4"
and structured text content.
<button id="openDialogButton4">Open Dialog 4</button>
<dialog id="testDialog4" aria-label="Test Dialog 4">
<form method="dialog">
<h3>Dialog Heading</h3>
<p>Some introductory text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>
<button value="cancel">Cancel</button>
<button id="confirmButton4" value="confirm">Confirm</button>
</p>
</form>
</dialog>
dialog
element
with aria-labelledby
and aria-describedby
<button id="openDialogButton5">Open Dialog 5</button>
<dialog id="testDialog5" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
<form method="dialog">
<h3 id="dialogTitle">Dialog Title</h3>
<p id="dialogDesc">This dialog has both aria-labelledby and aria-describedby attributes.</p>
<p>
<button value="cancel">Cancel</button>
<button id="confirmButton5" value="confirm">Confirm</button>
</p>
</form>
</dialog>