175 issues found for 1.3.1 Info and Relationships

The heading "Weltweit online ohne Risiko:" introduces the content below itself including the comparison table for "Pässe & Optionen". This relationship between heading and content is not matching.

The list "So aktivieren Sie Datenroaming im Ausland" is not using the semantic HTML elements for ordered lists (<ol> & <li>). Issues arise:

• User cannot know the number of list items (steps)

• Numbers are shown and announced by assistive technology as text

There is visually emphasized content (bold & italic) throughout the website, using <i> & <b>. Those elements should not be used to emphasize text content as they do not programmatically communicate the emphasis.

HTML element <br> is used inside a paragraph. Line break elements are announced by screen readers as "empty group". Line break elements must not be used for structure or layout purposes.

The results table of the Partnernetze input element is this played as a table. It however, does not use the semantic HTML table element (<table>). The mismatch of visually displayed information and programmatically accessible structure results in the failure of this success criterion.

Not using the table element for tabular data also makes it hard for screen reader uses to navigate the results.

Headings "MagentaMobil Prepaid Tarife" (<h1>) and "Rufnummer vom Wettbewerber mitnehmen und 10 € Wechselbonus sichern.*" (<h2>) are not visually identifiable as headings.

Instead, non-heading text content (<p>) is used as the actual visual heading.

Beware, heading structure / outline of a page is very much the most used method for screen reader users to navigate web pages. See WebAIM Web Accessibility Survey, making a good outline the absolute basis of delivering an accessible web page.

• Multiple <h1> found

• Empty <h1> found

• All content is below <h2>, rendering the <h1> useless

Visually, we find a heading structure in the upper page area as follows:

1 UNLIMITED
  2 Die neuen Samsung Galaxy Highlights

In code, we find the following heading structure:

1 Aktuelle Angebote & Aktionen
  2 Die neuen Samsung Galaxy Highlights

Content that is visually displayed as the main heading is no heading at all, and the main heading is significantly less visually prominent than the heading level 2.

Heading structure is as follows:

1 Aktuelle Angebote & Aktionen
  2 Die neuen Samsung Galaxy Highlights
  2 YoungAngebot
    3 MeinMagenta App
    3 Magenta Moments
    3 Handy­versicherung
  2 Entdecken Sie unsere Telekom-Aktionen

Nesting <h3> headings under "YoungAngebot" heading does not appropriately introduce the following contents.

The on-page navigation carousel

• uses headings. Those are the same headings as the actual sections on the page. Duplicating headings will inevitably create accessibility issues.

• is nested under "Rufnummer vom Wettbewerber mitnehmen und 10 € Wechselbonus sichern.*" heading

The complete heading structure is hidden inside a collapsible, not at all representing the visually displayed outline.

Not a single heading is using semantic HTML heading elements and all semantic HTML heading elements are used on non-heading text.

Keep in mind, this "trick" might have worked in SEO years ago, but will de-rank the page in search engines. Accessibility will always be good for SEO.

Headings do not use semantic HTML elements (<h1>, <h2>, <h3>, ...). They are visually displayed within images.

The device list presentation suggests the code to be marked up like this:

<!-- Device list -->
<div>
  <!-- Device card -->
  <article>
    <span><!-- Badge --></span>
    <img /><!-- Device image -->
    <h2><!-- Device name --></h2>
    <p><!-- Storage --></p>
    <p><!-- Price info --></p>
    <p><!-- Price --></p>
  </article>

  <!-- More device cards -->
</div>

Instead, there are no headings, sections, articles, divs and spans are nested many hierarchy levels and an empty link is present.

The sidebar section "Vorteile im Überblick" uses visual presentation (and CSS classes) of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

This observation is a general remark on semantic HTML, as there are numerous issues with improper use (or complete lack of use) of semantic HTML. Listing these issues in single observations would make that list unusable. At this stage, an accessibility auditor would usually stop the auditing and wait for general improvements from development to go ahead.

I will not list every issue in here. I will list –in no particular order– issues with semantic HTML in the remediation notes.

The sidebar section "Ich möchte" uses visual presentation of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

The section "Verlässlicher Service rund um Ihre Bestellung" arguably houses a list of services but is not using semantic HTML list elements. While this is not a strict failure of this success criterion, remediation is recommended.

The section "Verlässlicher Service rund um Ihre Bestellung" arguably houses a list of services but is not using semantic HTML list elements. While this is not a strict failure of this success criterion, remediation is recommended.

The FAQ section houses at least one empty <p> element (class names for reachability: sc-feUZmu ibaGoG).

Paragraphs have an ARIA role paragraph always making them be announced by screen readers. Empty paragraph elements lead to the announcement of "empty group".

Paragraph elements must never be empty.

The navigational items in the device category list above the page's main heading are not using semantic HTML navigation element <nav>.

Headings do not use semantic HTML elements (<h1>, <h2>).

Visually presented, we can identify the following heading structure:

1 Alles rund um die Telekom Tarife
  2 MagentaMobil
  2 MagentaZuhause
  2 MagentaTV
  2 MagentaEINS
  2 MagentaMobil Prepaid
  2 Young Tarife
  2 Glasfaser-Tarife
  2 MagentaMobil Data
  2 Zusatzkarten
  2 Häufig gestellte Fragen zu unseren Telekom Tarifen
    3 Telekom Tarife
      4 Was ist der billigste Tarif der Telekom?
      4 Welche Telekom Tarife sind am beliebtesten?
      4 Welcher Telekom Vertrag ist der beste?
      4 Was ist das Besondere bei Telekom Tarifen?

The code markup however shows the actual heading structure to be:

1 Telekom Tarife
  2 Alles rund um die Telekom Tarife
    3 MagentaMobil
      4 Mit den Telekom Tarifen ...
    3 MagentaZuhause
      4 Bequem zu Hause im Festnetz ...
    3 MagentaTV
      4 Erleben Sie Entertainment zu Hause und unterwegs ...
    3 MagentaEINS
      4 Kombinieren Sie ganz einfach Ihre Telekom Tarife ...
    3 MagentaMobil Prepaid
      4 Sie möchten unbeschwert telefonieren und surfen, ...
    3 Young Tarife
      4 Mit den Telekom Tarifen für junge Leute ...
    3 Glasfaser-Tarife
      4 Mit den Telekom Tarifen für Glasfaser ...
    3 MagentaMobil Data
      4 Wenn Sie Tablet oder Laptop ...
    3 Zusatzkarten
      4 Haben Sie bereits einen Telekom Tarif ...
  2 Häufig gestellte Fragen zu unseren Telekom Tarifen
    3 Was ist der billigste Tarif der Telekom?
    3 Welche Telekom Tarife sind am beliebtesten?
    3 Welcher Telekom Vertrag ist der beste?
    3 Was ist das Besondere bei Telekom Tarifen?

The toggle switch "Ich bin unter 28 Jahre alt" does not use semantic HTML elements for a toggle switch. The switch functions as a link. The markup does not reflect this.

• Presented as toggle switch

• Functions like a link

• Marked up without any interactive elements

Code for the link is:

