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

6 issues found on Cashback Einlösen

Page URL
https://www.telekom.de/unterwegs/cashback/cashback-einloesen

Issues List

Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Label in Name 2.5.3 (A)
Visible label is not matching interactive element's accessible name
Labels or Instructions 3.3.2 (A)
Input element "Aktionen Auswahl" does not have visible label
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Priority: Critical High Page: Cashback Einlösen 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: Serious Low Page: Cashback Einlösen 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.

  • "Zur Registrierung" using "Weiter zur Registrierung, 240 € Wechselbonus"

  • "0800 330 2202" using "Telefon anrufen"

Remediation Notes

Ensure, the visible label matches the accessible name of the interactive element. If it is not identical, the visible label must be part of the accessible name and should be the first part of the accessible name. Ideally, manually changing the accessible name should rarely if not never be necessary, as changing the visible label should always be the first option to remediate issues with the content.

Priority: Moderate Low Page: Cashback Einlösen 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 Low Page: Cashback Einlösen 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 Cashback bei der Telekom einlösen
  h2 MeinMagenta App
  h2 Zeitraum auswählen // Aktion auswählen
  h2 So funktioniert Cashback
    h3 Wunschtarif abgeschlossen
    h3 Cashback anfordern
    h3 Cashback erhalten
  h2 Häufig gestellte Fragen
    h3 Wie funktioniert die Teilnahme an der Aktion?
    h3 <!-- FAQ ITEMS -->

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

h1 Cashback bei der Telekom einlösen
  h2 So funktioniert Cashback
    h3 Wunschtarif abgeschlossen
    h3 Cashback anfordern
    h3 Cashback erhalten
  h2 Häufig gestellte Fragen
    h3 Wie funktioniert die Teilnahme an der Aktion?
    h3 <!-- FAQ ITEMS -->

Observations for heading structure:

  • Visually presented heading content does not use heading element

    • "MeinMagenta App"

    • "Zeitraum auswählen" // "Aktion auswählen"

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: Cashback Einlösen Observation Permalink
Accompanying Files
Observation Details

The <div role="tablist"> with the accessible name "Cashback einlösen für Mobilfunk oder Internet & Festnetz" does not have a corresponding visible label presented to the user.

Remediation Notes

Ensure, all interactive elements have visible labels presented to the user. The tab group must be clearly labeled. A manually set accessible name via aria-label is not sufficient.

Priority: Critical Low Page: Cashback Einlösen Observation Permalink
Observation Details

"Aktionen Auswahl" tabs ("Mobilfunk" / "Internet & Festnetz") are not using semantically correct HTML elements.

Navigating the tabs by assistive technology, focussing a tab panel automatically reveals the tab's content, making it difficult for users of assistive technology to reach the first tab's content.

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, all content is easily accessible for users of assistive technology. For the given tab component, it means, all tabs' content must be easily accessible. Focussing the tab panel (button) should not automatically reveal the tab content. Not for keyboard navigation and not for users of assistive technology.

For technical requirements of tabs, refer to BFIT-Bund Handreichung "Accessible design of user interface elements", the W3C patterns or a best practice example on GOV.UK Design System.