Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

11 issues found on Daten Tarife

Page URL
https://www.telekom.de/shop/tarife/daten-tarife

Issues List

Page Notes and General Remarks
Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Image is missing alt attribute
Non-text Content 1.1.1 (A)
Decorative icon has non-null alt attribute
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Use of Color 1.4.1 (A)
Links in body copy are indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Link text (blue) on grey background does not meet minimum contrast
Contrast (Minimum) 1.4.3 (AA)
Color contrast in sidebar is weak
Resize text 1.4.4 (AA)
Vertical space with visible fixed footer with zoomed text limited
Reflow 1.4.10 (AA)
Vertical space on small viewport extremely limited
Text Spacing 1.4.12 (AA)
Changing text spacing lets parts of text spill out of their containers
Priority: Critical Significant Page: Daten Tarife Observation Permalink
Observation Details

Page is

  • child page of "Tarife",

All (or most) of issues in parent pages and sibling pages are also found on this page. Ensure, following global issues and page specific issues of parent pages and sibling pages closely. Remediation of this page is only done, when all parent pages, all sibling pages, and all global issues are remediated.

Please refer to global observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Priority: Moderate Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • MagentaEins Icon

Remediation Notes

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

Priority: Critical Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • MagentaMobil Data: Datentarife zum attraktiven Preis

  • Erlebnisse teilen

  • Immer in Kontakt bleiben

  • Unterwegs Spaß haben

Images use "mit den Datentarifen" / "mit den Datentarifen der Telekom" which is not information, conveyed in the images and duplicate existing surrounding text content.

Remediation Notes

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

If the image does not give new information to the user, the image may be declared decorative, by using a null alt attribute <img src="..." alt="" />.

Priority: Critical Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • "Anmelden" button icon

Remediation Notes

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

  • purely decorative, set a null alt attribute as follows: <img alt="" />

  • not purely decorative, the alt attribute must not be null

Priority: Critical Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

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 MagentaMobil Data: Datentarife zum attraktiven Preis
  h2 Wählen Sie Ihren Datentarif
    h3 5 GB Datenvolumen
    h3 10 GB Datenvolumen
    h3 25 GB Datenvolumen
  h2 Bei MagentaMobil Data inklusive
    h3 Auf Wunsch: Gerät inklusive
    h3 Größtes 5G-Netz
    h3 Telekom HotSpot Flat
    h3 EU-Roaming
  h2 Gute Gründe für die Datentarife der Telekom
    h3 Erlebnisse teilen
    h3 Immer in Kontakt bleiben
    h3 Unterwegs Spaß haben
  h2 Häufig gestellte Fragen zu unseren Datentarifen
    h3 Was ist MagentaMobil Data?
    h3 Welcher Datentarif ist für mich der richtige?
    h3 Mit welcher Geschwindigkeit kann ich bei den Datentarifen der Telekom surfen?
    h3 Welcher Datentarif passt besser – ohne Laufzeit, mit Vertrag oder Prepaid?
  h2 Datentarife individuell nach Ihren Wünschen
    h3 Hervorragende Netzabdeckung mit Datentarifen mit LTE oder 5G
    h3 HotSpot-Flatrate schont Ihr Datenvolumen
  h2 Direkteinstiege
    h3 Smartphones
    h3 Tarife
    h3 Themen
  h2 Vorteile im Überblick
    h3 MagentaEINS Vorteil

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

h1 Wählen Sie Ihren Datentarif
  h2 Bei MagentaMobil Data inklusive
    h3 Auf Wunsch: Gerät inklusive
    h3 Größtes 5G-Netz
    h3 Telekom HotSpot Flat
    h3 EU-Roaming
  h2 Gute Gründe für die Datentarife der Telekom
    h3 Erlebnisse teilen
    h3 Immer in Kontakt bleiben
    h3 Unterwegs Spaß haben
  h2 Häufig gestellte Fragen zu unseren Datentarifen
    h3
  h2 Datentarife individuell nach Ihren Wünschen
    h3 Hervorragende Netzabdeckung mit Datentarifen mit LTE oder 5G
    h3 HotSpot-Flatrate schont Ihr Datenvolumen
  h2 Smartphones
  h2 Tarife
  h2 Themen
    h3 Vorteile im Überblick
      h4 MagentaEINS Vorteil

Observations for heading structure:

  • Visual main heading does not use semantic HTML heading element

  • Sub heading uses main heading <h1> element

  • Empty <h3> element at beginning of FAQ

  • FAQ items do not use heading elements

  • Heading "Direkteinstiege" does not use semantic HTML heading element

  • Direkteinstiege sub headings do not fit logically ("Wählen Sie Ihren Datentarif" → "Smartphone" / ...)

  • Sidebar has no heading level 2 to group its content, making "Vorteile im Überblick" a programmatic child of the preceding "Direkteinstiege" sub heading "Themen"

Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Side note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.

Priority: Serious Low Page: Daten Tarife Observation Permalink
Observation Details

Links are only differentiated from normal body text (black, rgb(38, 38, 38)) by use of color (blue, rgb(0, 115, 159)).

In addition, the contrast ratio of link text color and body text color also is insufficient (2.8:1 < 3:1).

Links can be found, e.g. in

  • footnote dialog windows "5G", as "Telekom Netz" link

  • Tariff carousel as "Preisliste, Leistungsbeschreibung und AGB" link

  • Tariff carousel "Tarifdetails" dialog window as "www.hotspot.de", "Produktinformationsblatt" ,"Preisliste, Leistungsbeschreibung und AGB" links

Remediation Notes

Ensure, links do not rely on color alone to be differentiated from (surrounding) body text. Preferably use underline to indicate text links as it is the default –thus user friendly– method.

Priority: Moderate Medium Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

On base viewport size of 1036×768px, page zoom of 200%, the available vertical space, due to fixed bottom bars, is just ~400px.

Remediation Notes

While not a failure for the given success criterion, the limited vertical space makes navigating the content very difficult. Evaluation of the need for the large fixed bottom bar should be done.

The fixed bottom bar could e.g. be shrunken by

  • decreasing margins and/or paddings,

  • decreasing the size of the primary button(s),

  • changing the layout to display price information and primary button side-by-side.

  • evaluating use of a smaller bar that shows more information in a collapsible

Priority: Serious Medium Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

On base viewport size of 320×256px and page zoom of 100%, the available vertical space with visible fixed bottom bar, is just 74px.

Remediation Notes

While not a (strict) failure for the given success criterion, the limited vertical space makes navigating the contents extremely difficult. Evaluation of the need for the large fixed bottom bar should be done.

The fixed bottom bar could e.g. be shrunken by

  • decreasing margins and/or paddings,

  • decreasing the size of the primary button(s),

  • changing the layout to display price information and primary button side-by-side.

  • evaluating use of a smaller bar that shows more information in a collapsible

Priority: Critical High Page: Daten Tarife Observation Permalink
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.

Priority: Best Practice Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

Color contrast ratio of grey text on grey background in sidebar (4.8:1), just meeting contrast minimum requirements (4.5:1). Given the contrast ratio and the smaller font size, while meeting the criterion's requirements, text could be more difficult to be read by certain user groups.

Remediation Notes

No remediation necessary, as the contrast ratio does exceed the required ratio slightly.

Priority: Serious Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

Link text on grey background has contrast ratio of 4.2:1 which does not meet Color contrast ratio minimum requirements of 4.5:1. See:

  • All links in grey area of sidebar

Remediation Notes

Ensure, all text content meets required contrast minimum.