29 issues found on Smartwatch mit Gesundheitsfunktionen

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

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.

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" and the collapsible element in the stage section.

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 most FAQ items. Especially the link "Mehr Infos zum JohanniterCall" is included in each function section.

Side Note: The link list in section "Wie eine Smartwatch mit Gesundheitsfunktionen helfen kann bei" also uses links only differentiated by color. As those are just above minimum color contrast ratio, they alone do not constitute a failure of this success criterion.

Visually presented and logical order is

1. main heading "Für mehr Sicherheit und Aktivität – Die Telefonuhr mit SOS-Funktion" followed by

2. the question "Wie kann die Safety Watch als Gesundheitsuhr bei chronischen Krankheiten helfen?".

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.

The video "TCL Connect App herunterladen" has informative content in audio track but does not provide captions.

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 medical conditions. The collapsible uses a generic HTML element:

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

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

<a data-scroll-trigger="epilepsie" data-tealium-rel="..." class="...">
  Epilepsie
</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 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.

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. The button does not have a visible focus indicator, despite being focusable.

Heading structure as per code markup:

h1 Wie kann die Safety Watch als Gesundheitsuhr bei chronischen Krankheiten helfen?
  h2 Funktionen der Safety Watch
  h2 Gesundheitsuhr mit Notfallknopf
  h2 Gesundheitsuhr mit automatischer Sturzerkennung
  h2 Pulsmesser
  h2 Safety Watch als Fitnessuhr
  h2 Gesundheitsuhr mit Telefonfunktion
  h2 Gesundheitsuhr mit Standortubermittlung
  h2 Mobiler Notruf mit JohanniterCall
  h2 So hilft die Safety Watch bei chronischen Krankheiten
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Epilepsie helfen kann
    h3 Wie hilft eine Safety Watch Epileptikern im Alltag?
    h3 Wie kann eine Gesundheitsuhr bei Epilepsie unterstützen?
    h3 Warum ist eine Gesundheitsuhr wie die Safety Watch für Epileptiker besser geeignet als ein Fitnesstracker?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Asthma helfen kann
    h3 Sollte ich trotz Asthma Sport treiben?
    h3 Wie kann die Safety Watch bei einem Asthma-Notfall helfen?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Diabetes helfen kann
    h3 Wie kann die Safety Watch Diabetikern bei einer Unterzuckerung helfen?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Multiple Sklerose helfen kann
    h3 Wie kann die Safety Watch für mehr Sicherheit bei MS-Patienten sorgen?
  h2 Wie eine Smartwatch mit Gesundheitsfunktionen bei Bluthochdruck und Herz-Kreislauf-Erkrankungen helfen kann
    h3 Wie kann die Safety Watch Menschen mit einem erhöhten Risiko für Schlaganfälle oder Herzinfarkte helfen?
  h2 Safety Watch: Individualität in zwei Farben
  h2 Technische Daten
    h3 Wasserdicht
    h3 Akkulaufzeit
    h3 SOS-Taste
    h3 Funktioniert in
    h3 Speicher
    h3 Geeignet für
    h3 Gewicht
    h3 Abmessungen
  h2 Kostenlose App
  h2 TCL Connect App herunterladen
  h2 So funktioniert die Safety Watch
  h2 Weitere Fragen & Antworten zur Safety Watch
    h3 Warum ist die Akkulaufzeit der Safety Watch im Vergleich zu einem Fitnesstracker (z. B. fitbit) relativ kurz?
    h3 Werden der Puls und die Schritte permanent live gemessen und an die App übertragen?

Observations for this heading structure:

• Heading structure main heading does not match visual presentation

• Heading "Funktionen der Safety Watch" uses heading level 2; "Funktion" headings below also use heading level 2 instead of level 3

• Heading "So hilft die Safety Watch bei chronischen Krankheiten" uses heading level 2; "Chronische Krankheiten" headings below also use heading level 2 instead of level 3

• Most headings level 2 (see e.g. "Gesundheitsuhr mit Notfallknopf") 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

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

• A few headings of sections "Chronische Krankheiten" do use heading level 2 for "Wie eine Smartwatch mit Gesundheitsfunktionen bei X helfen kann" then also include a sub-heading "Wie kann die Safety Watch bei X helfen" basically as a duplicate

• Heading "TCL Connect App herunterladen" is part of "Kostenlose App" but is on same heading level

• Heading level 2 "So funktioniert die Safety Watch" is redundant to "Funktionen der Safety Watch" and also redundant to the page's main heading, as this is the topic / purpose of the whole page

Opening collapsible item can obscure underlying focused elements (partially AND completely).

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

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

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

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

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

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

The heading "So funktioniert die Safety Watch" does not accurately describe the section's content. The content is an ordered list of how to activate the watch.

Text content in element teaser__mainclaim teaser__mainclaim--left does not reflow properly on larger viewports. Tested on viewports ≥ 1296px.

The collapsible elements in each section do not show visible focus indicators.

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

<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

See observation details for "FAQ not screen reader accessible"

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

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

See attached screenshots for red dots, blue dots and empty paragraph tags.

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.

• Text emphasis with <b>

Links use <a data-scroll-trigger="scrollTarget"> instead of semantic <a href="#scrollTarget">. An HTML anchor element without href attribute, basically loses its link role and as such is not accessible to keyboard navigation and use via assistive technology.

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.