36 issues found on Kider Uhr GPS Oneshop

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

Image(s) in section "Die GPS-Kinderuhr –so individuell wie Ihr Kind" do not have purpose equivalent text alternatives. Text alternatives used shown in screenshot.

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

• "Armband Faecher" does not explain what "Fächer" means

Images use text alternative

• "Empfehlervideo"

• "Video Beispiel vom SOS-Knopf in Aktion"

• "Video Tutorial zum Download der Anio 6 App"

Image purpose is to show background image still of video.

Image uses text alternative "Kids Watch Anio im Schulmodus und daneben Smartphone mit geöffneter Anio App"

• Text alternative used twice on two different images.

• Text alternative does not match content of "background" image (two girls, wearing watch)

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 "GPS-Kinderuhren im Vergleich: Anio 6 vs. XPLORA 6 Play eSIM" 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

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.

The video "Was Eltern über die GPS-Kinderuhr Anio 6 sagen:" has informative content but does not provide captions.

The video "So verbinden Sie die GPS-Kinderuhr mit Ihrem Smartphone" has informative content but does not provide captions.

Video "Was Eltern über die GPS-Kinderuhr Anio 6 sagen" provides visual information but has no audio description available.

Some information provided only visually:

• "deutscher Server und App Made in Germany" & "Mehr Freiheit bei gleicher Sicherheit dank SOS" (timestamp: 0:33)

Heading structure as per code markup:

h1 Was ist das Besondere an der Anio Kinderuhr mit GPS?
  h2 Für mehr Sicherheit und Selbständigkeit
  h2 Die GPS-Kinderuhr – so individuell wie Ihr Kind
  h2 Was Eltern über die GPS-Kinderuhr Anio 6 sagen
  h2 Die Kinderuhr mit GPS
  h2 SOS-Knopf der Kinderuhr mit GPS
  h2 Sichere Bereiche festlegen
  h2 Schulmodus bei der Kinderuhr mit GPS
  h2 Datenschutz
  h2 Schrittzähler
  h2 Lern-Ziffernblatt
  h2 Kinderuhr mit GPS Anio 6: So einfach geht's
  h2 Kinderuhr mit GPS Anio 6:So einfach geht's
  h2 Kinderuhr mit GPS Anio 6 - 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 GPS-Kinderuhren im Vergleich: Anio 6 vs. XPLORA 6 Play eSIM
  h2 Vergleich der technischen Daten von Anio 6 und XPLORA X6 Play eSIM
  h2 Fragen & Antworten zur GPS-Kinderuhr Anio 6
  h2 Smartphones
  h2 Tarife
  h2 Themen

Observations for this heading structure:

• Heading structure main heading "Was ist das Besondere an der Anio Kinderuhr mit GPS?" & "Für mehr Sicherheit und Selbständigkeit" does not match visual presentation

• Main heading implies all content on page is about "Besonderheiten" of Anio watch

• "Für mehr Sicherheit und Selbstständigkeit" does not accurately describes its following content

• Most headings level 2 add an "eyebrow" / "topline" above the heading; visual presentation implies a connection of heading and eyebrow, while markup adds eyebrow to the preceding heading every time, removing the implied connection

• Heading "Kinderuhr mit GPS Anio 6: So einfach geht's" is duplicated in code

• Content in section "Technische Daten" uses headings level 3 while being displayed as list content

• "Direkteinstiege" headings are on level 2, instead of being grouped by "Direkteinstiege"

• FAQ items do not show as headings

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

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

• content in "Technische Daten" (using heading structure right now)

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

Was ist das Besondere an der Anio Kinderuhr mit GPS?

30 Jahre

Decorative icon in background in section "Schulmodus bei der Kinderuhr mit GPS" is 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. Color green (#9FBF54) does not have high enough color contrast ratio against the white background (2.1:1). 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.

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 "Das Besondere an der Anio 6 ist die Reduktion auf das Wesentliche:" 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.

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.

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.

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 "Kinderuhr mit GPS Anio 6: 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 Was ist das Besondere an der Anio Kinderuhr mit GPS?
  h2 Für mehr Sicherheit und Selbständigkeit
  h2 Die GPS-Kinderuhr – so individuell wie Ihr Kind
  h2 Was Eltern über die GPS-Kinderuhr Anio 6 sagen
  h2 Die Kinderuhr mit GPS
  h2 SOS-Knopf der Kinderuhr mit GPS
  h2 Sichere Bereiche festlegen
  h2 Schulmodus bei der Kinderuhr mit GPS
  h2 Datenschutz
  h2 Schrittzähler
  h2 Lern-Ziffernblatt
  h2 Kinderuhr mit GPS Anio 6: So einfach geht's
  h2 Kinderuhr mit GPS Anio 6:So einfach geht's
  h2 Kinderuhr mit GPS Anio 6 - 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 GPS-Kinderuhren im Vergleich: Anio 6 vs. XPLORA 6 Play eSIM
  h2 Vergleich der technischen Daten von Anio 6 und XPLORA X6 Play eSIM
  h2 Fragen & Antworten zur GPS-Kinderuhr Anio 6
  h2 Smartphones
  h2 Tarife
  h2 Themen

Observations for this heading structure:

• Main heading must describe topic / purpose of whole page. As "Was ist das Besondere an der Anio Kinderuhr mit GPS?" it asks for "Besonderheiten" of the watch instead, implying every <h2> will describe one "Besonderheit", which is not the case; this renders some if not many headings of level 2 "incorrect"

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

• Some headings repeat the name of the watch (Kinderuhr mit GPS Anio 6: So einfach geht's, Kinderuhr mit GPS Anio 6:So einfach geht's, Kinderuhr mit GPS Anio 6 - Technische Daten); while repetition is not a failure of this success criterion:

  • exact duplication should always be avoided, as using the same heading implies the same purpose of following content

  • "Technische Daten" would suffice, if main heading of page accurately introduces the watch name

• "Kinderuhr mit GPS Anio 6: So einfach geht's" does not describe content purpose; "So einfach geht's" – better "Einrichtung der Anio 6 mit dem Smartphone – kinderleicht"

• The FAQ section does not use headings

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.

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

The data table with class ComparisonTable__wrapper___... 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.

• Emphasis is solely conveyed by color (magenta)

• <b> used for emphasis

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.

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.

Some text content is written in a way, assistive technology has problems to announce it correctly. I will list fixes for some issues in the remediation notes.

The :visited link style in "Direkteinstiege" section makes visited links barely visible on magenta background color.

Content in section "SOS Knopf der Kinderuhr mit GPS" becomes unreadable on 200% text zoom, as the image used as video still background is scaling with the text zoom.

Content in section "SOS Knopf der Kinderuhr mit GPS" becomes unreadable on 200% text zoom, as the image used as video still background is scaling with the text zoom.

Content in section "SOS Knopf der Kinderuhr mit GPS" becomes unreadable on 320px viewport width, as the image used as video still background is scaling with the text zoom.

Links use <button> instead of semantic link element.

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.