Accompanying Files
Observation Details
The "overline" / "eyebrow" element above content headings (see attached screenshot) are not part of the heading's markup nor are they following the heading in the DOM order. As such they logically / hierarchically are part of the previous heading in the outline.
While presentation suggests the outline:
h1 Deutschlands größtes und bestes 5G-Netz
...
h2 Mehr Speed – Boostet Sie ins nächste Level
...The markup programmatically determines the eyebrow to be part of the previous heading and the outline to be:
h1 Deutschlands größtes und bestes 5G-Netz
...
Mehr Speed
h2 Boostet Sie ins nächste Level
...Remediation Notes
Headings should be the first elements within sections as they describe all following content in said section. Ensure correct content structure by outlining all sections, headings and content.
Besides a correct content structure, immediate remediation for this issue can be done in the following ways:
Create one heading out of eyebrow and heading, using
<h2>Mehr Speed – Boostet Sie ins nächste Level</h2>Move eyebrow below heading in DOM order (
<h2>Boostet Sie ins nächste Level</h2><p>Mehr Speed</p>) and visually display as eyebrow by using CSSorder: -1on the eyebrow