region

All page content must be contained by landmarks

Description

Screen reader users often use landmark elements for quick navigation within the interface and to perceive the context of the content parts. Having the content within landmark elements such as <header>, <footer>, <nav>, <section>, etc., lets them navigate the interface more easily and understand better the hierarchy and purpose of the various content parts.

Quick Fixes

Make sure all pieces of content are nested within appropriate landmark elements. For example, the main navigation, logo, search components, and important CTAs will fit in a <header> element (or the equivalent <div role="banner>). Secondary navigation, links to legal pages, and general information can fit in a <footer> element (or the equivalent <div role="contentinfo">). The main content of the page should be contained within a <main> element (or the equivalent <div role="main">), and any supporting content which is not part of the main content of the page will be appropriate within an <aside> element (or the equivalent <div role="complementary">).

Note that none of the above is required, and the usage of these landmarks should strive from the page structure and content.

How Users Are Affected

The user experience of navigating the interface and understanding the role of content parts will not be optimal for screen reader users.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria: N/A