Page URL
https://www.telekom.de/shop/geraet/apple/apple-ipad-air-11-2025-m3/space-grau-512-gb?tariffId=MF_16206&tariffSubTenId=MF_16205&categoryId=tablets&tariffCategoryId=daten-tarife

Issues List

Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Image is missing alt attribute
Non-text Content 1.1.1 (A)
Image is missing alt attribute
Non-text Content 1.1.1 (A)
Decorative "Anmelden" icon has no alt attribute
Non-text Content 1.1.1 (A)
Image is decorative but has text alternative
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Use of Color 1.4.1 (A)
Links are indicated by color only
Use of Color 1.4.1 (A)
Input element's error state indicated by color
Contrast (Minimum) 1.4.3 (AA)
Text content does not have enough color contrast
Resize text 1.4.4 (AA)
Resizing text leaves very limited space
Reflow 1.4.10 (AA)
Vertical space effectively non-existent on smaller viewports
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Content on Hover or Focus 1.4.13 (AA)
Device color button tooltip not dismissible
Keyboard 2.1.1 (A)
Interactive element, operable by mouse, not accessible by keyboard
Keyboard 2.1.1 (A)
Dialog window does not receive keyboard focus
Focus Order 2.4.3 (A)
User-activated dynamic content not in correct focus order
Focus Order 2.4.3 (A)
Non-interactive element is focusable
Link Purpose (In Context) 2.4.4 (A)
Purpose of link cannot be programmatically determined
Headings and Labels 2.4.6 (AA)
Headings do not properly describe structured content purpose
Headings and Labels 2.4.6 (AA)
Interactive element purpose not determinable
Focus Visible 2.4.7 (AA)
Element's focused state is not visible
Focus Not Obscured (Minimum) 2.4.11 (AA)
Dialog windows and fixed content obscure focus of underlying elements
Label in Name 2.5.3 (A)
Visible label is not matching interactive element's accessible name
Accessible Authentication (Minimum) 3.3.8 (AA)
"Anmelden" / Authentication not tested
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Accompanying Files
Observation Details

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.

Accompanying Files
Observation Details

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.

Remediation Notes

Ensure proper use of semantic HTML elements. If using ARIA attributes or manually setting tabindex attribute, it usually is a good indicator to look for existing, native, semantic HTML elements that fit the needs. In case of the "Anmelden" button, this structure markup will suffice:

<button>
  <svg aria-hidden="true">...</svg>
  <span>Anmelden</span>
</button>
Priority: Best Practice Unknown Page: Apple iPad Air 11 2025 Observation Permalink
Observation Details

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

Accompanying Files
Observation Details

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

Remediation Notes

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

Priority: Critical Significant Page: Apple iPad Air 11 2025 Observation Permalink
Accompanying Files
Observation Details

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

Remediation Notes

Informative images must have proper text alternatives. No text content should be presented as an image. If done so, purpose equivalent text alternatives must be present. This means, all text content, conveyed visually via images must be accessible in text.


Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

  • purely decorative, set a null alt attribute as follows: <img alt="" />

  • not purely decorative, the alt attribute must not be null

Accompanying Files
Observation Details

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

Remediation Notes

Ensure, all purely decorative images are not accessible by assistive technology. Depending on the way, in image is embedded, the following methods can be used to remove it from the accessibility tree:

  • HTML image element: Set a null alt attribute as follows: <img alt="" />; do not use ARIA to hide the HTML image element

  • HTML SVG element: Remove the SVGs <title> element or keep it empty and use ARIA to explicitly hide the element to ensure highest compatibility across browsers and assistive technology: <svg aria-hidden="true">

Accompanying Files
Observation Details

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

Remediation Notes

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

  • purely decorative, set a null alt attribute as follows: <img alt="" />

  • not purely decorative, the alt attribute must not be null

Accompanying Files
Observation Details

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.

Remediation Notes

Priority: Critical Significant Page: Apple iPad Air 11 2025 Observation Permalink
Accompanying Files
Observation Details

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

Accompanying Files
Observation Details

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

Remediation Notes

Container elements must not use fixed dimensions, if they contain text content, to allow proper reflow without obscuring / overlapping content. Changing text spacings to values

  • Line height (line spacing) to at least 1.5 times the font size;

  • Spacing following paragraphs to at least 2 times the font size;

  • Letter spacing (tracking) to at least 0.12 times the font size;

  • Word spacing to at least 0.16 times the font size.

must be possible and must not lead to any loss of content or functionality.

Accompanying Files
Observation Details
  • 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.

Remediation Notes

Ensure, all focusable elements have a visible focus indicator.

  • The focus indicator should ideally be clearly visible

  • The focus indicator should not solely rely on change of color (see 1.4.1 Use of Color)

  • The focus indicator should not create contrast issues of focused text content (see 1.4.3 Contrast (Minimum))

  • The browser's native focus indicator can be used if it itself passes contrast minimum requirements to the element's background (see 1.4.11 Non-text Contrast).

Observation Details

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.

Remediation Notes

Ensure, for all dynamically added content that can be activated by user,

  • focus cannot be set to focusable elements inside content, before content is being visually added (e.g. collapsed accordion items, or not yet opened dialog windows)

  • dynamic content should be placed directly below the triggering element in the DOM order

  • Opening e.g. a dialog window, will set the focus on the first focusable element inside the dialog window

  • Activating a "Load more" button must ensure, focus, after content is loaded, either

    • is set to the first focusable element of newly loaded content or

    • is set to the first preceding focusable element of newly loaded content.

