36 issues found on Apple iPad Air 11 2025

The silhouette icon on the "Anmelden" button has no alt attribute. When the icon is considered decorative, as it arguably can be, the image must have a null alt attribute set to hide it from the accessibility tree.

Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:

<button class="...">
  <span class="...">
    <span class="...">
      <div class="...">
        <div class="...">
          <img class="..." 
               src="....svg" 
               data-img="...">
          <div class="...">
            <svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
          </div>
        </div>
      </div>
      <span>
        <text-replacer data-id="..." 
                       style="..." 
                       tabindex="0">
          <span style="...">Anmelden</span>
        </text-replacer>
      </span>
    </span>
  </span>
</button>

Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.

This observation is set to priority 5 "Best Practice", so it is not considered a failure. As the full header section of the page is out of scope for this audit, the authentication process via "Anmelden" button cannot be tested in the scope of this audit. Thus, 3.3.8 Accessible Authentication (Minimum) is marked as "Not Evaluated".

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

• Product images (× 10) all use alt="Apple iPad Air 11" (2025) M3"

• "Netzteil" images in "Produktinformationen" have empty alt attribute

The HTML image element must always use have alt attribute present. Either

• null alt attribute for purely decorative or

• non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

• Full SEO content

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

• Check mark icons in sidebar use <svg aria-hidden="false" aria-label="Not Activated" while arguably being decorative

The HTML image element must always use have alt attribute present. Either

• null alt attribute for purely decorative or

• non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

• Device Thumbnail in "Preisübersicht" dialog window

On base viewport size of 1024×768px and page zoom of 200%, the available:

• vertical space on the page after "Preisübersicht" is sticky < 400px

• vertical space in the tariff carousel < 400px.

• horizontal space, due to page zoom, is limited and cuts of hover tooltips

All content must be presented without loss of information or functionality.

Measured at 320 × 256px with 100% page zoom, barely 25px vertical space is available when the "Preisübersicht" footer gets sticky.

Text content in certain containers may overflow the container's boundaries, when text spacings are changed, making some text harder, other text impossible to perceive. This often includes:

• Stage areas

• Badges

• Manually outlined elements like buttons (e.g. footnote icon buttons)

• Teasers

• Card components

• Ankaufsbonus Aktionsübersicht dialog window – close button

Focusable elements must have a visually distinct focus state. Moving keyboard focus to a focusable element must clearly identify the element as being focused. If this is not the case, sighted users of keyboard navigation will have difficulties navigating a page. Especially when multiple focusable elements do not show visible focus indicators, properly navigating the page may become impossible.

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

• Opening a dialog window

• Expanding an accordion item

• Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Content out of focus order found:

• Footnote dialog window is not keyboard accessible.

Open dialog windows can obscure focus of underlying interactive elements. Obscuring can be partial or complete. This will impact users of keyboard navigation as focus cannot be tracked while a dialog window is open. Dialog windows triggered by:

• Footnotes

Fixed content:

• Bottom bar in "Tarif ändern" dialog window obscures multiple focusable elements

Links solely rely on color to be differentiated from other, surrounding text content and color contrast ratio of link text color to surrounding text color does not meet minimum required 3:1 color contrast ratio. Links, relying on color only and with insufficient color contrast ratio to surrounding text content include:

• "Weitere Details"

  • links in "Weitere Details" dialog window do not use any differentiating style

• "Teilnahmebedingungen" in "Ankaufsbonus" dialog window

• links in "Herstellerangaben" section

• links in collapsible item (info i icon in sidebar)

• links "Tarif ändern" and "Tarif entfernen" in sidebar

• link "Preisliste, Leistungsbeschreibung und AGB" in "Tarif ändern" dialog window

• Links without programmatically determinable context; not part of a paragraph, preceding heading is main heading with device name

  • "Weitere Details"

  • link "Zum iPad Vergleich" is nested in another link with the same link target. Outer link is missing accessible name

The purpose of a link must not solely rely on visually perceived aspects like layout, proximity, placement. The purpose of a link should be understandable from the link text itself or its programmatic context, ensuring it's accessible to assistive technologies and a wider range of users.

Relying solely on visual cues to convey a link's purpose makes it inaccessible to:

• Users of assistive technology like screen readers.

• Users with cognitive disabilities who might not interpret visual layouts correctly.

• Users with customized displays (e.g. unexpected viewport sizes, or turned off styles).

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:

-

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

h1 Preisübersicht
  h2 Einmalige Zahlung
  h2 Monatliche Zahlung

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

      h4 Einmalige Zahlung
      h4 Monatliche Zahlung

Observations:

• Main heading in dialog window does not use HTML heading element

• In context of dialog window, three heading levels are skipped for the HTML heading elements present

• The headings level 4 are logically content under heading level 3 "Vorteile im Überblick"

The visually presented heading structure of sidebar info icon dialog windows does not match the use of semantic HTML heading elements. The visually presented structure is as follows: (respectively for "Handyankauf" and "MagentaEINS Vorteil" dialog windows)

h1 Mehr Infos zu Ankaufswert & Ankaufsbonus

