Page URL
https://www.telekom.de/unterwegs/android-betriebssystem

Issues List

Non-text Content 1.1.1 (A)
Background image without text alternative
Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
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 text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Image text alternative "wrong way round"
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 elements 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)
Semantic HTML elements are used for styling or layout purposes
Use of Color 1.4.1 (A)
Links are indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Text content does not have enough color contrast
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Focus Order 2.4.3 (A)
Carousel navigation and pagination buttons in mixed order
Headings and Labels 2.4.6 (AA)
Headings do not accurately describe topic/purpose of structured content
Label in Name 2.5.3 (A)
Visible label is not matching interactive element's accessible name
Language of Parts 3.1.2 (AA)
Non-default language parts not identified via `lang` attribute
On Focus 3.2.1 (A)
Focusing info icons shifts layout
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
Improper use of landmarks
Unrelated to Success Criteria / Best Practice
Navigation landmark uses wording "navigation" in label
Accompanying Files
Observation Details

The carousel in section "Android-Handys völlig neu erleben - mit Google AI" uses navigation buttons and pagination buttons. The focus order is

  1. Navigation – Previous

  2. Pagination

  3. Navigation – Next

Remediation Notes

When using pagination and navigation on a carousel, the mechanisms should be independently usable.

Observation Details

The page has multiple occurrences of non-default language parts (english) that might lead to issues with assistive technology, trying to announce English utterances in German language. Those are e.g.:

  • Google on Android

  • Google Play Protect

  • Safe Browsing

  • Sandboxing

  • Circle to Search

  • Powered by Android

Remediation Notes

Ideally, those phrases use the lang attribute to ensure accurate announcements with assistive technology.

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

Focusing the info icons in section "Android-Handys völlig neu erleben - mit Google AI" does shift the content layout, due to use of :focus-visible CSS stylings, effecting position and padding.

Remediation Notes

Ensure, focusing an element does not change its dimensions, position, margins, and paddings.

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

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

Priority: Critical Significant Page: Android Betriebssystem Observation Permalink
Accompanying Files
Observation Details

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.

Remediation Notes

Ensure proper use of semantic HTML.

  • Elements with needed or wanted functionality use the native HTML element, fitting said functionality

    • Links use <a href="">

    • Buttons use <button>

    • Lists use <ul>, <ol>, <dl>; this includes all list content (e.g. navigations and lists of articles / cards)

    • Headings use <h1>, <h2>, <h3>, <h4>

    • Emphasis of text content uses <strong> and <em> instead of <b> and <i>

    • ...

  • Only content with that functionality uses said HTML elements.

  • No grouping for layout or styling is done, using semantic HTML elements; use <div> and <span> only

  • No styling is done, using semantic HTML elements; this includes creating paragraphs with line break elements or spacings with empty paragraphs

Accompanying Files
Observation Details

Step by step guide in "Neues Android-Smartphone. Alles bleibt beim Alten." arguably is list content but does not use list element.

Remediation Notes

Accompanying Files
Observation Details

The section navigation uses "Sektionen Navigation" as navigation label. "Navigation" is always announced by assistive technology, so including the wording in the label duplicates announcement as "Sektionen Navigation, Navigation".

Accompanying Files
Observation Details
  • Multiple main landmarks used

  • Main is nested within other landmark

  • Sections / Regions are used instead of correct heading structure

Landmarks may be used for on page navigation by users of assistive technology and as such should follow best practices.

Accompanying Files
Observation Details

Navigation links use <a href="#"> instead of semantic button element. Observations:

  • Improper use of href attribute

  • Use of title attribute

  • Multiple links have the same visible label "Mehr erfahren"; the first occurrence is in the "Sternstunde der Fotografie" slide in the hero section; as the visible label is e.g. used by users of speech recognition software, it is important to have unique link labels for every unique link target; using the same visible label implies the same link target


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