<span class="co-ab_outerWrapper co-ab_outerWrapper--desktop">
  <span class="co-ab_ageToggleWrapper">
    <div class="co-ab_ageToggle_textWrapper">
      Ich bin unter 28 Jahre alt
      <div>&nbsp;</div>
    </div>
    <span class="co-ab_ageToggle_switchWrapper">
      <span class="co-ab_ageToggle_switchStyle"></span>
    </span>
  </span>
</span>

League logos are presented as list of leagues but not marked up as such.

Semantic HTML list elements must only be used for actual list content. Lists are used in various places as

• class="container-grid--list"

• class="ButtonGroup__items..."

• class="flickity-page-dots"

All those do not have list content and as such must not use list elements.

Lists are used to structure page content. They are an effective method of navigating a page, skipping certain parts, etc. Mis-using list elements for non-list content will make it harder for certain user groups to navigate a page.

Line break elements <br> must not be used for styling or layout purposes.

<p class="Price__text___2M42_">ab dem 13. Monat 44,99 € mtl. <br></p>

"Alle Paketdetails anzeigen" opens a dialog window. Actions should be initiated by buttons, not by links. Use links only for link content.

No main landmark found as child of body element. Use landmarks to help users navigate the broad structure of the page.

Markup uses heading, then a fieldset with legend, and two labels for the two options. While necessary labels are accessible (2.4.6 Headings and Labels) there is a lot of markup that makes it very complex. The current markup, using a screen reader, leads to four announcements of text "Hast du einen Telekom Festnetz- & Internetanschluss?".

The non-semantic HTML element <b> is used to bolden text content. Emphasizing text content should only be done by using semantic HTML elements like <strong> and <em>, as those can be read and communicated by assistive technology.

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

• The page uses HTML list elements for non-list content. See class="container-grid--list". E.g. stage section with main heading.

• On the other hand, what is arguably list content in the "Tarife" carousel (Handyverträge, Datentarife, ...), is not using semantic list elements.

• Also, while the section "Warum Mobilfunk von der Telekom? Ganz einfach!" again uses a list element for non-list content, the actual lists inside the section (checkmark lists) are built with HTML paragraphs.

• The page uses HTML list elements for non-list content. See class="container-grid--list". E.g. stage section with main heading.

• On the other hand, what is arguably list content in the "Die Sportoptionen im Überblick" section, is not using semantic list elements.

Content, used as headings, is not using semantic HTML heading elements. Content that does use semantic HTML heading elements then is not used as headings. This mismatch renders the page completely inaccessible and unusable for certain people.

The perceived visual heading structure of the page is:

h1 Live-Sport bei Magenta TV
  h2 Welchen Sport wollen Sie live bei MagentaTV sehen?
  h2 Die Sportoptionen im Überblick
    h3 MegaSport 12M Option
    h3 WOW Live-Sport by Telekom 12M Option
    h3 DAZN by Telekom Option
    h3 MagentaSport
  h2 Mehr EM ging nicht!
  h2 Das Telekom Sport-Angebot: Fußball, Eishockey & mehr
  h2 Häufig gestellte Fragen rund um Sport bei MagentaTV
    h3 Was beinhalten die Telekom Sport-Angebote auf MagentaTV?
    h3 Wie funktioniert Sport bei der Telekom?
    h3 Wie kann ich die Sport-Inhalte der Telekom empfangen?
    h3 Muss ich Telekom Kunde sein?
    h3 Was ist der Telekom Login?

The code structure however removes all essential functionality of the page, only keeps "SEO content" with FAQ section and even uses a heading element for body copy.

h1 Das Telekom Sport-Angebot: Fußball, Eishockey & mehr
  h2 Erleben Sie Ihre Lieblingssport-Inhalte jederzeit und überall. 
     Der ganze Live-Sport von WOW, DAZN und MagentaSport an einem Ort mit MagentaTV.
  h2 Häufig gestellte Fragen rund um Sport bei MagentaTV
    h3 Was beinhalten die Telekom Sport-Angebote auf MagentaTV?
    h3 Wie funktioniert Sport bei der Telekom?
    h3 Wie kann ich die Sport-Inhalte der Telekom empfangen?
    h3 Muss ich Telekom Kunde sein?
    h3 Was ist der Telekom Login?

"Exklusiver Live-Sport von Sky Sport mit WOW, DAZN und MagentaSport in einem Paket." in section "Das komplette Sport Programm" is using <h3>. It however is visually presented and also functions as body copy.

• The page uses HTML list elements for non-list content. See class="container-grid--list". E.g. stage section with main heading.

• On the other hand, what is arguably list content in the "Das komplette Sport Programm" section or the list in FAQ element "Wie kann ich die MegaSport Option nutzen?", is not using semantic list elements.

The main heading "MegaSport" is visually hidden using CSS styles opacity:0;position:absolute;left:0;top:0. It then is visually replaced by two images: "Mega Logo" & "Sport Logo".

• The page uses HTML list elements for non-list content. See class="container-grid--list". E.g. stage section with main heading.

• On the other hand, what is arguably list content is not using semantic list elements. Examples are:

  • the "Das komplette Sport Programm" section

  • the lists in FAQ element "Was kostet MagentaSport?"

  • the phone numbers in FAQ element "Wie kann ich MagentaSport buchen?"

The line break element <br> is used to create new lines. Line break elements do get announced by assistive technology as "empty group", making it less pleasant to navigate a page that uses them for layout purposes. Also, design-wise, a manual line break will inevitably create text content reflow issues.

Visually presented heading structure does not match semantically determinable heading structure in order and markup. Visually presented heading structure is:

h1 Internet of Things
  h2 Was ist IoT?
  h2 Profitieren Sie mit unseren Internet‑of‑Things-Produkten
    h3 Die Kids Watch für die Sicherheit Ihres Kindes 
    h3 Die Anio 6 als sicherer Alltagsbegleiter für Kinder 
  h2 Das sollten Sie zum Thema IoT wissen
    h3 ...

While the determinable heading structure in code markup is as follows:

h1 Was ist IoT?
  h2 Profitieren Sie mit unseren Internet‑of‑Things-Produkten
    h3 Die Kids Watch für die Sicherheit Ihres Kindes 
    h3 Die Anio 6 als sicherer Alltagsbegleiter für Kinder 
  h2 Das sollten Sie zum Thema IoT wissen
    h3 ...

The visually used main heading "Internet of Things" is not at all part of the determinable heading structure.

Heading structure as per code markup:

