Observation: Input group does not use fieldset

Priority: Best Practice Low Page: iPhone Erleben Observation Permalink

Observation Details

"Question tiles" / cards in Handyankauf form step 3 ("Lässt sich das Handy einschalten?", etc.) use radio buttons for "yes" an "no" values. The radio buttons are not grouped by <fieldset>. While this is no strict failure on its own, it only works accurately, when heading structure and structured content of the card is presented and programmatically determinable in a way so that the context always is clear.

The code syntax is as follows:

<div class="...">
  <div class="">
    <div class="...">
      <h4 class="">Lässt sich das Handy einschalten?</h4>
      <span class="..." aria-hidden="true">
        <svg>...</svg>
      </span>
    </div>
    <ul class="...">
      <li class="...">
        <span class="">Das Handy lässt sich einschalten.</span>
      </li>
      <li class="...">
        <span class="">Es bleibt mindestens 45 Sekunden lang eingeschaltet.</span>
      </li>
      <li class="...">
        <span class="">Es lässt sich aufladen.</span>
      </li>
    </ul>
    <div class="...">
      <div>
        <input type="radio" id="POWERON_YES" name="1_POWER_ON_WCTI" value="POWERON_YES">
        <label for="POWERON_YES" class="">Ja, lässt sich einschalten</label>
      </div>
      <div>
        <input type="radio" id="POWERON_NO" name="1_POWER_ON_WCTI" value="POWERON_NO">
        <label for="POWERON_NO" class="">Nein</label>
      </div>
    </div>
  </div>
</div>

Observations:

No <fieldset> used to group radio buttons
While each radio button has a label, provided by for="..." and id="..." attributes, the radio button group does not have a label programmatically attached (e.g. via <legend>
The list contains "features" or "functionality states" of the device in question, but the list is introduced by heading "Lässt sich das Handy einschalten?"; wording can be improved

Remediation Notes

It is recommended to group radio buttons in a <fieldset> element and label the radio button group by use of <legend>. Example setup:

<h2>Handyankauf</h2>
<div>
  <h3>Zustand des Handys</h3>
  <p>Um zu prüfen, ob Ihr Handy für den Ankauf geeignet ist, müssen wir ermitteln, in welchem Zustand sich das Handy befindet.</p>
  
  <form>
    <h3>Funktionsfähigkeit des Handys</h3>
    <p id="required-poweron">Diese Frage muss mit "Ja" beantwortet werden, damit Ihr Handy für den Ankauf in Frage kommt.</p>
    <ul>
      <li id="hint-poweron">Handy lässt sich einschalten</li>
      <li id="hint-poweron-stay">Handy bleibt mindestens 45 Sekunden an</li>
      <li id="hint-poweron-charge">Handy lässt sich aufladen</li>
    </ul>

    <fieldset aria-describedby="hint-poweron hint-poweron-stay hint-poweron-charge required-poweron">
      <legend>
        Lässt sich das Handy einschalten?
      </legend>
      <div>
        <div>
          <input id="..." name="..." type="radio" value="...">
          <label for="...">
            Ja
          </label>
        </div>
        <div>
          <input id="..." name="..." type="radio" value="...">
          <label for="...">
            Nein
          </label>
        </div>
      </div>
    </fieldset>

    <h3>Schäden am Handy</h3>
    <p id="required-damage">Diese Frage muss mit "Ja" beantwortet werden, damit Ihr Handy für den Ankauf in Frage kommt.</p>
    <ul>
      <li id="hint-damage-display">Gehäuse und Bildschirm sind nicht zertrümmert oder verbogen</li>
      <li id="hint-damage-custom">Gehäuse nicht verändert und frei von Gravuren oder anderen Personalisierungen</li>
      <li id="hint-damage-liquid">Keine sichtbaren Schäden durch Flüssigkeit oder Feuchtigkeit</li>
    </ul>

    <fieldset aria-describedby="hint-damage-display hint-damage-custom hint-damage-liquid required-damage">
      <legend>
        Ist das Handy frei von erheblichen Schäden und sichtbaren Flüssigkeitsschäden?
      </legend>
      <div>
        <div>
          <input id="..." name="..." type="radio" value="...">
          <label for="...">
            Ja
          </label>
        </div>
        <div>
          <input id="..." name="..." type="radio" value="...">
          <label for="...">
            Nein
          </label>
        </div>
      </div>
    </fieldset>

    ...

  </form>
</div>

This setup follows the practice to:

Introduce overall form purpose
Introduce each question's purpose
Provide important information like "required to be TRUE"
Group radio buttons in fieldset elements
Properly label radio button groups and each individual radio button
Programmatically connect labels, inputs, fieldsets, input hints