Browser interfaces · 3 / 4
Design an accessible dialog
Your challenge
Build a dismissible sign-in prompt that works with keyboard navigation, small screens and reduced-motion preferences.
Try it first. Write down your assumptions and explain your reasoning.
1.Give it a clear semantic boundary
Use a native dialog with showModal when suitable, or a tested dialog primitive. Provide a visible title and an accessible name. Background content must not remain interactive while a modal is open. A non-modal prompt should instead leave normal navigation available.
2.Manage focus deliberately
Move focus to a useful control when opening, keep Tab navigation inside a modal, support Escape and a visible close button, and restore focus to the trigger when closing. Do not open repeated prompts after dismissal during the same visit.
3.Keep the mobile interaction usable
Constrain height to the visible viewport and allow the dialog body to scroll. Keep the close button reachable, avoid horizontal scrolling and ensure controls have comfortable targets. Use a brief entrance transition and remove unnecessary motion when the user requests reduced motion. Test keyboard-only operation as well as touch.
Take it one step further
- 1.When should a prompt be non-modal?
- 2.What happens if the original trigger is removed before focus restoration?
Self-review
Can you explain each point without looking at the solution?
- Accessible name and keyboard dismissal
- Background interaction and focus restoration
- Usable viewport and reduced motion