"If the heading is in a <header> that is outside of the <main> element, it's possible that a user will completely miss the heading if they jump to the main content using a skip link. Or, a screenreader user might miss it when navigating by landmark. Of course, it's possible that there's no harm done if the first user sees the heading prior to skipping, or if the screenreader user is given the page <title> prior to jumping landmarks."
"A classic conundrum! I've seen the main page heading (<h1>) placed in all kinds of places, such as: Aside from that first one - the site title serves a different purpose than the page title - Martin pokes at the other two structures, describing how the implicit semantics impact the usability of assistive tech, like screen readers. A <header> is a wrapper for introductory content that may contain a heading element (in addition to other types of elements)."
The main page heading (<h1>) should reside within the <main> element when it labels the primary page content. A page-level <header> functions as the banner for introductory content and may contain headings, but placing the main heading there can separate it from the main landmark. Skip links and landmark navigation can cause users to miss headings that live outside <main>. Screen readers may announce banner boundaries and additional information before reaching main content, reducing clarity. Site titles serve a different purpose than page titles and should be treated separately. Consider markup structure to prioritize clear semantics for assistive technology.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]