A11y Front-end Roadmap #2 - Regions
Improve your webpage by structuring its main areas logically.
Let's start defining the structure of our project, including main navigation, content area, disclaimers, copyrights, logos, and more. In doing so, we will define all the basic “regions”.
1. Key Semantic HTML Tags for Regions
Below are essential semantic HTML tags that define the various regions of a webpage. Each plays a specific role in organizing content and enhancing accessibility. For better compatibility with technologies that support WAI-ARIA but not HTML5, it's advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles (as suggested by WAI-ARIA).
1.1 - Header
Tag: <header>
Role: banner
Purpose: Defines the introductory content or navigational links for a document or section. When referred to a document/page as a whole, it typically contains the site title, logo, and main navigation.
1.2 - Navigation
Tag: <nav>
Role: navigation
Purpose: Represents a portion of the page intended for navigation links. Using this tag helps users understand where they can find other sections of the website.
Attribute: Since a document can have multiple navigation regions, remember to label each one with the “aria-label” attribute or another labeling technique (like “aria-labelledby” and an element with the specified id).
1.3 - Main Content
Tag: <main>
Role: main
Purpose: Indicates the dominant content of the <body>—the main focus of the document. There should only be one <main> element per page to highlight the primary content area.
1.4 - Aside
Tag: <aside>
Role: complementary
Purpose: Contains content that is tangentially related to the main content, such as sidebars or pull quotes. It provides supplementary information that might be interesting but is not essential to the main content.
1.5 - Footer
Tag: <footer>
Role: contentinfo
Purpose: Defines the footer, usually containing site-wide information, such as copyright information, disclaimers, links to related documents, or contact information.
2. Semantic HTML Structure Example
To illustrate the use of semantic HTML tags, here’s a simple example of a webpage structure that employs these tags effectively. Here, only the <body> content is given, as the basic page boilerplate has already been described earlier:
<body>
<a href="#main-content">Go to main content</a>
<header role="banner">
<img id="site-logo" alt="Another Coding Guy" src="images/logo.png">
<nav role="navigation" aria-label="Main Navigation">
...
</nav>
</header>
<main id="main-content" role="main">
...
<aside id="related-links" role="complementary">
...
</aside>
</main>
<footer role="contentinfo">
...
</footer>
</body>
Note on Bypass Link
In the previous example, you can notice an anchor labeled “Go to main content”: this is the simplest way to implement the “bypass” requirement, a mechanism to bypass blocks of content that are repeated on multiple web pages, allowing to jump straight to the main content of a page. You can read more about this topic in the article Skip links: straight to the point.