Native Interactivity

HTML includes interactive elements with keyboard and accessibility behavior built in. Start there before creating a custom widget with JavaScript.

Disclosure with details

01<details>
02  <summary>What progress is saved?</summary>
03  <p>The current lesson and reading position are stored on this device.</p>
04</details>

summary provides the control and accessible name. The open attribute represents the expanded state.

Modal dialogs

01<button type="button" id="open-settings">Open settings</button>
02<dialog id="settings">
03  <form method="dialog">
04    <h2>Settings</h2>
05    <button value="cancel">Close</button>
06  </form>
07</dialog>

01const dialog = document.querySelector("#settings");
02document.querySelector("#open-settings")?.addEventListener("click", () => dialog?.showModal());

showModal() manages top-layer placement and focus containment. The page still needs a clear opening control, close path, useful heading, and sensible focus return.

Keep this

Prefer native controls, expose state through attributes, and add JavaScript only for the behavior HTML does not provide.