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

16 issues found on For Friends

Page URL
https://www.telekom.de/unterwegs/for-friends

Issues List

Non-text Content 1.1.1 (A)
Image is missing text alternative
Non-text Content 1.1.1 (A)
Icons in data table have no text alternative
Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Image is decorative but has text alternative
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of elements does not match code markup
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Use of Color 1.4.1 (A)
Links are indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Hovered links' text content does not have enough color contrast
Images of Text 1.4.5 (AA)
Text displayed as image
Reflow 1.4.10 (AA)
Elements partially obscured on smaller viewports
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Headings and Labels 2.4.6 (AA)
Headings do not accurately describe structured content
Label in Name 2.5.3 (A)
Visible label is not matching interactive element's accessible name
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Priority: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Text "UNLIMITED" is not accessible as text content and as such is not announced to assistive technology.

Remediation Notes

Ensure, all text content is presented as actual text.

Priority: Critical High Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Text content in certain containers may overflow the container's boundaries, when text spacings are changed, making some text harder, other text impossible to perceive. This often includes:

  • Stage areas

  • Badges

  • Manually outlined elements like buttons (e.g. footnote icon buttons)

  • Teasers

  • Card components

Remediation Notes

Container elements must not use fixed dimensions, if they contain text content, to allow proper reflow without obscuring / overlapping content. Changing text spacings to values

  • Line height (line spacing) to at least 1.5 times the font size;

  • Spacing following paragraphs to at least 2 times the font size;

  • Letter spacing (tracking) to at least 0.12 times the font size;

  • Word spacing to at least 0.16 times the font size.

must be possible and must not lead to any loss of content or functionality.

Priority: Best Practice Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

On smaller viewports, parts of interactive carousel pagination are obscured. While not a failure of the success criterion at hand, it can lead to accessibility issues and remediation is still recommended.

Priority: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Text content must meet minimum color contrast ratio of 4.5:1 to its background. Large text (>24px) content must meet minimum color contrast ratio of 3:1 to its background. The following text content does not meet the required minimum contrast ratios:

  • Body copy links with color #00739f barely go over 4.5:1 threshold but on hover, change color to #0082b2 which does not meet 4.5:1 minimum color contrast

See examples in attached screenshots.

Remediation Notes

Ensure, all text content is clearly visible, using color contrast ratios of 4.5:1 and higher. For large text content a reduced contrast ratio of 3:1 is acceptable, but not recommended.

Especially color variants that barely meet color contrast ratio requirements for default background colors are subsceptible to fail minimum color contrast ratio, when used on non-default background colors. When a certain color barely meets color contrast ratio on default white background, ensure, this color variant is only used on said background color and provide a different foreground color variant for darker background colors.

Ideally, aim for enhanced contrast ratio 7:1 (see 1.4.6 Contrast (Enhanced) (Level AAA)), to often ensure passing minimum contrast ratio, even on non-default background colors.

Side Note: this success criterion is not specifically about identification of links. When a link would have no underline and its color is the only way to differentiate from surrounding text, it is considered a failure under 1.4.1 Use of Color. This criterion is for all text content.

Priority: Serious Low Page: For Friends Observation Permalink
Observation Details

Links solely rely on color to be differentiated from other, surrounding text content and color contrast ratio of link text color to surrounding text color does not meet minimum required 3:1 color contrast ratio. Links, relying on color only and with insufficient color contrast ratio to surrounding text content include:

  • Netz / 5G dialog window

Remediation Notes

Ensure, links can be differentiated from surrounding text content by at least one other visually perceivable factor. Preferably use underline to indicate link text as it is browser default and known pattern to users.

Priority: Moderate Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Observations in heading structure:

  • Headings "PlusKarten für weitere Personen" and "Einfach zum Hauptvertrag hinzufügen" have no content

  • Heading "Sie haben bereits eine aktuelle for Friends Hauptkarte und wollen Zusatzkarten bestellen?" has single sub heading without any content; sub heading only has button as content

Priority: Moderate Low Page: For Friends Observation Permalink
Accompanying Files
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".

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

Priority: Critical Significant Page: For Friends Observation Permalink
Accompanying Files
Observation Details

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.

Emphasis, using <b> instead of <strong>.

Remediation Notes

Ensure proper use of semantic HTML.

  • Elements with needed or wanted functionality use the native HTML element, fitting said functionality

    • Emphasis of text content uses <strong> and <em> instead of <b> and <i>

