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 for 3.3.2 Labels or Instructions

Cashback Einlösen (1 issues)

View All Issues for Page Visit Page
Input element "Aktionen Auswahl" does not have visible label

Handy Verkaufen (3 issues)

View All Issues for Page Visit Page
Pflichtfelder marked "*" but not explanation is present
Radio button group is not using semantic grouping
Form input IMEI-Nummer requires specific format

Mobilfunk Netzausbau (1 issues)

View All Issues for Page Visit Page
Address input element has no visible label

Roaming Optionen (2 issues)

View All Issues for Page Visit Page
Ländergruppen radio buttons without appropriate labels
No visible label for input element

Telefonieren SMS Ins Ausland (1 issues)

View All Issues for Page Visit Page
No or no accurate visible label present

Travel Surf (1 issues)

View All Issues for Page Visit Page
No or no accurate visible label present

VIP Lieferung (2 issues)

View All Issues for Page Visit Page
"Pflichtfeld" instruction given after form
"Pflichtfeld" not marked "*"

iPad Vergleich (1 issues)

View All Issues for Page Visit Page
Input elements have no visible label

iPhone Erleben (3 issues)

View All Issues for Page Visit Page
Pflichtfelder marked "*" but not explanation is present
Form input IMEI-Nummer requires specific format
Radio button group is not using semantic grouping

iPhone Vergleich (1 issues)

View All Issues for Page Visit Page
Input elements have no visible label
Priority: Serious Low Page: Roaming Optionen Observation Permalink
Accompanying Files
Observation Details

The Ländergruppen form elements (radio buttons) do not make appropriate use of form element labels.

  • "Sie sind Mobilfunk"

    • Label is badly worded; "Sie sind Mobilfunk" is not a meaningful label

    • The visible label is a <p> element which is not linked to the actual form elements; instead, another hidden legend element is used to label the form input

  • "MagentaMobil-Tarif Zeitraum"

    • There is no visible label present

    • The legend element is hidden

A visual label must be present for all input elements and it must stay visible at all times.

Screen readers do announce used "labels" multiple (up to three) times as well.

Remediation Notes

  • Do not hide already existing labels to then add the same label again

  • Use appropriate, meaningful labels, describing the purpose of the following input elements

  • Best practice: avoid complicated questions and cognitive tasks to be done in forms; you can simplify by using YES/NO questions with appropriate and easy to understand questions and hints

<fieldset>
  <legend>Wählen sie aus, ob sie einen Vertrag haben oder Prepaid zahlen</legend>

  <input id="tarifart--vertrag" ...>
  <label for="tarifart--vertrag">Vertrag</label>

  <input id="tarifart--prepaid" ...>
  <label for="tarifart--prepaid">Prepaid</label>
</fieldset>

<fieldset aria-describedby="tarifzeitraum-hint">
  <legend>Wählen sie 'Ja', wenn sie einen aktuellen MagentaMobil-Tarif haben</legend>
  <p id="tarifzeitraum-hint">
    Aktuelle MagentaMobil-Tarife sind die, 
    die seit dem 01. Januar 1970 abgeschlossen wurden.
  </p>

  <input id="tarifzeitraum--neu" ...>
  <label for="tarifzeitraum--neu">Ja</label>

  <input id="tarifzeitraum--alt" ...>
  <label for="tarifzeitraum--alt">Nein</label>
</fieldset>
Priority: Serious Medium Page: Roaming Optionen Observation Permalink
Accompanying Files
Observation Details

  • Input for choosing country has no visible label

  • Input for choosing country has accessible name "Search for option"

Remediation Notes

Ensure, adding a visible label that is visible at all times to every input element to clearly and unambiguously identify the purpose of the input element. The Partnernetze input could be structured like this:

<div>
  <label for="partnernetze-country">
    Wählen sie ein Reiseland
  </label>
  <p id="partnernetze-country-hint">
    Das Land, zu dem Informationen über ...
  </p>
  <input 
    id="partnernetze-country" 
    aria-describedby="partnernetze-country-hint partnernetze-grenze-hint"
    ...>
  <p id="partnernetze-grenze-hint">Wenn sie sich in der Nähe ...</p>
</div>
Priority: Serious Medium Page: Mobilfunk Netzausbau Observation Permalink
Accompanying Files
Observation Details

The map's address input

  • has no visible label

  • uses a placeholder as "label", which disappears when entering text

Additionally, while not a failure of this success criterion, the required input format is only displayed as an error message to the user after unsuccessful input.

Remediation Notes

  • Visually display the input's label at all times.

  • Do not use placeholders for labels, as they disappear on text input and they might not be announced by assistive technology.

  • When a certain input format is required, use a method like aria-describedby on the input, even before the input errors, so the user knows what to enter and what not to enter.

Priority: Serious Low Page: iPhone Erleben Observation Permalink
Accompanying Files
Observation Details