Ensure, for all dynamically added and then removed content that can be activated by user,

  • keyboard focus

    • remains (e.g. collapsing/expanding accordion items) on the triggering element or

    • is set to (e.g. opening and closing a dialog window) the triggering element again.

Accompanying Files
Observation Details

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

Remediation Notes

When opened,

  • dialog windows must receive keyboard focus and

  • keyboard focus must be trapped inside the dialog window.

Ensuring placed and trapped keyboard focus to the opened dialog window will remediate this issue, as no interactive element outside of the opened dialog window should be focusable, thus cannot be focus obscured.

For more information about technical requirements of modal dialogs, refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Modal Dialog". Also, consider/evaluate use of HTML dialog element <dialgo>. See HTML specifications – The dialog element and Can I Use – Dialog for browser support information.

Accompanying Files
Observation Details

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

Remediation Notes

Ensure, links can be differentiated from surrounding text content by at least one other visually perceivable factor. Preferably use underline to indicate link text as it is browser default and known pattern to users.

Accompanying Files
Observation Details
  • 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).

Remediation Notes

As interactive elements, links must have accessible names. Ensure, HTML link elements are not "empty", i.e. without link text content.

Ensure, link purpose can be determined from link text content or its programmatic context. Ideally, the link text itself will convey the link purpose. If it is not possible to use link text content, proper programmatic context may be:

  • the link's surrounding paragraph, if the paragraph itself has the purpose to introduce the link and is not too long, as e.g. a user of assistive technology would have to perceive the paragraph in full to understand the link purpose.

  • the link's directly preceding heading (e.g. the heading of a product card may be used to determine the purpose of this card's CTA link)

Observation Details

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

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.

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

Accompanying Files
Observation Details

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

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

Remediation Notes

Do not use semantic lists for non-list content. But do use semantic list for all list content.

Accompanying Files
Observation Details

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:

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

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

Accompanying Files
Observation Details

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:

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

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

Accompanying Files
Observation Details

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.

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.

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

Accompanying Files
Observation Details

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:

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

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

Accompanying Files
Observation Details

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"

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.

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

Accompanying Files
Observation Details

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

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.

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

Accompanying Files
Observation Details

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

Remediation Notes

Ensure proper use of semantic HTML.

  • Semantic elements must not solely be used for styling or layout purposes

  • All styling and layout changes must use CSS

  • Limit use of line breaks to intended purposes, e.g. in poetry or code snippets

Accompanying Files
Observation Details

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>

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.

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

Accompanying Files
Observation Details

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

Remediation Notes

Ensure, all text content is clearly visible, using color contrast ratios of 4.5:1 and higher. For large text content a reduced contrast ratio of 3:1 is acceptable, but not recommended.

Especially color variants that barely meet color contrast ratio requirements for default background colors are subsceptible to fail minimum color contrast ratio, when used on non-default background colors. When a certain color barely meets color contrast ratio on default white background, ensure, this color variant is only used on said background color and provide a different foreground color variant for darker background colors.

Ideally, aim for enhanced contrast ratio 7:1 (see 1.4.6 Contrast (Enhanced) (Level AAA)), to often ensure passing minimum contrast ratio, even on non-default background colors.

Side Note: this success criterion is not specifically about identification of links. When a link would have no underline and its color is the only way to differentiate from surrounding text, it is considered a failure under 1.4.1 Use of Color. This criterion is for all text content.

Accompanying Files
Observation Details

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.

Remediation Notes

Ensure, focus states of interactive elements can be differentiated from default, un-focused states by at least one other visually perceivable factor. The issue may be remediated by ensuring high enough color contrast ratio of 3:1 for difference between states.

Preferably though, use focus outlines to indicate focus state of interactive elements, as it is browser default and known pattern to users.

Accompanying Files
Observation Details

Observation Details

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.

Remediation Notes

Opening a dialog window by keyboard navigation must set the focus to the dialog window's content. Opening a dialog window must trap keyboard focus inside the dialog window, so underlying content cannot be accessed while dialog window is opened. Closing the dialog window, focus must be set to the triggering element again.

Ideally, the first focusable element in a dialog window can be used to close the dialog window, so opening and closing of a dialog window can be done without the need of navigating through other focusable elements. Although simple dialog windows, e.g. asking for confirmation, and providing "Accept" and "Cancel" buttons, might not have an explicit "Close" button and may set focus to the dialog window's "main purpose action" instead.

Accompanying Files
Observation Details
  • 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)

Remediation Notes

Ensure, using native, semantic HTML elements for interactive elements and not re-building existing functionality with generic elements like <div> and <span>.

Ensure, choosing the proper elements, depending on purpose (e.g. links, using <a href=""> to link to resources, and <button> to perform actions).

This way, the need for added JavaScript (e.g. on click events / event handlers) and ARIA methodologies is reduced to a minimum, which will ensure clean and simple code and backwards compatibility, will future-proof functionality, and will avoid issues with keyboard navigation or other assistive technology (see also 4.1.2 Name, Role, Value).

Observation Details

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

Accompanying Files
Observation Details

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

Remediation Notes

Do not use semantic lists for non-list content. But do use semantic list for all list content.

Observation Details

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>

Observation Details
  • "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.

Remediation Notes

Observation Details

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.

Remediation Notes

Please refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Observation Details
  • 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.

Remediation Notes

Please refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.