h1 Wie funktioniert die Kids Watch?
  h2 Die sichere GPS-Telefonuhr für Ihr Kind
  h2 Eine Kinder Smartwatch - drei Farben
  h2 Was Eltern über die Kids Watch XPLORA X6 Play eSIM sagen:
  h2 Die GPS-Smartwatch für Kinder
  h2 Sichere Bereiche für Ihr Kind durch GPS-Tracker
  h2 Kinder Smartwatch mit Schulmodus
  h2 SOS-Taste der Kids Watch
  h2 Datenschutz
  h2 Die erste Smartwatch mit eSIM für Kinder
  h2 GPS-Kinderuhr mit Schrittzahler
  h2 Kids Watch: So einfach geht's
  h2 Kids Watch: So einfach geht's
  h2 XPLORA X6 Play eSIM - Technische Daten
    h3 Wasserbeständig
    h3 Akkulaufzeit
    h3 Speicher
    h3 Geeignet für
    h3 SOS-Taste
    h3 Funktioniert in
    h3 Gewicht
    h3 Abmessungen (mm)
  h2 Neugierig auf eine andere Kinderuhr mit GPS und Telefonfunktion?
  h2 Kids Watches im Vergleich
  h2 Fragen & Antworten zur Kids Watch
    h3 Was ist die XPLORA X6 Play eSIM Smartwatch?
    h3 Warum braucht Ihr Kind eine Smartwatch mit GPS-Tracker?
    h3 Wie genau ist die GPS-Ortung Ihrer Kinder mit der XPLORA X6 Play eSIM Smartwatch?
    h3 Warum wird für die Kids Watch ein Mobilfunktarif benötigt?
    h3 Ist die Kids Watch staub- und wasserdicht?
    h3 Welche Rechte haben Sie als Administrator?
    h3 Was ist der Vorteil der eSIM?

Observations for this heading structure:

• Heading structure main heading "Wie funktioniert die Kids Watch?" & "Die sichere GPS-Telefonuhr für Ihr Kind" does not match visual presentation

• Most headings level 2 (see example screenshot "Eine Kinder Smartwatch - drei Farben") add an "eyebrow" / "topline" above the heading; visual presentation implies a connection of heading and eyebrow, while markup adds eyebrow to the previous heading every time, removing the implied connection

• Heading "Kids Watch: So einfach geht's" is duplicated in code

• Content in section "XPLORA X6 Play eSIM - Technische Daten" uses headings level 3 while being displayed as list content

Heading structure as per code markup:

h1 Wie kann die Safety Watch als Gesundheitsuhr bei chronischen Krankheiten helfen?
  h2 Funktionen der Safety Watch
  h2 Gesundheitsuhr mit Notfallknopf
  h2 Gesundheitsuhr mit automatischer Sturzerkennung
  h2 Pulsmesser
  h2 Safety Watch als Fitnessuhr
  h2 Gesundheitsuhr mit Telefonfunktion
  h2 Gesundheitsuhr mit Standortubermittlung
  h2 Mobiler Notruf mit JohanniterCall
  h2 So hilft die Safety Watch bei chronischen Krankheiten
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Epilepsie helfen kann
    h3 Wie hilft eine Safety Watch Epileptikern im Alltag?
    h3 Wie kann eine Gesundheitsuhr bei Epilepsie unterstützen?
    h3 Warum ist eine Gesundheitsuhr wie die Safety Watch für Epileptiker besser geeignet als ein Fitnesstracker?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Asthma helfen kann
    h3 Sollte ich trotz Asthma Sport treiben?
    h3 Wie kann die Safety Watch bei einem Asthma-Notfall helfen?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Diabetes helfen kann
    h3 Wie kann die Safety Watch Diabetikern bei einer Unterzuckerung helfen?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Multiple Sklerose helfen kann
    h3 Wie kann die Safety Watch für mehr Sicherheit bei MS-Patienten sorgen?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Bluthochdruck und Herz-Kreislauf-Erkrankungen helfen kann
    h3 Wie kann die Safety Watch Menschen mit einem erhöhten Risiko für Schlaganfälle oder Herzinfarkte helfen?
  h2 Safety Watch: Individualität in zwei Farben
  h2 Technische Daten
    h3 Wasserdicht
    h3 Akkulaufzeit
    h3 SOS-Taste
    h3 Funktioniert in
    h3 Speicher
    h3 Geeignet für
    h3 Gewicht
    h3 Abmessungen
  h2 Kostenlose App
  h2 TCL Connect App herunterladen
  h2 So funktioniert die Safety Watch
  h2 Weitere Fragen & Antworten zur Safety Watch
    h3 Warum ist die Akkulaufzeit der Safety Watch im Vergleich zu einem Fitnesstracker (z. B. fitbit) relativ kurz?
    h3 Werden der Puls und die Schritte permanent live gemessen und an die App übertragen?

Observations for this heading structure:

• Heading structure main heading does not match visual presentation

• Heading "Funktionen der Safety Watch" uses heading level 2; "Funktion" headings below also use heading level 2 instead of level 3

• Heading "So hilft die Safety Watch bei chronischen Krankheiten" uses heading level 2; "Chronische Krankheiten" headings below also use heading level 2 instead of level 3

• Most headings level 2 (see e.g. "Gesundheitsuhr mit Notfallknopf") add an "eyebrow" / "topline" above the heading; visual presentation implies a connection of heading and eyebrow, while markup adds eyebrow to the previous heading every time, removing the implied connection

• Content in section "Technische Daten" uses headings level 3 while being displayed as list content

• A few headings of sections "Chronische Krankheiten" do use heading level 2 for "Wie eine Smartwatch mit Gesundheitsfunktionen bei X helfen kann" then also include a sub-heading "Wie kann die Safety Watch bei X helfen" basically as a duplicate

• Heading "TCL Connect App herunterladen" is part of "Kostenlose App" but is on same heading level

• Heading level 2 "So funktioniert die Safety Watch" is redundant to "Funktionen der Safety Watch" and also redundant to the page's main heading, as this is the topic / purpose of the whole page

List content uses generic container elements and numbered icon graphics to simulate list.

List content uses generic container elements and numbered icon graphics to simulate list.

Stage section "Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion" & "Was ist die Safety Watch?" is visually presented as headings but not using HTML heading elements.

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)

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

Semantic elements:

• <p>&nbsp;</p>

• <br>

• ...

Non-semantic empty elements:

• <div>&nbsp;</div>

• <div class="leftFade"></div>

• <div class="rightFade"></div>

• ...

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

Elements found:

• <br> (FAQ item "Wie steht es mit der Sicherheit bei Internet of Things?")

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

• Line break elements found in FAQ item "Was beinhalten die Telekom Sport-Angebote auf MagentaTV?"

Elements found:

• <b> for emphasized text content

These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

This occurs in two "directions". Visually presented as X, using element Y, and using element X, while content is non-X content. The former includes:

• Links, using HTML elements other than <a href="">

• Buttons, using HTML elements other than <button>

• Input elements, not using appropriate semantic HTML elements for e.g. selects or text inputs with type attributes

• Headings, using HTML elements other than <h1> - <h6>

• Lists, not using <ul>, <ol>, <dl>

• ...

The latter includes, using semantic HTML elements for content that does not fit the semantically conveyed role of that element, includes:

• Lists for non-list content

• Headings for non-heading content

• ...

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Magenta Sport: Live-Sport überall streamen
  h2 Alle Angebote im Überblick
  h2 Das ganze Sporterlebnis bei MagentaSport
    h3 Alle Spiele live und auf Abruf – auf jedem Gerät
    h3 Der Highlight-Ticker der 3. Liga, Coupe de France und PENNY DEL
  h2 Der komplette Live-Sport in einem Paket
  h2 Häufig gestellte Fragen zu MagentaSport
    h3 Was kostet MagentaSport?
    h3 Wie kann ich MagentaSport buchen?
    h3 Welche Sportarten enthält MagentaSport?
    h3 Auf wie vielen Geräten kann ich MagentaSport nutzen?

