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

1.3.1 Info and Relationships (A) "Ich bin unter 28 Jahre alt" toggle switch / link

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

The toggle switch "Ich bin unter 28 Jahre alt" does not use semantic HTML elements for a toggle switch. The switch functions as a link. The markup does not reflect this.

  • Presented as toggle switch

  • Functions like a link

  • Marked up without any interactive elements

Code for the link is:

<span class="co-ab_outerWrapper co-ab_outerWrapper--desktop">
  <span class="co-ab_ageToggleWrapper">
    <div class="co-ab_ageToggle_textWrapper">
      Ich bin unter 28 Jahre alt
      <div>&nbsp;</div>
    </div>
    <span class="co-ab_ageToggle_switchWrapper">
      <span class="co-ab_ageToggle_switchStyle"></span>
    </span>
  </span>
</span>
Remediation Notes

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

The link "Ich bin unter 28 Jahre alt" can be marked up like this:

<a href="...">Ich bin unter 28 Jahre alt</a>

Which makes it perfectly accessible, behave exactly like it should and still all styling can be done on it as intended.

You must not mismatch presentation, function, and markup. A link looks like a link, a toggle switch like a toggle switch.