Accessibilityintermediate
Every input needs a label and every interactive thing needs to work from the keyboard — this is the difference between a demo and something a real person can use.
A dialog that looks right and cannot be operated. Announce it as a dialog, take focus when it opens, keep Tab inside it, hand focus back when it closes, and let Escape out.
AssumesModal DialogYou have already built this modal. Its checklist scored how it looked — this one scores whether it can be operated.
Openable, operable and escapable without a mouse, and focus is never left behind the overlay.
Published in full, before you start — every point is one of these and there is nothing else.
Every input needs a label and every interactive thing needs to work from the keyboard — this is the difference between a demo and something a real person can use.