37 issues found on Kids-Watch

Certain images are not loaded on viewports below 1296px. Reproducible by setting browser viewport to ≤1295px and reloading the page. This behavior exists on multiple pages and as such is marked a global observation. The following example code is taken from the first missing image on page "IoT-Verteilerseite" in section "Die Kids Watch für die Sicherheit Ihres Kindes":

<div class="teaser__mainvisual teaser__mainvisual--left">
  <img
    class="lazy teaser__mainvisual-image"
    src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;&quot; height=&quot;&quot; viewBox=&quot;0 0 1 1&quot;></svg>"
    data-src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
    alt="Die Kids Watch für die Sicherheit Ihres Kindes"
    title="Die Kids Watch für die Sicherheit Ihres Kindes"
  >
  <noscript>
    <img
      class="teaser__mainvisual-image"
      src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
      alt="Die Kids Watch für die Sicherheit Ihres Kindes"
      title="Die Kids Watch für die Sicherheit Ihres Kindes"
    />
  </noscript>
</div>

Observations about code markup:

• Image's src attribute not used to provide image source

• src attribute includes invalid character(s) (e.g. <)

• title attribute used and duplicate of alt attribute

• Unnecessary <noscript> used for image element that should not need javascript to be displayed

• Image tag missing / before closing >

• CSS class lazy used instead of image's built-in loading="lazy"

The reason for images not being loaded can be any combination of issues. See remediation notes for one recommendation to fix the issue by using clean, semantic HTML code.

The video "Was Eltern über die Kids Watch XPLORA X6 Play eSIM sagen" has informative content but does not provide captions.

Video "Was Eltern über die Kids Watch XPLORA X6 Play eSIM sagen" provides visual information but has no audio description available.

Some information provided only visually:

• Speaker's name (timestamp 0:02)

• XPLORA X6 Play eSIM visuals, colors, displays (timestamp 0:09)

• Wording "Eigenständigkeit" (timestamp 0:36)

The video "SOS-Knopf in Aktion" is classified as "video-only" as the audio track doe not provide any informative content. The video provides information via visually presented content that is not additionally provided in a non-visual way.

Parts of the video "So verbinden Sie die Kidswatch mit Ihrem Smartphone" can be classified as "video-only" as the audio track does not provide informative content for all video scenes. The video scenes provide information via visually presented content that is not additionally provided in a non-visual way.

Visually presented content with no audio alternative includes:

• "Wieso wird der Standort vielleicht nicht korrekt angezeigt" (timestamp 3:15)

Captions provided in the tutorial videos

• "So verbinden Sie die Kidswatch mit Ihrem Smartphone"

• "Erklärvideo zum Entkoppeln der Uhr"

are so-called open captions and as such are embedded in the video content of the video rather than closed captions that could be enabled / disabled by the user.

The provided open captions (white text on semi-transparent light orange background) do not meet general contrast ratios which makes perception more difficult.

While not a failure of this success criterion, the reason of providing captions is to include certain user groups. By providing captions with weak color contrast, those are then excluding other user groups.

Parts of the video "Erklärvideo zum Entkoppeln der Uhr" can be classified as "video-only" as the audio track does not provide informative content for all video scenes. The video scenes provide information via visually presented content that is not additionally provided in a non-visual way.

Visually presented content with no audio alternative includes:

• "Das Entkoppeln der Uhr..." (timestamp 0:03)

• "Kontakte löschen" (timestamp 0:31)

Navigating by assistive technology, focus order moves from main heading to green badge, resulting in the following announcement:

Wie funktioniert die Kids Watch?

Nur online

This implies unwanted meaning.