Handyankauf form marks (some) "Pflichtfelder" with "*". But there is not explanation present.

  • Step 1: Modell is Pflichtfeld but not marked

  • Step 6

    • Anrede is Pflichtfeld but not marked

    • Checkboxes are Pflichtfeld but not marked

Remediation Notes

  • Ensure, the logic of mandatory and optional fields is explained prior to the form inputs.

  • Ensure, all Pflichtfelder use the "*" consistently

Priority: Moderate Low Page: iPhone Erleben Observation Permalink
Observation Details

IMEI-Nummer form input requires "15-stellig" which is part of visible label. It also requires the input without spaces, which is not part of the visible label.

Remediation Notes

Ensure, all known requirements for input formats are mentioned.

Priority: Moderate Low Page: iPhone Erleben Observation Permalink
Observation Details

Radio button groups in "In welchem Zustand ist Ihr X?" in Handyankauf form step 3 do label each individual radio button by visible text content. The radio button group however does not have appropriate label linked to the inputs.

Remediation Notes

Consider use of semantic grouping of radio buttons by using fieldset and legend. For an example, look at the following code snippet from GOV.UK Design System – Radios:

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Where do you live?
      </h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive" name="whereDoYouLive" type="radio" value="england">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive">
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive-2" name="whereDoYouLive" type="radio" value="scotland">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive-2">
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive-3" name="whereDoYouLive" type="radio" value="wales">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive-3">
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive-4" name="whereDoYouLive" type="radio" value="northern-ireland">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive-4">
          Northern Ireland
        </label>
      </div>
    </div>
  </fieldset>
</div>
Priority: Serious Low Page: iPad Vergleich Observation Permalink
Observation Details

Device selection input elements do not use visible input labels, as they use a visually-hidden CSS class. Input elements must have visible labels present at all times.

Remediation Notes

Ensure all input elements use visible labels.

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

Device selection input elements do not use visible input labels, as they use a visually-hidden CSS class. Input elements must have visible labels present at all times.

Remediation Notes

Ensure all input elements use visible labels.

Priority: Critical Low Page: Telefonieren SMS Ins Ausland Observation Permalink
Accompanying Files
Observation Details

The radio button fieldsets at the top of the page do not properly use input labels.

  • "Sie sind Mobilfunk" is no proper German; while this alone is not part of this success criterion, it should be ensured to use proper language to describe input elements

  • "MagentaMobil - Tarif Zeitraum" has no visible label

Remediation Notes

Ensure, all form elements use visually presented labels that match the accessible name of the input. The label must be visible at all times.

Side note:

In the given form, due to wordings, terminology, and explicit question of specific dates, the small form might lessen user experience. A better approach to ask a "A/B" question is to word like this:

Wählen Sie, ob Sie Vertragskunde oder Prepaidkunde sind

The same foes for the second fieldset. Here, the user can be guided to make it easy to choose the right option:

Wählen Sie, ob Sie einen aktuellen Tarif oder einen älteren Tarif haben

You might include hints by using aria-describedby and you want to re-word options as well, if necessary. A full example could look like this:

<form>
<div>
  <fieldset>
    <legend>
      Wählen Sie, ob Sie Vertragskunde oder Prepaidkunde sind
    </legend>
    <div>
      <div>
        <input id="kunde" name="kunde" type="radio" value="vertrag">
        <label for="kunde">
          Ich bin Vertragskunde
        </label>
      </div>
      <div>
        <input id="kunde-2" name="kunde" type="radio" value="prepaid">
        <label for="kunde-2">
          Ich bin Prepaidkunde
        </label>
      </div>
    </div>
  </fieldset>
</div>

<div>
  <fieldset aria-describedby="tariff-hint">
    <legend>
      Wählen Sie, ob Sie einen aktuellen Tarif oder einen älteren Tarif haben
    </legend>
    <div id="tariff-hint">
      Aktuelle Tarife wurden nach dem DD.MM.YYYY abgeschlossen
    </div>

    <div>
      <div>
        <input id="tariff" name="tariff" type="radio" value="recent">
        <label for="tariff">
          Ich habe einen aktuellen Tarif
        </label>
      </div>
      <div>
        <input id="tariff-2" name="tariff" type="radio" value="old">
        <label for="tariff-2">
          Ich habe einen älteren Tarif
        </label>
      </div>
    </div>
  </fieldset>
</div>
</form>
Priority: Critical Low Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

The radio button fieldset at the top of the page does not properly use input label.

  • "MagentaMobil - Tarif Zeitraum" has no visible label

  • Side note: "Wählen Sie Ihr Reiseland aus" is HTML heading, used as label for input element; input element itself has no programmatically determinable label

Remediation Notes

Ensure, all form elements use visually presented labels that match the accessible name of the input. The label must be visible at all times.

