Accessible Modals

An accessible modal is a pop-up dialog that traps keyboard focus inside itself while open, closes on the Escape key, returns focus to the element that opened it, and announces itself to screen readers using the native <dialog> element or proper ARIA roles.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll build a real, keyboard-friendly modal with the native element — focus trapped inside, Escape to close, focus returned to the trigger, and the page behind it locked.

Think of a modal as the passport-control booth at an airport. While you're at the booth, you can't wander off — the queue behind you is roped off (that's the backdrop ), you can only interact with the booth in front of you ( focus trapping ), and there's one clear way to leave (the officer waves you through, or you step back — that's Escape and the close button ). When you're done, you walk back to exactly where you were standing ( focus return ). The native element is a booth with all of that built in. Building a modal out of a plain is roping off the area yourself with no officer, no rope, and no exit sign — you have to construct every safety feature by hand, and beginners always miss one.

A modal is a window that appears on top of the page and demands attention before you can do anything else. For years, developers built them from a and then had to hand-write four hard things: trapping focus (the highlighted element keyboard users act on), handling the Escape key, adding ARIA roles so screen readers announce it, and dimming the rest of the page. Miss any one and you've shipped an inaccessible modal.

The native element does all four for you. When you open it with showModal() the browser traps focus (Tab cycles inside the dialog and never reaches the page), closes it on Escape , exposes role="dialog" and aria-modal="true" automatically, and paints a ::backdrop overlay while making the rest of the page inert (unclickable, untabbable). Your only jobs are to give it an accessible name with aria-labelledby , return focus to the trigger on close, and optionally lock scrolling.

One detail that trips everyone: show() and showModal() are not the same. show() opens a non-modal popup with no backdrop, no focus trap, and no Escape. showModal() is the one that gives you a real, accessible modal — use it every time you mean "modal".

1. The smallest correct modal

Read every comment, then run it. Click Open Modal , press Tab a few times (focus stays inside), and press Escape (it closes). All of that came from + showModal() — you wrote almost no behaviour code.

2. Returning focus and locking scroll

This adds the two things leaves to you: returning focus to the trigger when the modal closes, and locking background scroll while it's open. Notice the single close event handler does the cleanup — so it runs whether the user clicked a button, clicked the backdrop, or pressed Escape.

3. 🎯 Your turn: make it a real modal

Give the dialog an accessible name, open it as a true modal, and close it from the button. Each ___ has a 👉 hint right beside it, and the expected behaviour is in a comment at the bottom.

4. 🎯 Your turn: focus return + form auto-close

Make the form close the dialog on submit with method="dialog" , then return focus to the trigger in the close handler. Check your work against the ✅ Expected comment.

5. Mini-challenge: a delete confirmation

No blanks this time — just a comment outline. Build a "Delete item?" modal from scratch: native , showModal() , two buttons that close() , focus returned on close, and your own ::backdrop styling. The expected behaviour is listed in the comments.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary