HTML HTML Component Exercise: Accessible Settings Dialog

Small interactions can make a webpage easier to use: opening a tip, changing a setting, or reusing an interface component.

What You Need to Know

A settings dialog is a short task with a name, clear controls, and predictable buttons. Use native dialog and forms when possible, then test keyboard focus carefully.

Try the Example

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

<button type="button" id="open-settings">Open settings</button>
<dialog id="settings-dialog">
    <h2>Settings</h2>
    <label for="theme">Theme</label>
    <select id="theme"><option>Light</option><option>Dark</option></select>
    <form method="dialog"><button>Close settings</button></form>
</dialog>
<script>
    document.querySelector("#open-settings").addEventListener("click", () => {
        document.querySelector("#settings-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: The dialog groups a small settings task with a heading, a native select, and an explicit close button.

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

Add a checkbox and test both controls using keyboard only.

Common Beginner Mistakes

Assuming new HTML syntax works in every browser without testing.
Saving the selected setting needs application code; opening and closing is not the same as persistence.

Key Takeaways

A settings dialog is a short task with a name, clear controls, and predictable buttons.
<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.