Struktur barrierefreier Formulare

[marctrix]

Hej alle,

bisher habe ich in allen Formularen so etwas gehabt um Felder zu beschriften:

<div class="input-container">
  <label for="first-name">Vorname</label>
  <input id="first-name">
</div>

Nun hat @Gunnar Bittersmann mich schon vor längerer Zeit auf die Idee gebracht, das anders zu machen:

<label class="input-container">
  <span>Vorname</span>
  <input>
</label>

Vorteil: man spart sich die Attribute for und id.

Das ist zwar etwas kürzer und eleganter, der eigentliche Vorteil liegt aber darin, die nicht dauernd erzeugen zu müssen, was mitunter schwierig werden kann, insbesondere, wenn ma mit templates arbeitet und Code wiederverwenden möchte.

Das Problem auf das ich jetzt gestoßen bin ist, dass ich nun keine Hilfetexte mehr wie im folgenden Beispiel umsetzen kann, denn das label ist ja klickbar und ich kann da also keine interaktiven Elemente mehr reinsetzen (außer dem input, das erlaubt die Spec ausdrücklich so):

<div class="input-container">
  <label for="first-name">Vorname</label>
  <details>
    <summary>Wie Sie Ihren Vornamen finden</summary>
    <h1>Fragen Sie Ihre Mama</h1>
    <p>Wenn Sie nicht mehr wisen, wie Sie heißen, fragen Sie am besten Ihre Mutter. Die weiß alles!</p>
    <h2>Fragen Sie <strong>nicht</strong> Ihren Partner.</h2>
    <p>Die Wahrscheinlichkeit ist sehr gering, dass Ihr amtlicher Vorname Schätzchen, wilde Maus oder Papabär lautet.</p>
    <h1>Räumen Sie endlich mal wieder auf und finden Sie Ihren Personalausweis</h1>
    <p>Auf Ihrem Personalausweis schauen Sie nun nach dem recht klein geschriebenen Wort "Vorname". Das Wort darüber ist Ihr Vorname.</p>
    <h2>Pro-Tipp für die Vornamen-Suche auf dem Ausweis</h2>
    <p>Wenn Sie Ihren Nachnamen noch kennen, dann schauen Sie in der Nähe des Nachnamens nach Ihrem Vornamen. Auf Ausweisen sind die beiden nie weit voneinander entfernt!</p>
  </details>
  <input id="first-name">
</div>

Hat jemand einen Rat? Am besten Gunnar: du setzt das doch so ein. Wie hast du das gelöst?

Marc