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