Link text "Hier geht's zur Anio 6" (#007faf) does not meet minimum contrast ratio against background (#F8F8F8). Contrast ratio is 4.2:1. Minimum required contrast ratio is 4.5:1

Decorative icons in background in section "Neugierig auf eine andere Kinderuhr mit GPS und Telefonfunktion?" are not marked as decorative and as such can be navigated to via assistive technology like screen readers. While not marked decorative, color contrast minimum shall be met. Color contrast of icons is below minimum (1.2:1 < 3:1).

Colored circles are used as interactive elements to choose watch band color in the watch graphic. Colors green (#BAD937) and pink (#EE84A0) do not have high enough color contrast ratio against the white background (1.6:1 and 2.5:1 respectively). A color contrast minimum of 3:1 must be met for all interactive elements, including buttons.

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.

All animations longer than 5 seconds must have a method to pause, stop, hide them. The animations of the smartwatch images have no such method.

Link text "Anzeigen" does not provide link purpose on its own. As the link is not part of an HTML paragraph element, the link does not have immediate text context. Also, the previous paragraph does only add "Zur Hilfe-Seite mit häufigen Fragen und Antworten" to the context. While the parent heading is "Kids Watch: So einfach geht's" and could help, identifying link purpose, the heading is not close enough to be count as context for purpose of this success criterion.

Heading structure as per code markup:

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

Observations for this heading structure:

• Main heading must describe topic / purpose of whole page. As "Wie funktioniert die Kids Watch?" it asks for functionality of the kids watch instead, implying every <h2> will describe watch functionalities, which is not the case; this renders some if not many headings of level 2 "incorrect"

• Technical data in "XPLORA X6 Play eSIM - Technische Daten" use headings for simple list content; also arguably "Geeignet für" and "Funktioniert in" are not considered technical specifications

• The FAQ heading "Warum braucht Ihr Kind eine Smartwatch mit GPS-Tracker?" is not at all answered by the FAQ item content

Heading structure is the most used form of navigating web pages by users of assistive technology, making it crucial to accurately use headings that describe the topic / purpose of their following content.

When opening a footnote dialog window, the keyboard focus is not set to said dialog window. This leads to multiple issues:

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

• The dialog window can not be closed with the 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.

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

Anchor links for on-page navigation are built using HTML button elements. Operating the link by keyboard, scrolls the page to the intended heading / section but does not move the focus. The focus stays on the link.

The video player in dialog windows cannot be operated by keyboard. The dialog window can be opened and closed by keyboard but the video player controls are not accessible via keyboard navigation.

Keyboard focus is trapped (also see 2.1.2 No Keyboard Trap) on close button.

The collapsible (caret icon) in intro section "Die Kinder Smartwatch XPLORA X6 Play eSIM funktioniert im Schulmodus so" can be expanded via keyboard navigation. Expanding the item should keep the focus on the same element so that a second click would collapse the item again.

Image uses text alternative "Kinder tragen in der Natur die Kids Watch XPLORA X6 am Handgelenk und schauen aus einem Zelt heraus."

• Not "Kinder" but "Kind" wears the watch

• The kids do not "schauen aus einem Zelt heraus"

• The actual main watch image is built-in as background image and has no appropriate text alternative

Image(s) in section "Eine Kinder Smartwatch – drei Farben" do not have purpose equivalent text alternatives. Text alternatives used:

• Armband der XPLORA X6

• Digitale Anzeige der XPLORA X6 (four times)

• Pfeil der auf verschiedenen Farbknöpfe zeigt (for "Gleich ausprobieren" graphic)

• Verpackung zu den verschiedenen Armbändern und Uhrrahmen.

Observations for these text alternatives:

• "Armband" implies an image of only the wristband; visually communicated is the watch as a whole; the purpose of the "Armband" image is not to only show the wristband, making the text alternative non-equivalent to the image's purpose

• "Digitale Anzeige" used for four different images; text alternatives must be as unique as the images' purpose. The same text alternative must only be used if the purpose of those images is the same as well

• "Pfeil" graphic including text "Gleich ausprobieren" does not mention said text in text alternative; when informative text content is part of a graphic, it must be part of the text alternative as well

• "Verpackung" but showing two "Verpackungen"; "zu den verschiedenen" without the context of "Erweiterungspakete", there is no easy way to tell what is meant by the "verschiedenen"; "Uhrrahmen" wording is not used before.

Image uses text alternative "XPLORA X6 Schuldmodus Kalender"

• Typo in "Schuldmodus"

• Calendar view is not shown as view of a smartwatch

Images use text alternative

• "Video Beispiel vom SOS-Knopf in Aktion"

• "Video Tutorial zum Download der Xplora App"

Image purpose is to show background image still of video.

Image uses text alternative "Kleiner Junge der rennt und mit der Xplora Schrittzählerfunktion Xplora Coins verdient." Text alternative of other image is used (duplicated) here.

Image uses text alternative "Kleiner Junge der rennt und mit der Xplora Schrittzählerfunktion Xplora Coins verdient."

• There are three kids in the image

• None of the kids are running

Store icons are used as functional images for store links. Being functional images, the image's purpose is to describe the function of the link rather than the contents of the image itself.

The icons use text alternatives:

• Icon des Apple App Store

• Icon des Google Play Store

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes.

The checkmark and cross icons in data table "Kids Watches im Vergleich" have no accessible text alternative set. As the icon's purpose is crucial to understanding the content, text alternatives must be present and accessible. The code structure for the icons is as follows:

<span class="...">
  <span class="..." aria-hidden="true">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="64.001"
      height="64"
      viewBox="0 0 64 64"
      role="img"
      class="..."
      focusable="false"
    >
      <path fill="#262626" d="..."></path>
    </svg>
  </span>
</span>

Observations:

• Icon parent uses aria-hidden="true"

• Icon has no accessible name as it misses the <title> element

• Icon uses focusable="false", which is not needed as SVGs are non-focusable elements

Heading structure as per code markup:

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

Observations for this heading structure:

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

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

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

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

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

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

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

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

Footnote trigger (star icon) does not meet minimum target size.

Interactive elements must have a target size of at least 24×24px. Minimum target size is required also for single icon buttons, stand-alone interactive icons and links. When target size is smaller, it will make it difficult for people to reliably interact with the elements. This includes people with motor disabilities, people using devices like styluses, people in moving vehicles, and mobile users altogether. Especially considering its use inside other interactive elements (e.g. footnote in badge) or multiple small interactive elements next to each other (e.g. social icons in a list).

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 may be triggered by:

• Footnotes

• Info Icons

• Buttons

Footnote dialog window is not keyboard accessible.

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.

The data table with class ComparisonTable__wrapper___KBtdH sets CSS cursor: grab. The cursor change implies non-existent interactivity. If the cursor is changed to imply grabbing navigation on smaller viewports, the cursor change should only apply to viewports that actually use grabbing functionality.