How should I handle headings in a modal?

Question

How should I handle headings in a modal? What level should I start with?

Answer

Heading structures in modals should start from level two.

There should only be a single level one heading on each page, so starting at level one in a modal is not appropriate.

Also, since a modal is showing new content separate from the page behind it, the heading structure should not be a subset of the main page heading structure. For example, if the modal content is triggered in a section with a level two heading, the modal headings would not start at level three. Rather, they would start at level two.

Proper heading structure in modals is especially important for users of assistive technology. Since users are not able to navigate away from the modal, the headings must have the appropriate level based on the informational hierarchy of the content currently being displayed.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.