Page URL
https://www.telekom.de/smarte-produkte/iot

Issues List

Non-text Content 1.1.1 (A)
Images do not have purpose equivalent text alternative
Info and Relationships 1.3.1 (A)
Visually presented heading structure does not match semantically determinable heading structure
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Meaningful Sequence 1.3.2 (A)
Visually presented order not matching DOM order
Use of Color 1.4.1 (A)
Links in body copy are indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Links barely meet color contrast minimum
Text Spacing 1.4.12 (AA)
Changing text spacing lets parts of text spill out of their containers
Keyboard 2.1.1 (A)
FAQ not accessible via keyboard
Page Titled 2.4.2 (A)
Page titled "IoT" is about smartwatches for kids
Language of Parts 3.1.2 (AA)
Page contains a lot of English terminology
Consistent Identification 3.2.4 (AA)
Links to the same target are not identified consistently
Name, Role, Value 4.1.2 (A)
FAQ not screen reader accessible
Unrelated to Success Criteria / Best Practice
Images are not loaded on smaller viewports
Accompanying Files
Observation Details

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.

Remediation Notes

Ensure all images are either loaded on page load or correctly lazy loaded later on.

  • Use the image's src attribute for the image source

  • Do not use title attribute on HTML image element

  • Ensure valid HTML code by running a validator tool like W3C NuHtml Validator

  • Keep code consistent (e.g. image with / without trailing / at the end of the tag)

Simplify above-mentioned example code:

<div class="teaser__mainvisual teaser__mainvisual--left">
  <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"
    loading="lazy"
  />
</div>
Observation Details

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.

Remediation Notes

Use an accurate description of page topic / purpose as the page's title. Either

  • change page title to a more accurate one like "Smarte Uhren für Kinder – Das Internet der Dinge bei der Telekom"

  • or structure the page content to include IoT content and moving kids smartwatch content to a sub-section

Priority: Best Practice Low Page: IoT-Verteilerseite Observation Permalink
Observation Details

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.

Remediation Notes

To ensure a coherent user experience, linking to the same target multiple times from one page should be avoided. If this is unavoidable, consistent identification should be met by providing the same accessible name to all links with the same target. This could be done by setting internal content rules like these:

Given a landing page with body copy about PRODUCT
When adding a link to PRODUCT
Then use a semantic HTML link element <a>
And place the link at the first mention of PRODUCT in the body copy
And use the link text "Mehr über PRODUCT erfahren"


<a href="https://...">Mehr über PRODUCT erfahren</a>
Accompanying Files
Observation Details

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.

Remediation Notes

Visually presented order should follow the order in code markup. Ensure, the (presented) main heading "Internet of Things ..." is placed before the section "Was ist IoT?" in code markup.

Accompanying Files
Observation Details

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"

Remediation Notes

Ensure, all links do not rely on color alone to be differentiated from (surrounding) body text. Ideally, differences do not rely on color contrast, even when meeting 3:1 color contrast ratio.

Preferably use underline to indicate text links as it is the default –thus user friendly– method.

Priority: Best Practice Low Page: IoT-Verteilerseite Observation Permalink
Accompanying Files
Observation Details

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.

Observation Details

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

Remediation Notes

While it is usually not recommended to declare a different language for single words or short phrases, the context of technical terminology allows for an exception. Using <span lang="en"></span> constructs for repeated English terminology would ensure the possibility of correct announcement in assistive technology.

Accompanying Files
Observation Details

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

Remediation Notes

Containers of any type (e.g. badges, teasers, stages) must not use fixed dimensions, if they contain text content.

Observation Details

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

Remediation Notes

Ensure, using correct semantic HTML elements for all interactive elements. In case of accordions, these could be <detail> and <summary> constructs or ones with <button> as the accordion item "header".

Keyboard navigation is a must.

For custom building an accessible accordion component, please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion".

Accompanying Files
Observation Details

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

Remediation Notes

Ensure, providing purpose equivalent text alternatives to all non-decorative images. In this cases, accurate image descriptions are needed. E.g.:

  • Zwei verschiedene Smartwatches zeigen ihren Anruf-Bildschirm mit Bild der anrufenden Person (Mama) und Knöpfen zum Ablehnen oder Annehmen des Anrufs.

  • Im Vordergrund hervorgehoben eine Smartwatch in verschiedenen Farben. Grün, Schwarz, Pink. Die Uhren zeigen unterschiedliche Bildschirme. Schrittzähler, Anruf-Bildschirm, Zifferblatt. Im Hintergrund zwei Kinder in Waldlandschaft. Sie schauen zusammen auf eine Armbanduhr.

  • Zwei Kinder in einem Schulzimmer sitzen an ihren Tischen und schreiben. Das Kind im Vordergrund lächelt zufrieden. Es trägt eine Smartwatch mit pinkem Bildschirm-Rahmen.

Observation Details

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.

Remediation Notes
  • Main heading should provide accurate description of topic / purpose of page content; use <h1>Internet of Things</h1> as main heading

  • Move (visual) section heading to nested heading <h2>Was ist IoT?</h2>

Side note: "Profitieren Sie mit unseren Internet-of-Things-Produkten" implies the opportunity to "make profit" from smartwatches. "Profitieren Sie von ..." would be more fitting choice of word.

Observation Details

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

Remediation Notes

Building an accordion component from generic HTML elements or using semantic HTML elements with different functionality results in inaccessible user experiences, as a long list of requirements must be met. A few important ones:

  • For the area labeling, the button role must be communicated

  • The parent / child relationships of the elements within the accordion must be communicated

  • The status of the area labels must be communicated

  • The buttons with the area labels must have a concise and expressive Accessible Name

  • It must be possible to access, operate and exit the buttons with the area labels with assistive technology

  • Updates concerning the Accessible Name, value or status of the area labels must be communicated

  • The size and position of the area labels and areas must be communicated

Please see BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" for full details about necessary steps to build an accordion component, including presentation, operation, programming. Generally, for non-native complex components, functionally closest existing elements should be used (buttons, details/summary, ...).

For remediation recommendation, please also refer to observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

Observation Details

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?")

Remediation Notes

Ensure proper use of semantic HTML.

  • Semantic elements must not solely be used for styling or layout purposes

  • All styling and layout changes must use CSS

  • Limit use of line breaks to intended purposes, e.g. in poetry or code snippets