Because screen reader users rely on headings to navigate, and a clear content outline benefits all users, it is recommended to have only one level 1 heading on the page, and to organize the remaining headings in a clear hierarchy that accurately maps the structure of the content.
For the reasons mentioned above, I suggest adding <h1>
headings to all pages, as the first descendant of the <main>
element.
On the landing page, a hidden <h1>
could be used since visually the context and cues make it clear what the page is about. This can help provide context for screen reader users when they first land on the page.
<main id="main>
<h1 class="sr-only">Search the web with DuckDuckGo</h1>
</main>
On the search results page, it would be useful to dynamically set the <h1>
heading to the type of result and the search query, such as "All results for 'train tickets from Amsterdam to Brussels'" or "Video results for 'train tickets from Amsterdam to Brussels'". This heading could also be hidden from visual users.
<main id="main>
<h1 class="sr-only">Image results for ...</h1>
</main>
On the settings page, there is a visible first-level heading, but it is implemented as a level 4 heading. Skipping a header level makes navigating by headings less usable and confusing for screen reader users, so it should be changed to an <h1>
element. Additionally, the "Cloud Save" heading is also implemented as an <h1>
element, which should be changed to an <h2>
element to maintain the proper hierarchy of headings.
Heading suggestions for the settings page
<h1 class="set-head__title">All Settings</h1>
<h2 class="cloudsave__title">Cloud Save</h2>
On the landing page, there are three level 1 headings that are hidden under the “Privacy, simplified.” popover.
Unnecessary headings in the “Privacy, simplified.” popover