The programmatically determinable heading structure, using HTML heading elements is as follows:

<H1> MagentaSport: Alle Angebote im Überblick
  <H2> Das ganze Sporterlebnis bei MagentaSport
    <H3> 3. Liga Hidden
    <H3> PENNY DEL Hidden
    <H3> Google Pixel Frauen-Bundesliga Hidden
    <H3> Turkish Airlines EuroLeague Hidden
    <н3> BKT EuroCup Hidden
    <H3> Basketball-Länderspiele Hidden
    <H3> FIBA EuroBasket 2025 Hidden
    <H3> FIBA Women's EuroBasket 2025 Hidden
    <H3> FIBA Länderspiele Hidden
    <H3> Eishockey-Länderspiele Hidden
    <H3> IIHF Weltmeisterschaften Hidden
    <H3> Champions Hockey League Hidden
    <H3> Deutscher Hockey Bund Hidden
    <H3> EuroHockey Championships 2025 Hidden
    <H3> FIH Hockey Pro League Hidden
    <H3> EuroHockey Indoor Championship 2026 Hidden
    <H3> Coupe de France Hidden
    <H3> Sportdigital FUSSBALL Hidden
  <H2> Alle Spiele live und auf Abruf - auf jedem Gerät
  <H2> Der Highlight-Ticker der 3. Liga, Coupe de France und PENNY DEL
  <H2> Push-Mitteilungen direkt auf Ihr Smartphone
  <H2> Der komplette Live-Sport in einem Paket
  <H2> Häufig gestellte Fragen zu MagentaSport
    <H3> Was kostet MagentaSport?
    <H3> Wie kann ich MagentaSport buchen?
    <H3> Welche Sportarten enthält MagentaSport?
    <H3> Auf wie vielen Geräten kann ich MagentaSport nutzen?

• <b> used for emphasis of text content in tariff cards

These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

Some paragraphs in FAQ items don't use <p>. While no strict failure of success criterion 1.3.1 Info and Relationships, it is best practice to use paragraphs for all paragraph content. HTML paragraph elements carry the role "paragraph", while the <div> element is role "generic". In the given case, there is no difference in announcement for assistive technology. Building multi-paragraph structure with generic role elements may cause issues, though. Implementing use of proper paragraph throughout will ensure, these do not cause any issues.

What is arguably list content, is not using semantic list elements. See

• content in "XPLORA X6 Play eSIM – Technische Daten" (using heading structure right now)

Multiple line break elements found.

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

The decorative text content:

• Young Tarif | Streaming-Vorteil | Young Tarif | Streaming-Vorteil | Young Tarif | Streaming-Vorteil | Young Tarif | Streaming-Vorteil |

Is announced to assistive technology as

• Young Tarif vertical bar Streaming-Vorteil vertical bar Young Tarif vertical bar Streaming-Vorteil vertical bar Young Tarif vertical bar Streaming-Vorteil vertical bar Young Tarif vertical bar Streaming-Vorteil vertical bar

The ordered list in dialog window "So einfach bekommst Du den Vorteil" uses "custom list markers" with CSS content: counter(magenta-counter).

List items in semantic HTML lists are automatically numbered and the count is announced by assistive technology by default. Adding a separate count as accessible content via CSS content results in duplication of count announcement.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 30 Jahre (Telekom). Wir feiern mit tollen Angeboten und Aktionen
  h2 Unsere Top Deals
    h3 iPhone 16 128 GB
    h3 MagentaTV Smart für 0 €
    h3 240 € Wechselbonus
    h3 Kids Watch für 1 €
  h2 Unsere Smartphone-Highlights von Apple
    h3 Apple iPhone 16 128 GB
    h3 Apple iPhone 15 128 GB
    h3 Apple iPhone 16 Pro 128 GB
    h3 Apple iPhone 15 Pro Max 256 GB
  h2 Weitere Top Smartphones im Angebot
    ...
  h2 Unsere Mobilfunk-Deals zum Jubiläum
    ...
  h2 Unsere TV & Internet-Geburtstags-Angebote
    ...
  h2 Zubehör-Highlights von Apple
    ...
  h2 Unsere Magenta Moments
    h3 Exklusive Geschenke, Angebote und Gewinnspiele für unsere Kunden
    ...
  h2 Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen
  h2 Entdecken Sie unsere Telekom-Aktionen

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Aktuelle Angebote & Aktionen
  h2 Unsere Top Deals
  h2 Unsere Smartphone-Highlights von Apple
  h2 Weitere Top Smartphones im Angebot
  h2 Unsere Mobilfunk-Deals zum Jubiläum
  h2 Unsere TV & Internet-Geburtstags-Angebote
  h2 Zubehör-Highlights von Apple
  h2 Unsere Magenta Moments
  h2 Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen
  h2 Entdecken Sie unsere Telekom-Aktionen

Observations for heading structure:

• Visual main heading not used as heading at all

• SEO headings

  • "Feiern Sie mit" repeats content (offers) from other sections

  • "Entdecken Sie unsere Telekom-Aktionen" introduces content that introduces the whole page

• No headings are used for actual offers; as navigation by heading structure is used most by users of assistive technology, the individual offers will be more difficult to reach for certain user groups

What is arguably list content, is not using semantic list elements. See

• Deal / offer sections

When navigating list content, the use of semantic list elements will greatly increase user experience for users of assistive technology. The current structure does not allow, getting an overview of deals, number of offers, etc. By using semantic list elements, it is possible for users of assistive technology to navigate to a section, directly know the count of deals / offers (that sighted users can work out by visible cards and pagination buttons), and to navigate each of those deals individually.

• Line break element found

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

The page uses HTML list element in section "Unsere Smartphone-Tarife" to list the cards.

• class="cards-cta-card-group"

On the other hand, a list is not used in section "Weitere Mobilfunk-Tarife" which follows the same card structure.

What is arguably list content, is not using semantic list elements. See

• Product cards

• Color variant circles on product cards

The device list presentation suggests the code to be marked up like this:

<!-- Device list -->
<div>
  <!-- Device card -->
  <article>
    <span><!-- Badge --></span>
    <img /><!-- Device image -->
    <h2><!-- Device name --></h2>
    <p><!-- Storage --></p>
    <p><!-- Price info --></p>
    <p><!-- Price --></p>
  </article>

  <!-- More device cards -->
</div>

Instead, there are no headings, sections, articles, divs and spans are nested many hierarchy levels and an empty link is present.

The sidebar section "Unsere Empfehlung" and "Ich möchte" uses visual presentation (and CSS classes) of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

This observation is a general remark on semantic HTML, as there are numerous issues with improper use (or complete lack of use) of semantic HTML.

The section "Verlässlicher Service rund um Ihre Bestellung" arguably houses a list of services but is not using semantic HTML list elements. While this is not a strict failure of this success criterion, remediation is recommended.

What is arguably list content, is not using semantic list elements. See

• Product cards

• Color variant circles on product cards

