38 issues found on Senioren Smartwatch

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.

FAQ section cannot be operated (expand / collapse) by keyboard navigation as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

• Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

• Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

• data-* attributes in description try to build accordion functionality

• <div class="accordion__content"> is an unnecessary hierarchy level

• A CSS paragraph class <p class="paragraph"> should not ever be needed

FAQ uses non-interactive description list <dl> to build accordion functionality. Using tabindex="0" allows (keyboard) focus of non-interactive <dt> element. Needed accessibility functionality however is not provided. Besides focus, an accordion item must accurately announce its state (collapsed / expanded) and its own interactivity (so the user knows it is operable), and a few more.

Side note: Failure of keyboard accessibility is noted in observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

Image does not have purpose equivalent text alternative. Image shows two specific colors, text alternative generically communicates "in zwei Farben".

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

Side note: Besides non-null alt attribute on decorative image, the used text alternative reads "Funktion X" while the actual content does not provide information about any functionality.

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:

• App Store

• Google Play Store

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

Images used in sections do not have purpose equivalent text alternatives. Images duplicate section headings or similar wordings as text alternative.

The video "TCL Connect App herunterladen" (duplicated as video "So einfach geht's") has informative content in audio track but does not provide captions.

List content uses generic container elements and numbered icon graphics to simulate list.

Visually presented and logical order is

1. main heading "Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion" followed by

2. the question "Was ist die Safety Watch?".

Text content order in DOM and accessibility tree however is reversed.

Side note: Visual main heading also does not use semantic HTML heading; see observation for 1.3.1 Info and Relationships.

Links are only differentiated from normal body text by use of color.

The contrast ratio of link text color and FAQ body text color is not sufficient (2.6:1 < 3:1) as it uses a different body text color (rgb(56, 56, 56)). Links can be found in FAQ items.

Badge text "Nicht nur für Telekom Kunden" does not have high. enough contrast ratio (2.2:1) against blue badge background.

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.

Some text, when text spacing is changed, spills out of its parent containers, making some text hard, other text impossible to read. This includes "shapes", the collapsible element in the stage section and the "Nicht nur für Telekom Kunden" badge.

A variety of interactive elements are not focusable by keyboard navigation. This includes the collapsible in main heading section and the link list of different watch functions. The collapsible uses a generic HTML element:

<div class="..." data-subline-addition="expander"></div>

The links in the watch functions link list do not have the obligatory href attribute for HTML link element:

<a data-scroll-trigger="telefonfunktion" data-tealium-rel="..." class="...">
  Telefonfunktion
</a>

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 video "Safety Watch TCL MT43AX" has informative content in audio track but does not provide captions.

The video "Safety Watch TCL MT43AX" has visually provided content that is not accessible in a non-visual format.

Tabular data is displayed with generic container elements. Navigation by row and or column is not possible.

Opening a footnote dialog window can obscure underlying focused elements (partially AND completely).

Since the dialog window cannot be closed via ESC in that situation, the underlying element cannot be made visible without removing the keyboard focus from it.

Stage section "Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion" & "Was ist die Safety Watch?" is visually presented as headings but not using HTML heading elements.

The heading "So einfach geht's" does not provide any information about the following content. Heading hierarchy into account, the content should be about:

"Die Telefonuhr mit SOS-Funktion für Senioren" → "So einfach geht's"

The actual content however describes a step-by-step guide to activate the Safety Watch.

The heading "Safety Watch TCL MT43AX" does not provide any information about the following content. Heading hierarchy into account, the content should be about:

"Die Telefonuhr mit SOS-Funktion für Senioren" → "Safety Watch TCL MT43AX"

The actual content however is a user story video.

The checkmark and cross icons in data table "Safety Watch & Doro Watch 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 video "Telekom Live Experience für die Safety Watch" has informative content in audio track but does not provide captions.

The video "Telekom Live Experience für die Safety Watch" has visually provided content that is not accessible in a non-visual format.

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

Description list used for accordion (FAQ)

