HTML Accessibility Testing for Native Dialog and Popover

Let’s take one interactive feature apart so the markup and behavior make sense separately.

What You Need to Know

Testing a dialog or popover includes more than opening it. Check focus placement, keyboard navigation, Escape or dismissal behavior, screen-reader names, and where focus returns afterward.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<button type="button" id="show-options">Choose a setting</button>
<dialog id="options-dialog">
    <h2>Settings</h2>
    <form method="dialog"><button value="done">Done</button></form>
</dialog>
<script>
    document.querySelector("#show-options").addEventListener("click", () => {
        document.querySelector("#options-dialog").showModal();
    });
</script>

Let’s Read the Code

<button>: The button offers an action; its type or command determines what happens.
<dialog>: Dialog provides a browser-managed dialog container; modal display may need showModal or a supported command.
type: Type changes what sort of control or resource the browser uses.
id: An id uniquely identifies an element on this page.

What the example shows: Testing should cover opening, moving focus within the dialog, pressing Escape, closing, and focus restoration.

What Happens in the Browser?

When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.

What makes it interactive? Look for the JavaScript that finds an element and reacts to an event. HTML provides the initial controls and content; the script updates the page. Try removing the script to see which part still works natively.

Your Turn

Create a checklist with focus, Escape, screen reader title, and return focus.

Common Beginner Mistakes

Assuming new HTML syntax works in every browser without testing.
A working mouse click does not prove keyboard or assistive technology support.

Key Takeaways

Testing a dialog or popover includes more than opening it.
<button>: The button offers an action; its type or command determines what happens.
A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.