463: All about modals with Elaina Natario

What It Covers

Thoughtbot designer Elaina Natario explains when to use modals versus separate pages in web applications, covering the HTML dialogue element's accessibility features, common design pitfalls, and best practices for implementation.

Key Questions Answered

• •Default to separate pages: Modals should only be used when page context is critical to the task, like adding table rows with many hidden fields. Otherwise, navigate to standalone pages to avoid shoehorning content into overlays unnecessarily.
• •HTML dialogue element advantages: The native dialogue element automatically traps keyboard focus within the modal, includes implicit ARIA roles, and provides open/close methods. It gained full browser support in 2022 after a decade of partial implementation across browsers.
• •Progressive enhancement pattern: Start by building standalone pages first, then add JavaScript to convert links into modal triggers. This allows command-clicking for new tabs, maintains URL sharing capability, and enables faster iteration without sacrificing core functionality.
• •Avoid interruptive patterns: Modals that appear without user interaction create poor experiences and qualify as dark patterns, especially when close buttons use low-contrast colors or unusual positioning. Always provide clear, accessible exit mechanisms including escape key support.