Observation Details
  • Hero carousel CTAs

    • "Mehr erfahren" → "Jetzt mehr erfahren über das neue Xiaomi 15"

    • "Jetzt bestellen" → "Das Samsung Galaxy S25 Ultra jetzt bestellen"

    • "Jetzt kaufen" → "Zur Auswahl"

    • "Zum Angebot" → "Das neue Google Pixel 9 Pro entdecken"

  • "Mehr erfahren" links in on-page navigation

    • "Mehr erfahren" → "Springe weiter zu Sektion ..."

  • Info icons in AI section

    • TOPIC + info icon → "Erfahre mehr über TOPIC"


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

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:

  • "Telekom Netz" in 5G/Netz dialog window

  • "www.telekom.de/agb" in Ankaufsbonus 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.

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:

  <!-- Hero carousel -->
  h2 Sternstunde der Fotografie
  h2 Das neue Samsung im besten 5G-Netz
  h2 Google on Android
  h2 Das neue Google Pixel 9 Pro mit Gemini

  h2 Deine Lieblings-Apps. Auf deinem Android-Handy.
  h2 Dein Android-Handy rundum geschützt
  h2 Du entscheidest, was zu dir passt
  h2 Mehr erleben mit Google
    h3 Von Hand voll zu Hand frei 
    h3 Mehr Verbindung erleben
    h3 Entfalten und neue Welten entdecken - mit Google
    h3 „Hey Google, mach ein Selfie“
  h2 Android-Handys völlig neu erleben - mit Google AI
    h3 Gemini Live – Chatte mit Gemini
    h3 Gemini-Erweiterungen – Greife mit Gemini auf Gmail, Maps, Tasks und mehr zu
    h3 Schneller und smarter Zugriff – Dein integrierter KI-Assistent von Google
    h3 Circle to Search – Die neue Art zu suchen
    h3 Magische Textvorschläge – Ganz einfach die richtigen Worte finden
    h3 Fotomoji – Erstelle deine eigenen Emojis
    h3 Beste Aufnahmen – Gruppenbilder, auf denen sich alle gefallen
  h2 Powered by Android
  h2 Pixel-Geräte
  h2 Samsung-Geräte
  h2 Neues Android-Smartphone. Alles bleibt beim Alten.
  h2 Finde das Android-Gerät, das am besten zu dir passt.

  h2 Häufig gestellte Fragen zu Android Handys
    h3 Was ist ein Smartphone mit Android?
    <!-- FAQ ITEMS -->

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

h1 Deine Lieblings-Apps. Auf deinem Android-Handy.
  h2 Dein Android-Handy rundum geschützt
  h2 Du entscheidest, was zu dir passt
  h2 Android-Handys völlig neu erleben - mit Google AI
    h3 Chatte mit Gemini
    h3 Greife mit Gemini auf Gmail, Maps, Tasks und mehr zu
    h3 Dein integrierter KI-Assistent von Google
    h3 Die neue Art zu suchen
    h3 Ganz einfach die richtigen Worte finden
    h3 Erstelle deine eigenen Emojis
    h3 Gruppenbilder, auf denen sich alle gefallen
  h2 Neues Android-Smartphone. Alles bleibt beim Alten.
  h2 Finde das Android-Gerät, das am besten zu dir passt.
  h2 Häufig gestellte Fragen zu Android Handys
    h3 Was ist ein Smartphone mit Android?
    h3 Was sind die Vorteile von Android?
    h3 Können Android-Handys ohne Google Konto genutzt werden?
    h3 Was ist der Unterschied zwischen iPhone und Android?

Observations for heading structure:

  • No visual main heading identifiable; <h1> tag styled the same as level 2 headings

  • Main heading is "Deine Lieblings-Apps. Auf deinem Android-Handy.", while page title is "Android & Telekom: Handys, Tablets und mehr | Telekom"

  • Hero carousel headings do not use heading elements

  • Inconsistencies in use of heading elements and stylings; visually presented structure is barely reflected in code structure

Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Build out the base outline / structure of the page content without styling by use of semantic HTML elements and rarely (or better, not at all) change visual presentation too much. If visual presentation is changed, ensure heading structure is still presented visually. Base rules to follow:

  • Font size usually decrease with lower heading levels

  • Font size of body copy usually is smaller than of heading elements

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.