The FAQ section houses at least one empty <p> element (class names for reachability: sc-feUZmu ibaGoG).

Paragraphs have an ARIA role paragraph always making them be announced by screen readers. Empty paragraph elements lead to the announcement of "empty group".

Paragraph elements must never be empty.

The navigational items in the device category list above the page's main heading are not using semantic HTML navigation element <nav>.

The device list presentation suggests the code to be marked up like this:

<!-- Device list -->
<div>
  <!-- Device card -->
  <article>
    <span><!-- Badge --></span>
    <img /><!-- Device image -->
    <h2><!-- Device name --></h2>
    <p><!-- Storage --></p>
    <p><!-- Price info --></p>
    <p><!-- Price --></p>
  </article>

  <!-- More device cards -->
</div>

Instead, there are no headings, sections, articles, divs and spans are nested many hierarchy levels and an empty link is present.

The sidebar section "Ich möchte" uses visual presentation of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

The section "Verlässlicher Service rund um Ihre Bestellung" arguably houses a list of services but is not using semantic HTML list elements. While this is not a strict failure of this success criterion, remediation is recommended.

The FAQ section houses at least one empty <p> element (class names for reachability: sc-feUZmu ibaGoG).

Paragraphs have an ARIA role paragraph always making them be announced by screen readers. Empty paragraph elements lead to the announcement of "empty group".

Paragraph elements must never be empty.

The navigational items in the device category list above the page's main heading are not using semantic HTML navigation element <nav>.

The device list presentation suggests the code to be marked up like this:

<!-- Device list -->
<div>
  <!-- Device card -->
  <article>
    <span><!-- Badge --></span>
    <img /><!-- Device image -->
    <h2><!-- Device name --></h2>
    <p><!-- Storage --></p>
    <p><!-- Price info --></p>
    <p><!-- Price --></p>
  </article>

  <!-- More device cards -->
</div>

Instead, there are no headings, sections, articles, divs and spans are nested many hierarchy levels and an empty link is present.

The sidebar section "Vorteile im Überblick" uses visual presentation (and CSS classes) of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

The section "Verlässlicher Service rund um Ihre Bestellung" arguably houses a list of services but is not using semantic HTML list elements. While this is not a strict failure of this success criterion, remediation is recommended.

The FAQ section houses at least one empty <p> element (class names for reachability: sc-feUZmu ibaGoG).

Paragraphs have an ARIA role paragraph always making them be announced by screen readers. Empty paragraph elements lead to the announcement of "empty group".

Paragraph elements must never be empty.

The navigational items in the device category list above the page's main heading are not using semantic HTML navigation element <nav>.

The device list presentation suggests the code to be marked up like this:

<!-- Device list -->
<div>
  <!-- Device card -->
  <article>
    <span><!-- Badge --></span>
    <img /><!-- Device image -->
    <h2><!-- Device name --></h2>
    <p><!-- Storage --></p>
    <p><!-- Price info --></p>
    <p><!-- Price --></p>
  </article>

  <!-- More device cards -->
</div>

Instead, there are no headings, sections, articles, divs and spans are nested many hierarchy levels and an empty link is present.

The sidebar section "Ich möchte" uses visual presentation of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

The sidebar section "Vorteile im Überblick" uses visual presentation (and CSS classes) of a heading structure that is not reflected in the HTML markup. Visual presentation MUST match code markup.

The section "Verlässlicher Service rund um Ihre Bestellung" arguably houses a list of services but is not using semantic HTML list elements. While this is not a strict failure of this success criterion, remediation is recommended.

The FAQ section houses at least one empty <p> element (class names for reachability: sc-feUZmu ibaGoG).

Paragraphs have an ARIA role paragraph always making them be announced by screen readers. Empty paragraph elements lead to the announcement of "empty group".

Paragraph elements must never be empty.

The navigational items in the device category list above the page's main heading are not using semantic HTML navigation element <nav>.

The device list presentation suggests the code to be marked up like this:

<!-- Device list -->
<div>
  <!-- Device card -->
  <article>
    <span><!-- Badge --></span>
    <img /><!-- Device image -->
    <h2><!-- Device name --></h2>
    <p><!-- Storage --></p>
    <p><!-- Price info --></p>
    <p><!-- Price --></p>
  </article>

  <!-- More device cards -->
</div>

Instead, there are no headings, sections, articles, divs and spans are nested many hierarchy levels and an empty link is present.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 MagentaMobil Data: Datentarife zum attraktiven Preis
  h2 Wählen Sie Ihren Datentarif
    h3 5 GB Datenvolumen
    h3 10 GB Datenvolumen
    h3 25 GB Datenvolumen
  h2 Bei MagentaMobil Data inklusive
    h3 Auf Wunsch: Gerät inklusive
    h3 Größtes 5G-Netz
    h3 Telekom HotSpot Flat
    h3 EU-Roaming
  h2 Gute Gründe für die Datentarife der Telekom
    h3 Erlebnisse teilen
    h3 Immer in Kontakt bleiben
    h3 Unterwegs Spaß haben
  h2 Häufig gestellte Fragen zu unseren Datentarifen
    h3 Was ist MagentaMobil Data?
    h3 Welcher Datentarif ist für mich der richtige?
    h3 Mit welcher Geschwindigkeit kann ich bei den Datentarifen der Telekom surfen?
    h3 Welcher Datentarif passt besser – ohne Laufzeit, mit Vertrag oder Prepaid?
  h2 Datentarife individuell nach Ihren Wünschen
    h3 Hervorragende Netzabdeckung mit Datentarifen mit LTE oder 5G
    h3 HotSpot-Flatrate schont Ihr Datenvolumen
  h2 Direkteinstiege
    h3 Smartphones
    h3 Tarife
    h3 Themen
  h2 Vorteile im Überblick
    h3 MagentaEINS Vorteil

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Wählen Sie Ihren Datentarif
  h2 Bei MagentaMobil Data inklusive
    h3 Auf Wunsch: Gerät inklusive
    h3 Größtes 5G-Netz
    h3 Telekom HotSpot Flat
    h3 EU-Roaming
  h2 Gute Gründe für die Datentarife der Telekom
    h3 Erlebnisse teilen
    h3 Immer in Kontakt bleiben
    h3 Unterwegs Spaß haben
  h2 Häufig gestellte Fragen zu unseren Datentarifen
    h3
  h2 Datentarife individuell nach Ihren Wünschen
    h3 Hervorragende Netzabdeckung mit Datentarifen mit LTE oder 5G
    h3 HotSpot-Flatrate schont Ihr Datenvolumen
  h2 Smartphones
  h2 Tarife
  h2 Themen
    h3 Vorteile im Überblick
      h4 MagentaEINS Vorteil

Observations for heading structure:

• Visual main heading does not use semantic HTML heading element

• Sub heading uses main heading <h1> element

• Empty <h3> element at beginning of FAQ

• FAQ items do not use heading elements

• Heading "Direkteinstiege" does not use semantic HTML heading element

• Direkteinstiege sub headings do not fit logically ("Wählen Sie Ihren Datentarif" → "Smartphone" / ...)

• Sidebar has no heading level 2 to group its content, making "Vorteile im Überblick" a programmatic child of the preceding "Direkteinstiege" sub heading "Themen"

