region

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

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

• Technique ARIA11