13 issues found on IoT-Verteilerseite

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.

Page title is "IoT: Intelligente Vernetzung im Alltag | Telekom" while the page's main content solely covers kids' smartwatches. The FAQ section holds some generic information about IoT but does not cover any connection of topic Internet of Things and the Telekom.

Using a page title that implies certain content without delivering the content on the page can become an issue for users of assistive technology.

Multiple links to the same target are using different accessible names and as such are not identified consistently. Components with the same functionality should be identified consistently. While this is no clear failure of success criterion 3.2.4 Consistent Identification, for the links on this page, it can become an issue in other situations. Thus, avoiding inconsistencies even in less critical situations sets the tone for all others.

Visually presented and logical order is

1. main heading "Internet of Things – Für die Liebsten nur das Beste" followed by

2. the question "Was ist IoT?".

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.

1. The contrast ratio of link text color and body text color is sufficient (3.4:1) and as such is no failure. Links can be found as "XPLORA X6 Play eSIM", "Anio 6" in body copy text

2. 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 as "eSIM", "WLAN-Router und -Repeater" in FAQ section "Das sollten Sie zum Thema IoT wissen"

Body copy and FAQ link text barely meets color contrast ratio minimum to its background. #007FAF against #FFFFFF has color contrast ratio of 4.5:1. While this does not constitute a failure of this success criterion, it is best practice to not just meet contrast ratio minimums.

For more information about relying on color to communicate function (e.g. for links), please refer to 1.4.1 Use of Color as well.

Page contains a lot of English terminology, many of which are not too established in "mainstream German". When such terms are met by assistive technology like screen readers, they are announced in the page's main language, which is set to German via HTML's lang="de-DE". Most text-to-speech software will struggle with pronunciation of English words in German language, making the announced text content hard to understand at certain points. Especially if technical terminology is used and target user group is broadly defined as "mainstream", understanding the text content can be difficult. Terminology affected by a language-mismatch are:

• Internet of Things

• IoT

• XPLORA

• Kids Watch

• X5 / X6 Play

• eSIM

• SOS

• NarrowBand

Some text, when text spacing is changed, spills out of its parent containers, making some text hard, other text impossible to read.

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

Images use corresponding heading as their text alternative. Heading content does not provide purpose equivalent text alternative to the images.

Visually presented heading structure does not match semantically determinable heading structure in order and markup. Visually presented heading structure is:

h1 Internet of Things
  h2 Was ist IoT?
  h2 Profitieren Sie mit unseren Internet‑of‑Things-Produkten
    h3 Die Kids Watch für die Sicherheit Ihres Kindes 
    h3 Die Anio 6 als sicherer Alltagsbegleiter für Kinder 
  h2 Das sollten Sie zum Thema IoT wissen
    h3 ...

While the determinable heading structure in code markup is as follows:

h1 Was ist IoT?
  h2 Profitieren Sie mit unseren Internet‑of‑Things-Produkten
    h3 Die Kids Watch für die Sicherheit Ihres Kindes 
    h3 Die Anio 6 als sicherer Alltagsbegleiter für Kinder 
  h2 Das sollten Sie zum Thema IoT wissen
    h3 ...

The visually used main heading "Internet of Things" is not at all part of the determinable heading structure.

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

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

Elements found:

• <br> (FAQ item "Wie steht es mit der Sicherheit bei Internet of Things?")