Priority: Serious Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

What is arguably list content does not use semantic HTML list elements.

  • "Und so funktioniert es" step by step guide → ordered list

  • Paragraph content in section "Weitere for Friends Angebote", using hyphens instead of list elements

Remediation Notes

Do not use semantic lists for non-list content. But do use semantic list for all list content.

Priority: Critical Low Page: For Friends Observation Permalink
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 Telekom for Friends
  h2 Holt euch jetzt Unlimited
  h2 Und so funktioniert es
  h2 PlusKarten für weitere Personen
    h3 Je mehr, desto günstiger
    h3 Die neuen PlusKarten der Telekom in der Übersicht
    h3 Unbegrenztes Datenvolumen
    h3 Volle Flexibilität
    h3 Bei allen Karten inklusive
    h3 Sie haben bereits eine aktuelle for Friends Hauptkarte und wollen Zusatzkarten bestellen?
  h2 Weitere for Friends Angebote
    h3 MagentaMobil Data for Friends
    h3 Prepaid: Mehr Datenvolumen, gleicher Preis
    h3 Speedbox for Friends
    h3 Smart Connect for Friends
  h2 Sie sind bereits Kunde?
    h3 For Friends Vertrag verlängern
    h3 Vertrag in for Friends umstellen
  h2 Häufig gestellte Fragen
    h3 ...

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

h1 Telekom for Friends
  h2 Exklusiver Sparvorteil für Freunde von Telekom Mitarbeitern bis zu 30 % auf den monatlichen Grundpreis
  h2 Und so funktioniert es
    h3 Hauptkarte wählen
    h3 For Friends Vorteil sichern
    h3 LogIn erstellen
    h3 Fertig!
  h2 PlusKarten für weitere Personen
    h3 Einfach zum Hauptvertrag hinzufügen
  h2 Je mehr, desto günstiger Fußnoten anzeigen
  h2 Die neuen PlusKarten der Telekom in der Übersicht
  h2 Unbegrenztes Datenvolumen
  h2 Volle Flexibilität
  h2 Bei allen Karten inklusive
    h3 Telefon- und SMS-Flatrate
    h3 Größtes 5G-Netz Fußnoten anzeigen
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Sie haben bereits eine aktuelle for Friends Hauptkarte und wollen Zusatzkarten bestellen?
    h3 Einfach einloggen und Zusatzkarten für Ihre Familie und Freunde bestellen
  h2 Weitere for Friends Angebote
    h3 MagentaMobil Data for Friends
    h3 Prepaid: Mehr Datenvolumen, gleicher Preis
    h3 Speedbox for Friends
    h3 Smart Connect for Friends
  h2 Sie sind bereits Kunde?
    h3 For Friends Vertrag verlängern
    h3 Vertrag in for Friends umstellen
  h2 Häufig gestellte Fragen
    h3 ...

Observations for heading structure:

  • Content, visually presented as heading, does not use heading element - "Holt euch jetzt Unlimited"

  • Non-heading content (heading sublines) uses heading element

  • List content "Und so funktioniert es" uses heading elements

  • List content "Bei allen Karten inklusive" uses heading elements

  • Heading "PlusKarten für weitere Personen" has no content (see 2.4.6 Headings and Labels) and subsequent headings therefore are using same hierarchy heading levels instead of being one level lower

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: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Collapsible button uses <a href="#"> instead of semantic button element.

  • "Die neuen PlusKarten im Vergleich"

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.

Remediation Notes

Ensure, only semantic button elements are used for button functionality. <a href=""> → <button>

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

Priority: Moderate Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present as shown in attached screenshots.

  • Icons

  • SIM icons

Remediation Notes

Ensure, all purely decorative images are not accessible by assistive technology. Depending on the way, in image is embedded, the following methods can be used to remove it from the accessibility tree:

  • HTML image element: Set a null alt attribute as follows: <img alt="" />; do not use ARIA to hide the HTML image element

  • HTML SVG element: Remove the SVGs <title> element or keep it empty and use ARIA to explicitly hide the element to ensure highest compatibility across browsers and assistive technology: <svg aria-hidden="true">

Priority: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

All images must have text alternatives present. Either

  • null alt attribute for purely decorative or

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