Ordered lists are used for list content where the order is of importance. This can be step-to-step guides or breadcrumb navigation item lists. Arguably, in list content "Informationen zur Safety Watch zum Drucken:", the order is of no importance.

HTML element <b> is used for text emphasis in badge text content.

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:

h1 Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion
  h2 Was ist die Safety Watch?
    h3 Informationen zur Safety Watch zum Drucken
h1 Die Telefonuhr mit SOS-Funktion für Senioren
  h2 Telekom Live Experience für die Safety Watch
  h2 Einfach in Kontakt bleiben – Smartwatch mit Telefonfunktion
  h2 Notfallknopf – SOS-Uhr mit Notfallknopf
  h2 Schnelle Hilfe im Notfall – Smartwatch mit automatischer Sturzerkennung
  h2 Alles unter Kontrolle – Pulsmesser
  h2 Fit im Alltag – Schrittzähler
  h2 Sicherheit auf einen Blick – GPS-Tracking und sichere Bereiche festlegen
  h2 Johanniter – Professionelle Hilfe auf Knopfdruck – Mobiler Hausnotruf mit JohanniterCall
  h2 2 Farben nach Ihrem Geschmack
  h2 Technische Daten
  h2 Kostenlose App – TCL Connect App herunterladen
  h2 So einfach geht's
    h3 Hinweis
    h3 Nicht nur für Telekom Kunden
  h2 Safety Watch TCL MT43AX
    h3 Safety Watch & Doro Watch im Vergleich
    h3 Fragen & Antworten zur Safety Watch
      h4 <!-- FAQ item headings -->

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

h1 Die Telefonuhr mit SOS-Funktion für Senioren
  h2 Telekom Live Experience für die Safety Watch 
  h2 Smartwatch mit Telefonfunktion 
  h2 SOS-Uhr mit Notfallknopf 
  h2 Smartwatch mit automatischer Sturzerkennung 
  h2 Pulsmesser 
  h2 Schrittzähler 
  h2 GPS-Tracking und sichere Bereiche festlegen 
  h2 Mobiler Hausnotruf mit JohanniterCall 
  h2 2 Farben nach Ihrem Geschmack
  h2 Technische Daten
    h3 Wasserdicht
    h3 Akkulaufzeit
    h3 SOS-Taste
    h3 Funktioniert in
    h3 Speicher
    h3 Geeignet für
    h3 Gewicht
    h3 Abmessungen (mm)
  h2 TCL Connect App herunterladen 
  h2 So einfach geht's
  h2 Safety Watch TCL MT43AX
  h2 SAFETY WATCH & DORO WATCH IM VERGLEICH
  h2 Fragen & Antworten zur Safety Watch
    h3 <!-- FAQ item headings -->

Observations:

• Main heading duplicated by "Gemeinsam sicher fühlen" and "Die Telefonuhr mit SOS-Funktion für Senioren"

• Heading content "Gemeinsam sicher fühlen" and "Was ist die Safety Watch?" does not use HTML heading element

• Heading content "Informationen zur Safety Watch zum Drucken", "Hinweis", "Nicht nur für Telekom Kunden" uses generic emphasis (<strong>) instead of heading element

• "Technische Daten" uses heading elements level 3 for what arguably is simple list content

• Eyebrows of <h2> headings are not included in heading element, thus logically ordering it under preceding headings

• Heading "Safety Watch TCL MT43AX" visually presented as higher level heading as the following "SAFETY WATCH & DORO WATCH IM VERGLEICH" and "Fragen & Antworten zur Safety Watch" but uses same heading level (see attached screenshot)

Data table "Safety Watch & Doro Watch im Vergleich" does not use semantic HTML table structure, making it inaccessible to assistive technology.

The current structure has the order of

1. Column 2 (Safety Watch)

2. Column 3 (Doro Watch)

3. Column 1 (Row headings)

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

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.

Anchor links use <li data-scroll-trigger="scrollTarget"> instead of semantic link element with <a href="#scrollTarget">.

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.

The button teaser__subline-expander does not use semantic button element. Instead it uses <div data-subline-addition="expander">.