21 issues found on Android Betriebssystem

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

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

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

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.

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

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.

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

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

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

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.

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

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

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

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"

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

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.

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

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"

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.

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

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