Images with missing text alternatives:

  • Stage "Holt euch jetzt Unlimited" image

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 Medium Page: For Friends 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:

  • SIM icons

    • "Zusatzkarten für weitere Personen" while Text content is "1. PlusKarte 19,95 € mtl., 2.-5. PlusKarte 9,95 € mtl.";

    • hint "5. PlusKarte", so maximum number of cards, is not part of any close by accessible text content; even footnote talks about "Max. 10 Zusatzkarten"; Footnote "Ab der zweiten..." does not have any limit set;

    • "Unbegrenztes Datenvolumen" icon says "Hauptkarte Unlimited = 1. PlusKarte Unlimited", while alt attribute says "Unbegrenztes Datenvolumen für alle Karten" and nearby text says something different

    • "Volle Flexibilität" icon text alternative is "Laufzeit? Gerät? Gestalten Sie jede Karte unabhängig" while visually presented text content is "Hauptkarte Vertragslaufzeit: 24 Monate, PlusKarte Vertragslaufzeit: 0 Monate"

  • "Weitere for Friends Angebote"

    • Images duplicate section heading; either with same or similar wording

    • "Speedbox for Friends" image uses "Prepaid for Friends" text alternative

    • "Smart Connect for Friends" image uses "Prepaid for Friends" text alternative

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

  • SIM icons could be marked decorative, as long as all content that is included in the images, is also present in accessible text content nearby; this especially means, important information as a card maximum "bis 5. PlusKarte" MUST be present in accessible text content; as of now, no user of assistive technology can get this information easily (or at all)

  • Do not copy text alternatives to other images; as the images themselves, there shouldn't be a reason to have the exact same content multiple times; so unless the image serves exactly the same purpose, the text alternative should also be unique

  • Do not duplicate heading text content with images' text alternatives

Priority: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

The icons (checkmark, cross) in data table "Die neuen PlusKarten der Telekom in der Übersicht" have no text alternative and table cells are therefore announced "blank".

Users of assistive technology cannot access the intended information at all.

Remediation Notes

Ensure, all informative images have purpose equivalent text alternatives present and accessible to all users.

Side note about table headers: Table headers might be announced for each table cell for users of assistive technology; navigating row to row, the row header is announced, then the content of the cell. Navigating column to column, the same happens with column headers; as of now, the column headers are very content-rich and as such the whole header is announced for each cell; Ideally, only the most important content part that is distinguishing the columns/rows is part of the header; ("Basis"), "Plus", "Kids & Teens", "Data" would be a lot more user friendly; the repeating content ("MagentaMobil PlusKarte") could be omitted when described before the table; e.g. "Vergleichen sie die verschiedenen MagentaMobil PlusKarten und ihre Funktionen"

Priority: Serious Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Interactive elements, like links, buttons, inputs, must have a label that is visible at all times and an accessible name that is programmatically determinable. The visible label of interactive elements must be equal to, or part of the accessible name.

If the accessible name is changed programmatically to differ from the natively set name, the visible label must be part of it in the exact wording. If the accessible name is changed, ideally, the visible label is the first part of the accessible name.

Assistive technology like voice control software uses the accessible name to control interactive elements. By stating the accessible name, the interactive element can be activated. So to activate a button, labeled "Submit", a user of voice control software can say "Click button Submit". If the accessible name of the button has been changed to "Send Form", the user is not able to access the button this way. If the accessible name of the button has been changed to "Submit Form", the name differs from the visible label but still includes the visible name as first part, making it still accessible to voice control software.

  • "Navigation" items use aria-label="Navigation Item XXX"

Remediation Notes

Visible label should ideally be the same as the accessible name. If not, then label must be part of the accessible name and should be the first part of the accessible name.

  • Remove manually set aria-label from links as text content already sets the needed accessible name

Instead of the current markup:

<a 
  class="..." 
  href="..." 
  data-tealium-rel="..." 
  aria-label="Navigation Item XXX"
>
  <span class="...">
    <span class="..." aria-hidden="true">
      <svg ... focusable="false">...</svg>
   </span>
  </span>
  <span class="...">
    Prepaid<br>
    for Friends
    <span class="...">
      <span class="..." aria-hidden="true">
        <svg ... focusable="false">...</svg>
      </span>
    </span>
  </span>
</a>

The link should be

<a href="...">
  <svg aria-hidden="true">...</svg>
  <span>
    <span>Prepaid for Friends</span>
    <svg aria-hidden="true">...</svg>
  </span>
</a>

This will hide the icon and the caret link indicator from screen readers and use the visible label "Prepaid for Friends" as the accessible name of the link.