Observation Details

Content is structured by using HTML heading elements. The used heading structure does not accurately fit the content it structures. The code structure of used heading elements is as follows:

h1 Deine Lieblings-Apps. Auf deinem Android-Handy.
  h2 Dein Android-Handy rundum geschützt
  h2 Du entscheidest, was zu dir passt
  h2 Android-Handys völlig neu erleben - mit Google AI
    h3 Chatte mit Gemini
    h3 Greife mit Gemini auf Gmail, Maps, Tasks und mehr zu
    h3 Dein integrierter KI-Assistent von Google
    h3 Die neue Art zu suchen
    h3 Ganz einfach die richtigen Worte finden
    h3 Erstelle deine eigenen Emojis
    h3 Gruppenbilder, auf denen sich alle gefallen
  h2 Neues Android-Smartphone. Alles bleibt beim Alten.
  h2 Finde das Android-Gerät, das am besten zu dir passt.
  h2 Häufig gestellte Fragen zu Android Handys
    h3 Was ist ein Smartphone mit Android?
    h3 Was sind die Vorteile von Android?
    h3 Können Android-Handys ohne Google Konto genutzt werden?
    h3 Was ist der Unterschied zwischen iPhone und Android?

Observations about description of topic/purpose:

  • Main heading "Deine Lieblings-Apps. Auf deinem Android-Handy." implies page topic is "Android Apps"

  • All headings level 2 are sub headings of main heading, implying related topics to "Android Apps"

Remediation Notes

Ensure, all content, structured by headings, is accurately described by said headings. This includes directly preceding heading and all headings from higher hierarchy levels. Example content:

Einfach einkreisen und suchen - ohne zwischen Apps zu wechseln.

This content is structured as follows:

  1. Deine Lieblings-Apps. Auf deinem Android-Handy.

    1. Android-Handys völlig neu erleben – mit Google AI

      1. Die neue Art zu suchen

        1. Einfach einkreisen und suchen - ohne zwischen Apps zu wechseln.

While heading levels 3 and 2 arguably describe the content topic, heading level 1 does not. With all content, these structure hierarchy must be accurate.

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:

  • Text on background images

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

Images in hero carousel are implemented as background images and have no purpose equivalent text alternative present.

  • Xiaomi 15

  • Samsung Galaxy S25 Ultra

Other images without text alternative in all other sections. See attached screenshots.

As no text alternative is present, users of assistive technology cannot access the images' content.

Remediation Notes

Ensure, all image content that is not purely decorative has proper, purpose equivalent text alternatives present. For informational images, this includes accurate description of image purpose / content, including all text content implemented in the image

Accompanying Files
Observation Details

"Google on Android" image in hero carousel uses text alternative "Google Pixel 8a und Xiaomi 14" while order of devices is "Xiaomi 14 und Google Pixel 8a". It is best practice to accurately describe images, which includes implied reading order.

In this case, the order does not effect the meaning and as such, is no strict failure of the success criterion. Thus, the observation is marked as priority 4 – Minor.

Remediation Notes

Ensure accurate text alternatives. As a best practice, follow natural reading order of the default language. As default language is set de-DE, usually description top-down and left-right is used for linear, non-hierarchical content.

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:

  • "Google on Android" logo has text alternative "Android on Google"

Remediation Notes

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 in section "Dein Android-Handy rundum geschützt".

  • "Chrome" uses Google Play icon

  • "Google One" uses Google Wallet icon

Arguably, the icons also are decorative. So a null alt attribute is more suited as the current wrong ones.

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

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, see attached screenshots

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

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:

  • Manufacturer logos are used as links. As such, the purpose is to describe the link target, not the manufacturers logo

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