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>