Modal and overlay patterns in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a modal in web design?

A modal is a popup window that appears on top of the main page content. It grabs the user's attention and requires interaction before returning to the main page.

beginner

Why do we use overlays behind modals?

Overlays dim or blur the background content to focus the user's attention on the modal. They also prevent interaction with the page behind the modal.

intermediate

How can you make a modal accessible for keyboard users?

Ensure the modal traps keyboard focus inside it, so users can tab only within the modal. Also, provide a clear way to close the modal using keyboard keys like Escape.

beginner

Which Tailwind CSS utilities help center a modal on the screen?

Use fixed to position the modal, inset-0 to cover the screen, and flex with items-center and justify-center to center the modal content.

intermediate

What is the role of aria-modal and role="dialog" in modals?

aria-modal="true" tells assistive technologies that the rest of the page is inert while the modal is open. role="dialog" identifies the modal as a dialog window for screen readers.

What does an overlay behind a modal usually do?

A Dim the background and block interaction

B Make the modal draggable

C Add animations to the modal

D Change the page title

An overlay dims the background and prevents users from interacting with the page behind the modal.

Which Tailwind class helps fix a modal to the viewport?

A static

B relative

C absolute

D fixed

The fixed class positions the modal relative to the viewport, keeping it visible when scrolling.

How should keyboard focus behave when a modal is open?

A Focus should move freely around the page

B Focus should jump to the browser address bar

C Focus should be trapped inside the modal

D Focus should be disabled

Focus trapping keeps keyboard users inside the modal until it is closed, improving accessibility.

Which ARIA attribute indicates a modal dialog?

A aria-modal

B aria-hidden

C aria-label

D aria-live

aria-modal="true" signals that the modal is active and the rest of the page is inert.

What Tailwind classes center content both vertically and horizontally?

A inline-block align-middle

B flex items-center justify-center

C grid place-items-start

D block text-center

Using flex with items-center and justify-center centers content in both directions.

Explain how to create an accessible modal using Tailwind CSS.

Think about layout, accessibility, and user interaction.

Describe why overlays are important in modal patterns and how Tailwind helps implement them.

Consider visual focus and interaction blocking.