Heading structure as per code markup:

h1 Was ist das Besondere an der Anio Kinderuhr mit GPS?
  h2 Für mehr Sicherheit und Selbständigkeit
  h2 Die GPS-Kinderuhr – so individuell wie Ihr Kind
  h2 Was Eltern über die GPS-Kinderuhr Anio 6 sagen
  h2 Die Kinderuhr mit GPS
  h2 SOS-Knopf der Kinderuhr mit GPS
  h2 Sichere Bereiche festlegen
  h2 Schulmodus bei der Kinderuhr mit GPS
  h2 Datenschutz
  h2 Schrittzähler
  h2 Lern-Ziffernblatt
  h2 Kinderuhr mit GPS Anio 6: So einfach geht's
  h2 Kinderuhr mit GPS Anio 6:So einfach geht's
  h2 Kinderuhr mit GPS Anio 6 - Technische Daten
    h3 Wasserbeständig
    h3 Akkulaufzeit
    h3 Speicher
    h3 Geeignet für
    h3 SOS-Taste
    h3 Funktioniert in
    h3 Gewicht
    h3 Abmessungen (mm)
  h2 GPS-Kinderuhren im Vergleich: Anio 6 vs. XPLORA 6 Play eSIM
  h2 Vergleich der technischen Daten von Anio 6 und XPLORA X6 Play eSIM
  h2 Fragen & Antworten zur GPS-Kinderuhr Anio 6
  h2 Smartphones
  h2 Tarife
  h2 Themen

Observations for this heading structure:

• Heading structure main heading "Was ist das Besondere an der Anio Kinderuhr mit GPS?" & "Für mehr Sicherheit und Selbständigkeit" does not match visual presentation

• Main heading implies all content on page is about "Besonderheiten" of Anio watch

• "Für mehr Sicherheit und Selbstständigkeit" does not accurately describes its following content

• Most headings level 2 add an "eyebrow" / "topline" above the heading; visual presentation implies a connection of heading and eyebrow, while markup adds eyebrow to the preceding heading every time, removing the implied connection

• Heading "Kinderuhr mit GPS Anio 6: So einfach geht's" is duplicated in code

• Content in section "Technische Daten" uses headings level 3 while being displayed as list content

• "Direkteinstiege" headings are on level 2, instead of being grouped by "Direkteinstiege"

• FAQ items do not show as headings

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

What is arguably list content, is not using semantic list elements. See

• content in "Technische Daten" (using heading structure right now)

• Emphasis is solely conveyed by color (magenta)

• <b> used for emphasis

These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

Some text content is written in a way, assistive technology has problems to announce it correctly. I will list fixes for some issues in the remediation notes.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Die Apple Watch ist für alle da. Auch wenn Sie noch kein iPhone haben.
  h2 Vorteile für Ihre Kids
  h2 Vorteile für die Erwachsenen
  h2 Ihre Vorteile mit Smart Connect M
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Weitere Angebote für Ihre Apple Watch
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder
    h3 Was sind die Vorteile der Apple Watch für Kinder?
    h3 Gibt es einen Unterschied zwischen ...
    h3 Welcher Telekom Tarif eignet sich für die Apple Watch für Kinder?

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Apple Watch für Kinder
  h2 Immer in Verbindung mit der Apple Watch und Smart Connect M
    h3 Vorteile für Ihre Kids
  h2 Sorgenfreier dank der Apple Watch für Kinder
    h3 Vorteile für die Erwachsenen
  h2 Passend für Apple Watch Nutzer
    h3 Ihre Vorteile mit Smart Connect M
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Die Apple Watch für Kinder – auch für alle
    h3 Weitere Angebote für Ihre Apple Watch
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder

Observations for heading structure:

• Visual main heading not <h1>; not even any heading at all

• Heading eyebrows use separate heading elements

• FAQ items do not use headings

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

<dl> element used for non-list content in FAQ accordion.

These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

This occurs in two "directions". Visually presented as X, using element Y, and using element X, while content is non-X content. The former includes:

• Links, using HTML elements other than <a href="">

• Buttons, using HTML elements other than <button>

• Input elements, not using appropriate semantic HTML elements for e.g. selects or text inputs with type attributes

• Headings, using HTML elements other than <h1> - <h6>

• Lists, not using <ul>, <ol>, <dl>

• ...

The latter includes, using semantic HTML elements for content that does not fit the semantically conveyed role of that element, includes:

• Lists for non-list content

• Headings for non-heading content

