Mark up different regions of web pages and applications, so that they can be identified by web browsers and assistive technologies.
Most websites have a region at the top of every page that contains site-wide information, such as the website logo, search function, and navigation options. HTML5 provides the
<header> element, which can be used to define such a region.
Note: If the
<header> element is used inside
<section> elements, it is not associated with the whole page, but only with that specific
Similar to the page header, most websites also have a region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. HTML5 provides the
<footer> element, which can be used to define such a region.
Note: If the
<footer> element is used inside
<section> elements, it is not identified as the footer for the whole page but only relates to that specific
<nav> element can be used to identify a navigation menu. A web page can have any number of navigation menus. Use labels to identify each navigation menu.
Use the HTML5
<main> element to identify the main content region of a web page or application.
Use the HTML5
<aside> element to identify regions that support the main content, yet are separate and meaningful sections on their own; For example, a side note explaining or annotating the main content.
Page Regions in HTML5 Using WAI-ARIA
Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles.
Page Regions in HTML4 Using WAI-ARIA
If HTML5 cannot be used or if an HTML4 page is retrofitted to improve accessibility, add WAI-ARIA code to
div elements that function as their HTML5 counterparts, for example:
Related WCAG resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)