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>