MoreLesson 165Free preview

Modal Boxes

This lesson is part of How To · All levels

Summary

This lesson discusses capital, the layer of dialogue that appears at the top of the page to ask for attention or input. A good capital has an overlay, a title, a shutter button, as well as a focus that gets caught in the dialogue during the open. HTML-built dialog elements or special implementations with ARIA can be used.

Key points

Use the role="dialog" and aria-modal="true" on custom capital, and link the title to the aria-labelledby
Move the focus to the capital when it opens and return to the trigger button when it closes.
Allow closure with the close button, click overlay, and the Escape button
Stop scrolling the page behind the capital and don't hide the shut button from the keyboard

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.