• ...

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Wir bringen zusammen, was zusammengehört
  h2 iPhone mit der Telekom: Momente perfekt festhalten. Und superschnell teilen.
    h3 Fortschrittliche Kamera – Das iPhone macht unglaubliche Fotos und Videos.
    h3 Batterie – Eine Batterie, die den ganzen Tag mithält.
    h3 Auflösung – Retina HD Display. Scharf und hell, mit fantastischen Farben.
    h3 Leistung – Die volle Power ultraschneller Chips.
    h3 5G Netz – Mit mehr Speed aufs nächste Level.
  h2 Finden Sie jetzt Ihr neues iPhone bei der Telekom
    h3 iPhone 16 Pro Max. Übernimm die Kamerasteuerung.
    h3 ...
  h2 Ein ganzes Netzwerk eingebauter Sicherheits­features.
    h3 App Tracking Transparenz – Ohne Erlaubnis dürfen Apps keine Aktivitäten tracken.
    h3 Face ID – Face ID funktioniert ohne ein Selfie zu speichern.
    h3 Mehr Sicherheit mit 5G – Bewahren Sie Ihre persönlichen Daten sicher auf, wo immer Sie sind.
    h3 Fotos – Selbst entscheiden, wer was auf der Fotos App sehen kann.
  h2 Einfach das iPhone bei der Telekom finden, das am besten passt
    h3 Apple iPhone 16
    h3 Apple iPhone 16 Pro
    h3 Apple iPhone 16 Plus
    h3 Apple iPhone 16 Pro Max
  h2 Immer in Verbindung. Und besser für die Umwelt.
    h3 Rohstoffe – Apple setzt sich ein für 100% recycelte oder erneuerbare Materialien.
    h3 Erneuerbare Energien – Telekom 5G läuft zu 100 % mit erneuerbaren Energien.
    h3 Green Magenta – Grüne und nachhaltige Produkte und Initiativen.
    h3 Langlebigkeit – Für alle, die ein Smartphone wollen, das lange hält – das iPhone.
    h3 Handyankauf
      h4 Welches Smartphone wollen Sie verkaufen?
      h4 IMEI-Nummer Ihres ...
      h4 In welchem Zustand ist Ihr ...
      h4 Leider können wir Ihr Smartphone nicht ankaufen
      h4 Zusammenfassung
      h4 Jetzt Ankaufsbonus erhalten
      h4 Ankaufsanfrage abschließen
        h5 Ihre Kontaktdaten
        h5 Ihre Kontodaten
        h5 Ankaufsanfrage
    h3 Die iPhone Modelle entdecken – Welches iPhone ist das richtige?
  h2 Häufig gestellte Fragen zum iPhone bei der Telekom
    h3 Was kostet ein iPhone bei Vertragsverlängerung bei der Telekom?
    h3 Wie kann ich auf ein neueres iPhone Modell bei der Telekom wechseln?
    h3 Welcher SIM-Kartentyp der Telekom passt in das neueste iPhone?
    h3 Kann ich mein altes iPhone bei der Telekom in Zahlung geben?

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 iPhone mit der Telekom: Momente perfekt festhalten. Und superschnell teilen.
  h2 Das iPhone macht unglaubliche Fotos und Videos.
  h2 Eine Batterie, die den ganzen Tag mithält.
  h2 Retina HD Display. Scharf und hell, mit fantastischen Farben.
  h2 Die volle Power ultraschneller Chips.
  h2 Mit mehr Speed aufs nächste Level.
  h2 Finden Sie jetzt Ihr neues iPhone bei der Telekom
    h3 iPhone 16 Pro Max. Übernimm die Kamerasteuerung.
  h2 Ein ganzes Netzwerk eingebauter Sicherheits­features.
    h3 Ohne Erlaubnis dürfen Apps keine Aktivitäten tracken.
    h3 Face ID funktioniert ohne ein Selfie zu speichern.
    h3 Bewahren Sie Ihre persönlichen Daten sicher auf, wo immer Sie sind.
    h3 Selbst entscheiden, wer was auf der Fotos App sehen kann.
  h2 Einfach das iPhone bei der Telekom finden, das am besten passt
  h2 Immer in Verbindung. Und besser für die Umwelt.
    h3 Telekom 5G läuft zu 100 % mit erneuerbaren Energien.
    h3 Grüne und nachhaltige Produkte und Initiativen.
    h3 Für alle, die ein Smartphone wollen, das lange hält – das iPhone.



  <!-- HANDYANKAUF FORM WITH STEPS -->

  h2 Handyankauf

  h2 Welches Smartphonewollen Sie verkaufen?
    h3 Geben Sie den Namen Ihres Smartphones ein und wählen Sie es aus der Liste aus.

  h2 IMEI-Nummer Ihres ... für Ihren Ankauf
      h4 Basierend auf Ihrer Auswahl haben wir einen geschätzten Ankaufswert ermittelt: ... €  Für die genaue Preisermittlung und den Ankauf Ihres Geräts benötigen wir zusätzlich die IMEI-Nummer Ihres Smartphones.
  
  h2 In welchem Zustand ist Ihr ...?
      h4 Bitte beantworten Sie vier kurze Fragen, damit wir ermitteln können, ob wir Ihr Gerät ankaufen und um Ihnen ein vorläufiges Angebot machen zu können.
      h4 Lässt sich das Handy einschalten?
      h4 Ist das Handy frei von erheblichen Schäden und/oder sichtbaren Flüssigkeitsschäden?
      h4 Verfügt das Handy über ein funktionstüchtiges Display, das keine Risse oder andere Schäden aufweist?
      h4 Ist die Rückseite des Handys intakt und frei von Rissen?
  
  (h2 Leider können wir Ihr Smartphone nicht ankaufen)
  h2 Zusammenfassung
      h4 Basierend auf Ihren Angaben erhalten Sie für Ihr... bis zu:

  h2 Jetzt Ankaufsbonus erhalten
      h4 Wenn Sie ein Neugerät gekauft haben, für das die Telekom einen Ankaufsbonus bietet, geben Sie die IMEI des erworbenen Neugerätes ein. Oder tippen Sie hier einen Aktionscode ein.

  h2 Ankaufsanfrage abschließen
      h4 Die Gesamtsumme für Ihr ... (ggf. mit einem Ankaufsbonus) beträgt bis zu:
      h4 Um Ihre Anfrage für den Ankauf Ihres ... abzuschließen, benötigen wir Ihre persönlichen Daten (bitte keine Packstation als Absender verwenden). Bitte nennen Sie uns zudem noch das Bankkonto, auf das wir den Ankaufswert und ggf. Ankaufsbonus nach erfolgreicher Prüfung Ihres Gerätes überweisen können.
    h3 Ihre Kontaktdaten
    h3 Ihre Kontodaten
    h3 Ankaufsanfrage
     h4 Bitte senden Sie uns Ihr ... innerhalb von 21 Tagen zu. Sobald dieses in unserem Logistikzentrum eingetroffen ist und der Zustand des Gerätes den Angaben entspricht, kontaktieren wir Sie mit dem ermittelten Ankaufspreis von bis zu ... € und schließen den Ankauf ab.

  <!-- END OF FORM -->



  h2 Häufig gestellte Fragen zum iPhone bei der Telekom
    h3 Was kostet ein iPhone bei Vertragsverlängerung bei der Telekom?
    h3 Wie kann ich auf ein neueres iPhone Modell bei der Telekom wechseln?
    h3 Welcher SIM-Kartentyp der Telekom passt in das neueste iPhone?
    h3 Kann ich mein altes iPhone bei der Telekom in Zahlung geben?

"Handyankauf" form step headings use control characters for line breaks.

<h2 class="...">
  "IMEI-Nummer "
  "Ihres"
  "iPhone 11"
  " mit "
  "128"
  "GB "
  " für Ihren Ankauf "
</h2>

Character codes are 000D, Carriage Return, \r & 000A, Line Feed, \n.

A screen reader announces this as follows:

Heading
IMEI-Nummer Ihres iPhone 11 mit 128GB für Ihren Ankauf
8 Items
You are currently on a Heading level 2
IMEI-Nummer, level 1
Ihres, level 1
Leerzeichen, level 1
iPhone 11, level 1
mit, level 1
128, level 1
GB, level 1
für Ihren Ankauf, level 1
End of Heading Level 2

Subsequent heading levels (e.g. right now the whole body copy text below this heading level 2 in step 2 is a heading with 9 items, including announced space characters) will further worsen the announcements as levels are going deeper.

What arguably is list content:

• Das iPhone macht unglaubliche Fotos und Videos.

• Eine Batterie, die den ganzen Tag mithält.

• Retina HD Display. Scharf und hell, mit fantastischen Farben.

• Die volle Power ultraschneller Chips.

• Mit mehr Speed aufs nächste Level.

and

• Ohne Erlaubnis dürfen Apps keine Aktivitäten tracken.

• Face ID funktioniert ohne ein Selfie zu speichern.

• Bewahren Sie Ihre persönlichen Daten sicher auf, wo immer Sie sind.

• Selbst entscheiden, wer was auf der Fotos App sehen kann.

and

• Telekom 5G läuft zu 100 % mit erneuerbaren Energien.

• Grüne und nachhaltige Produkte und Initiativen.

• Für alle, die ein Smartphone wollen, das lange hält – das iPhone.

is using heading elements instead.

List in Handyankauf form does not use semantic HTML list element.

Landmarks like named sections / regions should only be used rarely and for content that is not otherwise structured already. When a proper heading structure is in place, grouping the same content into a region as well does not provide any benefits navigating page structure.