----

h1 MagentaEINS Vorteil
  h2 Voraussetzung

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

    h3 Mehr Infos zu Ankaufswert & Ankaufsbonus
        h5 Der vorläufige Ankaufswert für Ihr Gerät wird bestimmt durch die Angaben, die Sie zu dem Modell und dem Zustand machen und gilt für 21 Tage. Der Wert wird erneut geprüft, nachdem Sie das Gerät eingeschickt haben. Nach positiver Prüfung wird Ihnen der Ankaufswert innerhalb weniger Tage auf Ihr Konto ausgezahlt. Profitieren Sie von unserem attraktiven Ankaufsbonus! Je nachdem, für welches neue Gerät Sie sich entscheiden, können Sie sich zum Ankaufswert einen zusätzlichen Ankaufsbonus sichern. Der Bonus wird Ihnen nach erfolgreichem Ankauf Ihres Gerätes und dem Erhalt des neuen Handys direkt auf Ihr Konto überwiesen.

----

    h3 MagentaEINS Vorteil
        h5 Voraussetzung Voraussetzung für MagentaEINS ist das gleichzeitige Bestehen eines Mobilfunklaufzeitvertrags mit einem monatlichen Grundpreis ab 29,95 €, abgeschlossen ab dem 22.05.2013 und eines IP-Breitbandvertrags, abgeschlossen ab dem 01.06.2015, mit einem monatlichen Grundpreis ab 29,95 €. Je Mobilfunk- und Festnetz-Vertrag ist nur ein MagentaEINS Vorteil möglich. Endet die Berechtigung für MagentaEINS durch Beendigung des Festnetz- oder Mobilfunkvertrags, entfällt der Rabatt und alle Vorteilsoptionen werden gelöscht.

Observations:

• Skipped two heading levels for main heading

• Skipped one heading level

• Heading element used for body content

• In MagentaEINS Vorteil dialog window, a heading level 4 "Voraussetzung" is nested inside the heading level 5

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

• "Herstellerangaben" section

• "Weitere Details" dialog window

• Footnote dialog window

• Info icon collapsible in sidebar & "Tarifdetails" dialog window in "Tarif ändern" dialog window

  • line break elements

  • Non breaking spaces

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

h1 MagentaMobil Data S mit Tablet
  h2 Internet
  h2 Inklusivleistungen
  h2 Zubuchbare Datenpässe
  h2 Tarife ohne Mindestlaufzeit

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

  h2 MagentaMobil Data S mit Tablet

Observations:

• Heading content uses <p><strong></strong></p>

Text content must meet minimum color contrast ratio of 4.5:1 to its background. Large text (>24px) content must meet minimum color contrast ratio of 3:1 to its background. The following text content does not meet the required minimum contrast ratios:

• "Zum iPad-Vergleich"

• Sidebar links

  • Produktinformationsblatt (PDF)

  • Preisliste, Leistungsbeschreibung und AGB

  • Jetzt aktivieren

• "Preisübersicht" dialog window – hovered tabs

Error state in "Handyankauf" dialog window uses color on the input field. Color used has not enough contrast ratio to background color and not enough color contrast ratio to default or success state of input field.

Footnote dialog window is not keyboard accessible.

When opening a dialog window (e.g. via footnote or info icon), said dialog window does not receive keyboard focus. This leads to multiple issues:

• The contents of the dialog window are not accessible via keyboard.

• The dialog window can not be closed by keyboard (easily or at all).

• While the dialog window is open, keyboard navigation of the underlying page is still possible; the dialog window however blocks the view. (see also 2.4.11 Focus Not Obscured (Minimum))

• Since keyboard navigation stays possible, opening multiple dialog windows above each other also is possible.

• Device thumbnails + thumbnail gallery pagination

• "Speichergröße"

• "Einmalzahlung"

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

• Non-semantic HTML elements (e.g. <div>, <span>) are used for interactive purposes (e.g. links, buttons, inputs), instead of semantic HTML elements (e.g. <a href="">, <button>). This often also leads to other issues, concerning 4.1.2 Name, Role, Value.

• Semantic elements are used but required attributes are missing (e.g. <a>, missing href attribute)

• Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

As main parts of the heading structure are missing (see 1.3.1 Info and Relationships), matching headings to structured content purpose is difficult.

The programmatically determinable heading structure 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:

• "Spezifikationen" (heading level 2) structures whole SEO content and all sidebar content

List content in section "Spezifikationen" uses generic HTML element instead of semantic list element.

Interactive element labels use non-main language accessible names:

• .Info icon in sidebar is labelled "show/hide detailed information"

• Info icon in "Vorteile im Überblick" in sidebar is labelled "Info icon"

Interactive element label use accessible name without context to element purpose:

• Device color buttons have empty label and use description:
  "Description: "Internet 5 GB Highspeed-Volumen (1 GB zus. Datenvolumen mit MagentaEINS: 6 GB) Daten-Flat im Telekom Mobilfunknetz Geschwindigkeit im Download: LTE Max/5G Geschwindigkeit im Upload: bis zu 50 MBit/s Inklusivleistungen HotSpot Flat: Mit einem Telekom HotSpot in Ihrer Nähe können Sie auch unterwegs surfen, ohne dabei das eigene Datenvolumen zu verbrauchen. Mehr Infos unter www.hotspot.de Roaming: In der EU inkl. Schweiz & Großbritannien surfen Sie auf vorübergehenden Reisen ohne zusätzliche Kosten wie im Inland. Zubuchbare Datenpässe WeekPass (+ 3 GB): 5,95 € WeekPass (+ 10 GB): 14,95 € 4-WeekPass (+ 20 GB): 19,95 € 4-WeekPass (+ 40 GB): 29,95 € DayFlat unlimited: 9,95 € So buchen Sie SpeedOn Datenpässe: Sie erhalten jeweils eine SMS, wenn Sie Ihr Highspeed-Volumen zu 80 % und komplett verbraucht haben. Klicken Sie auf den kostenlosen Link http://pass.telekom.de in der SMS: hier können Sie Ihren aktuellen Verbrauch kontrollieren und bei Bedarf neues Highspeed-Volumen mit SpeedOn nachkaufen. Die Buchung der SpeedOn Datenpässe ist auch in der MeinMagenta App möglich. Tarife ohne Mindestlaufzeit Infos zu Tarifen ohne Mindestlaufzeit, die lediglich ohne Gerät erhältlich sind, finden Sie unter www.telekom.de/flex-mobil oder in der Preisliste. Produktinformationsblatt (PDF) Preisliste, Leistungsbeschreibung und AGB" (via aria-describedby)

• Info icon in sidebar is described by:
  "Description: "Internet 5 GB Highspeed-Volumen (1 GB zus. Datenvolumen mit MagentaEINS: 6 GB) Daten-Flat im Telekom Mobilfunknetz Geschwindigkeit im Download: LTE Max/5G Geschwindigkeit im Upload: bis zu 50 MBit/s   Inklusivleistungen HotSpot Flat: Mit einem Telekom HotSpot in Ihrer Nähe können Sie auch unterwegs surfen, ohne dabei das eigene Datenvolumen zu verbrauchen. Mehr Infos unter www.hotspot.de Roaming: In der EU inkl. Schweiz & Großbritannien surfen Sie auf vorübergehenden Reisen ohne zusätzliche Kosten wie im Inland.   Zubuchbare Datenpässe WeekPass (+ 3 GB): 5,95 € WeekPass (+ 10 GB): 14,95 € 4-WeekPass (+ 20 GB): 19,95 € 4-WeekPass (+ 40 GB): 29,95 € DayFlat unlimited: 9,95 € So buchen Sie SpeedOn Datenpässe: Sie erhalten jeweils eine SMS, wenn Sie Ihr Highspeed-Volumen zu 80 % und komplett verbraucht haben. Klicken Sie auf den kostenlosen Link http://pass.telekom.de in der SMS: hier können Sie Ihren aktuellen Verbrauch kontrollieren und bei Bedarf neues Highspeed-Volumen mit SpeedOn nachkaufen. Die Buchung der SpeedOn Datenpässe ist auch in der MeinMagenta App möglich.   Tarife ohne Mindestlaufzeit Infos zu Tarifen ohne Mindestlaufzeit, die lediglich ohne Gerät erhältlich sind, finden Sie unter www.telekom.de/flex-mobil oder in der Preisliste. Produktinformationsblatt (PDF) Preisliste, Leistungsbeschreibung und AGB" (via aria-describedby)

• Close button has no accessible name

  • "Weitere Details" dialog window

  • Footnote dialog window

  • Handyankauf dialog window

  • Zum iPad-Vergleich: <a class="..." href="..." style="...">&ZeroWidthSpace;</a>

• "Anderes Gerät verkaufen" labelled "Handyankauf"

Interactive elements, like links, buttons, inputs, must have a label that is visible at all times and an accessible name that is programmatically determinable. The visible label of interactive elements must be equal to, or part of the accessible name.

If the accessible name is changed programmatically to differ from the natively set name, the visible label must be part of it in the exact wording. If the accessible name is changed, ideally, the visible label is the first part of the accessible name.

Assistive technology like voice control software uses the accessible name to control interactive elements. By stating the accessible name, the interactive element can be activated. So to activate a button, labeled "Submit", a user of voice control software can say "Click button Submit". If the accessible name of the button has been changed to "Send Form", the user is not able to access the button this way. If the accessible name of the button has been changed to "Submit Form", the name differs from the visible label but still includes the visible name as first part, making it still accessible to voice control software.

Buttons and links not used correctly.

• Dialog windows should be triggered by button elements, instead, many are triggered by link elements with missing href attribute

  • Weitere Details

  • Anderes Gerät verkaufen

  • Tarif ändern

  • Tarif entfernen

  • Preisübersicht anzeigen

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

• Device color buttons do not use semantic button element

• While not a failure of this criterion, device color choice arguably should be a radio button group instead; as should storage option and "Einmalzahlung" option

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.