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?

Screen reader users benefit from well-structured web pages with multiple sections. Content outside of sections is hard to find and may lack clarity and the screen reader users may encounter suboptimal user experience when navigating the interface and understanding the role of content parts. Historically, HTML lacked semantic markers for important sections like header, navigation, main content, and footer. While using HTML5 elements and ARIA landmarks together is recommended, the future trend is towards native HTML5 element regions as browser support improves.

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">).

Tags

cat.keyboard, best-practice

References

• Technique ARIA11
• Deque University: region