As regions and headings both are announced by assistive technology, it can make navigating a page sequentially less pleasant to access, as it takes multiple clicks to move between items and content announcements are duplicated.

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Noch nie war wechseln so attraktiv
  h2 Wählen Sie Ihren Smartphone-Tarif
    h3 20 GB Datenvolumen
    h3 30 GB Datenvolumen
    h3 50 GB Datenvolumen
    h3 100 GB Datenvolumen
    h3 Unbegrenzt

  h2 Jetzt zum Testsieger wechseln
  h2 In unseren Handytarifen inklusive
    h3 Telefon- und SMS-Flat
    h3 Größtes 5G-Netz
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Gute Gründe jetzt einzusteigen
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS
    h3 Vorteile in der MeinMagenta App
    h3 Optional mit Wunschgerät
    h3 Rufnummernmitnahme
  h2 Weitere Tarife der Telekom entdecken
    h3 MagentaMobil Young
    h3 Speedbox-Tarife
  h2 Häufig gestellte Fragen zu den Handytarifen
    h3 ...

  <!-- sidebar -->
  h2 Vorteile im Überblick
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS Vorteil

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Wählen Sie Ihren Smartphone-Tarif
  h2 Change number of Karten für Erwachsene. Values between 1 and 6 are valid. 
  h2 Jetzt zum Testsieger wechseln
  h2 In unseren Handytarifen inklusive
    h3 Telefon- und SMS-Flat
    h3 Größtes 5G-Netz *
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Gute Gründe jetzt einzusteigen
    h3 Gute Gründe jetzt einzusteigen 
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS
    h3 Vorteile in der MeinMagenta App
    h3 Optional mit Wunschgerät
    h3 Rufnummernmitnahme
  h2 Weitere Tarife der Telekom entdecken
    h3 MagentaMobil Young
    h3 Speedbox-Tarife
  h2 Häufig gestellte Fragen zu den Handytarifen
    h3 Vorteile im Überblick
      h4 Unbegrenztes Datenvolumen
      h4 MagentaEINS Vorteil

Observations for heading structure:

• Visual main heading in main stage "Noch nie war wechseln so attraktiv" is not using main heading <h1> element or any other HTML heading element for that matter

• Arguably most important content of Smartphone-Tarife page –the tariff cards– do not use heading elements

• Hidden headings found

  • Change number of Karten für Erwachsene. Values between 1 and 6 are valid.

  • Gute Gründe jetzt einzusteigen (<h3>), duplicating preceding <h2>

• Sections "In unseren Handytarifen inklusive" and "Gute Gründe jetzt einzusteigen" use subsequent headings for shot form content that might better be defined as list content

• Sections "Jetzt zum Testsieger wechseln", "In unseren Handytarifen inklusive", "Gute Gründe jetzt einzusteigen" could be grouped as "Vorteile" to more broadly structure page content

• Sidebar content is not grouped via <h2> heading and as such might be seen as content of "Häufig gestellte Fragen zu den Handytarifen"

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

FAQ section:

• Empty paragraph after section heading

• Improper use of line breaks in FAQ item "Worauf sollte ich bei meinem neuen Handytarif achten?"

• Table content in FAQ item "Was verbraucht am meisten Datenvolumen?" displayed by use of non breaking spaces: <li><strong>Serienstreaming</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ... 1 Stunde</li>

"Tarifdetails" / "Jetzt zur Telekom wechseln" dialog windows:

• Extensive use of line break elements

• Use of <strong> elements for heading content

• Info icon dialog window

  • Use of line breaks

  • Use of <b> to emphasize text content

  • Use of emphasis for heading content

"PlusKarte" dialog window uses headings:

    h3 Jetzt mit der PlusKarte unbegrenztes Datenvolumen sichern:
        h5 Die PlusKarte ist eine zusätzliche Karte zu einem aktuellen MagentaMobil Vertrag mit eigener Rufnummer und eigenem Datenvolumen in derselben Höhe wie das der Hauptkarte.   So einfach geht’s: MagentaMobil Hauptkarte aussuchen MagentaMobil M oder L auswählen PlusKarte für 19,95 € hinzufügen Entweder direkt hier, indem Sie oben mehr als eine Karte auswählen, oder im Warenkorb Unbegrenzt surfen Mit ausgewählten Karten deutschlandweit unbegrenztes Datenvolumen nutzen. Im Nachgang können noch weitere PlusKarten+, PlusKarten Kids und Teens sowie PlusKarten Data dazugebucht werden, die ebenfalls vom unbegrenzten Datenvolumen profitieren.

Observations:

• Skipped heading level

• Heading extremely long

• Heading includes whole body copy

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

  h2 Ich bin bereits bei der Telekom
h1 Apple iPad Air 11" (2025) M3
  h2 Farbe
  h2 Speichergröße
    h3 Gesamtpreis des Geräts
  h2 Produkthinweise
  h2 Geld sparen mit dem Handyankauf
  h2 Tarif- und Gerätepreis
  h2 Produktinformationen
    h3 Netzteil
    h3 Herstellerangaben
      h4 Kontaktdaten
      h4 Produktsicherheit
  h2 Spezifikationen
    h3 Hardware und Schnittstellen
    h3 Netz-Standards
    h3 Farben
    h3 Speichergrößen
    h3 Marke
    h3 Betriebssystem

  ... <!-- Image content -->

  h2 Lieferumfang
  h2 Weitere Informationen
  
  <!-- sidebar -->

  h2 Vorteile im Überblick
    h3 Handyankauf
    h3 MagentaEINS Vorteil
  h2 Ich möchte...

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Apple iPad Air 11" (2025) M3
  h2 
    h3 Spezifikationen
  h2 Spezifikationen
    h3 Vorteile im Überblick
      h4 Handyankauf
      h4 MagentaEINS Vorteil

Observations for heading structure:

• Most visually presented heading content does not use HTML heading elements

• Empty heading level 2 found

• Duplicate heading "Spezifikationen" with two different heading levels

• "Vorteile im Überblick" heading of sidebar is logically placed as content of "Spezifikationen"

• Text content in images uses visual presentation like heading structure as well which is not at all reflected in code

What is arguably list content, is not using semantic list elements. See

• check mark list in "Tarif- und Gerätepreis" section

The visually presented heading structure of "Weitere Details" dialog window does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Produkthinweise
  h2 Apple iPad Air 11" (2025) M3
  h2 Hersteller
  h2 Sicherheitshinweise

The programmatically determinable heading structure, using HTML heading elements is as follows:

-

The visually presented heading structure of "Ankaufsbonus" footnote dialog window does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Ankaufsbonus – Aktionsübersicht
  h2 Handyankauf allgemeine Bedingungen
  h2 Ankaufsbonus für Google Pixel 9a
  ...

The programmatically determinable heading structure, using HTML heading elements is as follows:

-

The visually presented heading structure of "Handyankauf" dialog window does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Handyankauf
  ...

The programmatically determinable heading structure, using HTML heading elements is as follows:

-

No heading elements used to structure content.

The visually presented heading structure of "Tarif ändern" dialog window does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Wählen Sie Ihren Datentarif
  h2 5 GB Datenvolumen
  ...
  h2 Gesamtpreis

The programmatically determinable heading structure, using HTML heading elements is as follows:

-