HTML & CSS · Senior · Question 34 of 75
What is the minimum required for an accessible modal dialog?
- 1
z-index: 9999, a dimmed backdrop and a close button are enough - ✓Correct answer: Focus moved inside and trapped, Esc, focus restored, inert background
- 3
aria-hidden="true"on the modal itself plusrole="alert"
Explanation
Keyboard and screen reader users must get into the modal, not "fall out" of it with Tab, close it and return where they were. A native <dialog> with showModal() does most of this: the background becomes inert, Esc closes it, focus moves. You also need a label via aria-labelledby. aria-hidden on the modal would hide it from screen readers instead.