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

9 issues found on Flex Tarife Weitere Informationen

Page URL
https://www.telekom.de/unterwegs/flex-tarife-weitere-informationen

Issues List

Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Info and Relationships 1.3.1 (A)
Visual presentation of elements does not match code markup
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
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 are indicated by color only
Use of Color 1.4.1 (A)
Interactive element's focus state indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Text content does not have enough color contrast
Contrast (Minimum) 1.4.3 (AA)
Text content does not have enough color contrast
Keyboard 2.1.1 (A)
Interactive element, operable by mouse, not accessible by keyboard
Priority: Serious Low Page: Flex Tarife Weitere Informationen 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:

  • "Telekom Netz" in 5G / Netz dialog windows

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: Serious Low Page: Flex Tarife Weitere Informationen Observation Permalink
Accompanying Files
Observation Details

  • "Mehr zu MagentaEINS" magenta button

Focusing interactive element adds visual focus indicator that does solely rely on color to be differentiated from default, un-focused state and color contrast ratio of default and focused states does not meet minimum required 3:1 color contrast ratio. Interactive elements' focus states, relying on color only and with insufficient color contrast ratio to default, un-focused state include:

  • Links

  • Buttons

  • Input elements (e.g. radio buttons)

  • Accordion items

Remediation Notes

Ensure, focus states of interactive elements can be differentiated from default, un-focused states by at least one other visually perceivable factor. The issue may be remediated by ensuring high enough color contrast ratio of 3:1 for difference between states.

Preferably though, use focus outlines to indicate focus state of interactive elements, as it is browser default and known pattern to users.

Priority: Critical Low Page: Flex Tarife Weitere Informationen 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:

  • "Mehr zu MagentaEINS" button while button is focused

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: Critical Low Page: Flex Tarife Weitere Informationen 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:

  • Secondary links "Zu ..." on hover

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: Critical Low Page: Flex Tarife Weitere Informationen 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:

  • Flex Smartphone-Tarife

  • Flex Daten-Tarife

Image text alternatives duplicate existing heading 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).

Priority: Moderate Low Page: Flex Tarife Weitere Informationen 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".

Side note: While not a failure of this criterion, screenshot, showing a single paragraph element also shows "line breaks" in paragraph. Line breaks are made by using <span> elements inside the paragraph. Line breaks like these should be avoided, as the breaks happen on all viewport widths and might lead to unwanted styling issues (see attached screenshot)

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: Flex Tarife Weitere Informationen Observation Permalink
Accompanying Files
Observation Details

Text Emphasis via <b> element.

Remediation Notes

Ensure, emphasis of text content uses <strong> and <em> instead of <b> and <i>.

In this instance, the whole paragraph is emphasized and as such should be styled via CSS, instead of using HTML elements for styling purposes.

Priority: Moderate Low Page: Flex Tarife Weitere Informationen 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 Bleiben Sie flexibel
  h2 Sie möchten flexibel bleiben und suchen zudem einen Vertrag ohne vergünstigtes Gerät?
  h2 Smartphone-Tarife
  h2 Daten-Tarife
  h2 Flexibel mit Gerät
  h2 Mit MagentaEINS von flexiblen Verträgen im Mobilfunk profitieren
  h2 Günstige Geräte mit Vertragslaufzeit

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

h1 Bleiben Sie flexibel
  h2 Mit den flexiblen Tarifen der Telekom – ohne Mindestlaufzeit und jederzeit kündbar! Egal ob für´s Smartphone oder zum Surfen mit Tablet oder Laptop – im besten Netz.
  h2 Sie möchten flexibel bleiben und suchen zudem einen Vertrag ohne vergünstigtes Gerät?
  h2 Smartphone-Tarife
  h2 Daten-Tarife
  h2 Flexibel mit Gerät
  h2 Mit MagentaEINS von flexiblen Verträgen im Mobilfunk profitieren
  h2 Günstige Geräte mit Vertragslaufzeit

Observations for heading structure:

  • Non-heading content using heading element (first heading level 2)

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 High Page: Flex Tarife Weitere Informationen Observation Permalink
Observation Details

"Telekom Netz" link in 5G / Netz dialog windows cannot always be interacted with by keyboard navigation. There are three occurrences of said dialog window on the page.

  1. Navigating by keyboard only,

  2. opening the first dialog window, moving to link and back to close button, closing the dialog window again.

  3. Repeating this for the other two dialog windows, the dialog windows will open but leaving the link inside unable to be accessed by keyboard navigation.

This is usually happening when non-semantic HTML elements are used and functionality is not properly re-built with JavaScript and ARIA.

Remediation Notes

All interactive elements should use existing, native, semantic HTML elements to avoid these errors. For technical requirements, also refer to BFIT-Bund Handreichung "Accessible design of user interface elements" (Dialog windows).

Note: As this observation is marked in 2.1.1 Keyboard, it will not again be marked in 4.1.2 Name, Role, Value again, despite being an issue of both success criteria. The observation should be remediated with high priority, as footnote dialog windows are being used globally on most pages.