Skip to main content
No Result Found

region

Ensure that all content on the page is appropriately grouped within landmarks.

Severity: Moderate

Description

Landmark elements like <header>, <footer>, <nav>, <section>, etc., are essential for screen reader users as they facilitate quick navigation within the interface, provide context to content parts, and enhance understanding of the hierarchy and purpose of different content sections.

Why is it important?

Organizing web content into distinct high-level sections significantly improves navigation for screen reader users, ensuring a more intuitive experience. Difficulty arises in locating content outside these designated sections, potentially leading to a lack of clarity regarding the content’s purpose. In the past, HTML faced limitations with semantic markers for crucial page sections like the header, navigation, main content, and footer. Although combining HTML5 elements and ARIA landmarks is currently recommended for optimal accessibility, the evolving landscape leans towards prioritizing native HTML5 element regions as browser support expands.

How to fix?

Ensure that all content pieces are appropriately nested within their corresponding landmark elements. For instance, the primary navigation, logo, search components, and important call-to-actions should be placed within a <header> element (or the equivalent <div role="banner">). Secondary navigation, links to legal pages, and general information can be placed within 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">), while any supporting content that is separate from the main content can be placed within an <aside> element (or the equivalent <div role="complementary">).

References

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle