Although headings are the most widely known technique to label page regions (like header, navigation, etc.), there exist other ways to label content in HTML. In our opinion though, headings are both the most expressive and simple technique. But let's examine the situation a bit deeper.
Short summary
Besides traditional headings, there exists at least one other way to label regions: a combination of HTML 5 structural elements, labelled using ARIA.
In general, the use of structural elements can be fully recommended. But they are no replacement of equal value for a headings outline.
So you should always provide a proper headings outline which covers all regions on a page.
Exhaustive explanation
Using HTML 5 structural elements
Since HTML 5 there are some new containers that provide semantical context:
<header> is meant to contain header info.
For example a page's logo, slogan, etc.
<main> is meant to contain the main content of a page.
For example, on a website with cooking recipes, a page showing a single recipe would contain exactly that recipe in the <main> container (but not any additional page areas like header, navigation, or footer).
<footer> is meant to contain footer info.
For example links to a page's disclaimer, copyright info, etc.
There are a few more of those containers, like <article> or <aside>, but let's not bother about them right now.
In screen reader talk, these elements usually are called landmarks. Theoretically speaking, landmarks are a valid alternative to traditional headings when it comes to labelling page regions, as screen readers can convey them to the user.
For example, after loading a page, JAWS automatically announces how many regions there are available. And while browsing the page, entering and leaving a landmark is automatically announced, too.
<header><p>
John Doe's Web Presence
</p></header><nav><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></nav><main><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></main><footer><p>
Copyright 2057 John Doe
</p></footer>
In addition to this, many screen readers offer special features for displaying structural elements:
Even navigation between them while reading a document is easily possible:
In NVDA, press D.
In JAWS, press R.
By the way, you may have noticed already that screen readers have their own landmarks jargon: for example <header> elements are announced as "banner", and <footer> elements as "content info".
Labelling regions using ARIA
The more complex a website is, the more regions it probably has. So if you think of a website with both a user navigation (with sign up, login, etc.) and a content navigation (both marked up as <nav>), then those regions need an explicit label. Otherwise, screen reader users cannot distinguish between the two in the landmarks outline.
For labelling such a region, you can use ARIA labels.
<header><p>
John Doe's Web Presence
</p></header><navaria-label="User"class="user"><ul><li><ahref="#">Login</a></li><li><ahref="#">Sign up</a></li></ul></nav><navaria-label="Content"class="content"><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></nav><main><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></main><footer><p>
Copyright 2057 John Doe
</p></footer>
Screen readers now can display the given label in their landmarks outline.
The downsides
In current screen readers, landmarks do not add anything to the traditional heading outlines: they look identical regardless whether there are landmarks available on the page or not.
In the example above, when using a screen reader's document outline, it is impossible to navigate to any of those additional regions, as they simply do not offer any headings. So users would have to switch between heading navigation and landmarks navigation (in case they even know about their existence), puzzling the existing information together somehow and trying to make sense of them. While for basic websites this may seem acceptable, it can become extremely frustrating (if not impossible or even misleading) in more complex ones.
Another annoyance is that not all screen readers announce these elements consistently: for example, NVDA surprisingly does not announce <main>, neither while browsing the page nor in its landmarks outline.
Verdict: use plain old heading outlines
Using the document outline traditionally is the preferred navigation method by most screen reader users. So we highly suggest to always use traditional headings everywhere on your website, as seen here: Adding visually hidden headings to complete a page's outline.
Besides that, using ARIA to enhance semantics is bad practice anyway, see Bad ARIA practices.
Even better with landmarks
Having HTML 5 structural elements on the page is always a good thing, too. So a combination of both headings and landmarks is perfect:
<header><h1class="visually-hidden">
Header
</h1><p>
John Doe's Web Presence
</p></header><navclass="user"><h1class="visually-hidden">
User navigation
</h1><ul><li><ahref="#">Login</a></li><li><ahref="#">Sign up</a></li></ul></nav><navclass="content"><h1class="visually-hidden">
Content navigation
</h1><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></nav><main><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></main><footer><h1class="visually-hidden">
Footer
</h1><p>
Copyright 2057 John Doe
</p></footer>
<header><h1class="visually-hidden">
Header
</h1><p>
John Doe's Web Presence
</p></header><navaria-labelledby="user_nav_heading"class="user"><h1class="visually-hidden"id="user_nav_heading">
User navigation
</h1><ul><li><ahref="#">Login</a></li><li><ahref="#">Sign up</a></li></ul></nav><navaria-labelledby="content_nav_heading"class="content"><h1class="visually-hidden"id="content_nav_heading">
Content navigation
</h1><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></nav><main><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></main><footer><h1class="visually-hidden">
Footer
</h1><p>
Copyright 2057 John Doe
</p></footer>
This does not deliver a much better experience to screen reader users though. It may even feel a bit redundant when reading the page (as both the ARIA label and the referenced heading are announced individually, although they are the same thing).
And as screen reader users will rarely fall back on landmarks navigation when heading navigation is available, you can safely ignore this step.