Side note:

In the given form, due to wordings, terminology, and explicit question of specific dates, the small form might lessen user experience. A better approach to ask a "A/B" question is to word like this:

Wählen Sie, ob Sie einen aktuellen Tarif oder einen älteren Tarif haben

You might include hints by using aria-describedby and you want to re-word options as well, if necessary. A full example could look like this:

<div>
  <fieldset aria-describedby="tariff-hint">
    <legend>
      Wählen Sie, ob Sie einen aktuellen Tarif oder einen älteren Tarif haben
    </legend>
    <div id="tariff-hint">
      Aktuelle Tarife wurden sind MagentaMobil-Tarife, die nach dem DD.MM.YYYY abgeschlossen wurden und MagentaMobil Young Tarife, die nach dem DD.MM.YYYY abgeschlossen wurden.
    </div>

    <div>
      <div>
        <input id="tariff" name="tariff" type="radio" value="recent">
        <label for="tariff">
          Ich habe einen aktuellen Tarif
        </label>
      </div>
      <div>
        <input id="tariff-2" name="tariff" type="radio" value="old">
        <label for="tariff-2">
          Ich habe einen älteren Tarif
        </label>
      </div>
    </div>
  </fieldset>
</div>

For the "Reiseland" selection / dropdown, use semantic HTML input elements as well (see 4.1.2 Name, Role, Value) and use accurate labeling:

<div>
  <label for="location">
    Reiseland auswählen
  </label>

  <div id="location-hint">
    Das Land, in das Sie reisen oder reisen werden
  </div>

  <select id="location" name="location" aria-describedby="location-hint">
    <option value="Auswählen" selected>Reiseland auswählen</option>
    <option value="afghanistan">Afghanistan</option>

    <!-- MORE COUNTRY OPTIONS -->
  </select>
</div>
Priority: Serious Low Page: VIP Lieferung Observation Permalink
Observation Details

"Pflichtfeld*" is an instruction to fill out the form but is given after the input fields. The instruction must be places before the first input field that is marked as "Pflichtfeld".

Remediation Notes

Place the instruction at the beginning of the form. Use more explicit wording to enhance user experience: "Pflichtfelder sind mit einem * markiert".

Ideally, all inputs are mandatory inputs anyways, and as this is the case with the form, the instruction may be removed completely. Doing so, however, is only a viable option when all "*" hints are removed with it.

Priority: Moderate Low Page: VIP Lieferung Observation Permalink
Observation Details

  • "Datenschutzhinweise" checkbox input is not marked "*" as a "Pflichtfeld" but errors while being unchecked.

  • "Modell", "Farbe", "Speicher" selection inputs not marked "*" as "Pflichtfeld"; error state cannot be checked due to missing credentials (Gutscheincode); as the inputs are not marked required in code markup, these can be considered a side note and do not contribute to the failure of the success criterion, as the other observation does

Remediation Notes

Ensure, all inputs, considered "Pflichtfelder" are also marked as such, given the appropriate instruction.

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: Moderate Low Page: Handy Verkaufen Observation Permalink
Observation Details

Radio button groups in "In welchem Zustand ist Ihr X?" in Handyankauf form step 3 do label each individual radio button by visible text content. The radio button group however does not have appropriate label linked to the inputs.

Remediation Notes

Consider use of semantic grouping of radio buttons by using fieldset and legend. For an example, look at the following code snippet from GOV.UK Design System – Radios:

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Where do you live?
      </h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive" name="whereDoYouLive" type="radio" value="england">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive">
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive-2" name="whereDoYouLive" type="radio" value="scotland">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive-2">
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive-3" name="whereDoYouLive" type="radio" value="wales">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive-3">
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="whereDoYouLive-4" name="whereDoYouLive" type="radio" value="northern-ireland">
        <label class="govuk-label govuk-radios__label" for="whereDoYouLive-4">
          Northern Ireland
        </label>
      </div>
    </div>
  </fieldset>
</div>
Priority: Moderate Low Page: Handy Verkaufen Observation Permalink
Observation Details

IMEI-Nummer form input requires "15-stellig" which is part of visible label. It also requires the input without spaces, which is not part of the visible label.

Remediation Notes

Ensure, all known requirements for input formats are mentioned.

Priority: Serious Low Page: Handy Verkaufen Observation Permalink
Accompanying Files
Observation Details

Handyankauf form marks (some) "Pflichtfelder" with "*". But there is not explanation present.

  • Step 1: Modell is Pflichtfeld but not marked

  • Step 6

    • Anrede is Pflichtfeld but not marked

    • Checkboxes are Pflichtfeld but not marked

Remediation Notes

  • Ensure, the logic of mandatory and optional fields is explained prior to the form inputs.

  • Ensure, all Pflichtfelder use the "*" consistently