Accompanying Files
Observation Details
The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure includes:
1 Vertrag verlängern
2 Vertrag verlängern
2 Tarif wechseln
2 Top-Smartphones zum Spitzenpreis
3 Samsung Galaxy S25 Ultra
3 ...
2 MagentaEINS-Vorteil
2 Apple und Telekom im besten Netz
2 Unser Dankeschön für Sie:
2 Sie möchten eine persönliche Beratung?
3 Telekom Shops in Ihrer Nähe
3 Magenta Service Live
2 Häufig gestellte Fragen rund um die Telekom Vertragsverlängerung
3 Sie möchten Ihren Mobilfunktarif wechseln?
3 ...The programmatically determinable heading structure, using HTML heading elements is limited to the FAQ section.
Observations for heading structure:
The main heading "Vertrag verlängern" is not using an
<h1>element.The
<h1>element instead is used on the FAQ section at the end of the page.Headings do not use semantic HTML elements (
<h1>,<h2>,<h3>, ...). They are using more generic (<span>) or even wrong (<p>) HTML elements and add CSS classes to style them so they look like headings."Vertrag verlängern" heading is duplicated
"Vertrag verlängern" & "Tarif wechseln" are presented as a group of headings but do not have a parent heading to group them
"MagentaEINS-Vorteil" & "Apple und Telekom im besten Netz" are presented as a group of headings but do not have a parent heading to group them
The sections "Top-Smartphones zum Spitzenpreis", "MagentaEINS-Vorteil" & "Apple und Telekom im besten Netz", "Unser Dankeschön für Sie:" do not show their relevance to the page's topic and do not fit the general outline of the page as they function as a group but are not grouped
("Unser Dankeschön für Sie:" uses a colon ":"; best practice is to not use punctuation (except "!" and "?") in headings. If the use of punctuation is necessary, there probably is an issue with either styling or outline structure)
Remediation Notes
Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.
Taking the presented headings and building a better outline could look like this:
1 Vertrag verlängern
2 Was möchten Sie tun?
3 Vertrag verlängern
3 Tarif wechseln
2 Ihre Vorteile bei einer Vertragsverlängerung
3 Top-Smartphones zum Spitzenpreis
4 Samsung Galaxy S25 Ultra
4 ...
3 MagentaEINS-Vorteil
3 Apple und Telekom im besten Netz
3 Unser Dankeschön für Sie:
2 Sie möchten eine persönliche Beratung?
3 Telekom Shops in Ihrer Nähe
3 Magenta Service Live
2 Häufig gestellte Fragen rund um die Telekom Vertragsverlängerung
3 Sie möchten Ihren Mobilfunktarif wechseln?
3 ...This creates a good, scannable base outline of the page, representing the most important sections and grouping existing content within this structure:
2 Was möchten Sie tun?
2 Ihre Vorteile bei einer Vertragsverlängerung
2 Sie möchten eine persönliche Beratung?
2 Häufig gestellte Fragen rund um die Telekom VertragsverlängerungSide note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.