Observation: No or no accurate visible label present

Priority: Critical Low Page: Travel Surf Observation Permalink

Accompanying Files

Screenshot for issue: No or no accurate visible label present

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>