@@Sophie > > Ich hab auch gleich mal den Eingabeelementen eine (für alle Nutzer zugängliche!) Beschriftung `label` verpasst. > > Müsste es nicht so > > ~~~html > <form> > <p><label>Andreas</label> <input type="submit" name="Andreas" value="Nicht da"></p> > <p><label>Birgit</label> <input type="submit" name="Birgit" value="Nicht da"></p> > </form> > ~~~ > > oder so > > ~~~html > <form> > <p><label for="Andreas">Andreas</label> <input type="submit" name="Andreas" value="Nicht da"></p> > <p><label for="Birgit">Birgit</label> <input type="submit" name="Birgit" value="Nicht da"></p> > </form> > ~~~ > heißen? Weder noch. Im ersten Fall ist keine Zuordnung von `label` zum zugehörigen `input` erkennbar. Im zweiten ist der gute Wille erkennbar, das reicht dem Browser (und assitiver Technik wie Screenreader) aber nicht. Das `for`-Attribut bezieht sich auf die **ID** des Eingabefeldes. Diese wären noch zu ergänzen: ~~~html <form> <p><label for="Andreas">Andreas</label> <input type="submit" id="Andreas" name="Andreas" value="Nicht da"></p> <p><label for="Birgit">Birgit</label> <input type="submit" id="Birgit" name="Birgit" value="Nicht da"></p> </form> ~~~ So geht’s auch. Es ist aber auch möglich, das Eingabefeld mit ins `label`-Element zu tun[^1], dann ist die Zuordnung implizit da – `for` und `id` braucht man dann nicht unbedingt. LLAP 🖖 [^1]: von den Bedenken mal abgesehen, dass `input` in `label` geschachtelt semantisch nicht stimmig ist (das Eingabefeld ist ja nicht Teil seiner Beschriftung) -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Sophie > > Ich hab auch gleich mal den Eingabeelementen eine (für alle Nutzer zugängliche!) Beschriftung `label` verpasst. > > Müsste es nicht so > > ~~~html > <form> > <p><label>Andreas</label> <input type="submit" name="Andreas" value="Nicht da"></p> > <p><label>Birgit</label> <input type="submit" name="Birgit" value="Nicht da"></p> > </form> > ~~~ > > oder so > > ~~~html > <form> > <p><label for="Andreas">Andreas</label> <input type="submit" name="Andreas" value="Nicht da"></p> > <p><label for="Birgit">Birgit</label> <input type="submit" name="Birgit" value="Nicht da"></p> > </form> > ~~~ > heißen? Weder noch. Im ersten Fall ist keine Zuordnung von `label` zum zugehörigen `input` erkennbar. Im zweiten ist der gute Wille erkennbar, das reicht dem Browser (und assitiver Technik wie Screenreader) aber nicht. Das `for`-Attribut bezieht sich auf die **ID** des Eingabefeldes. Diese wären noch zu ergänzen: ~~~html <form> <p><label for="Andreas">Andreas</label> <input type="submit" id="Andreas" name="Andreas" value="Nicht da"></p> <p><label for="Birgit">Birgit</label> <input type="submit" id="Birgit" name="Birgit" value="Nicht da"></p> </form> ~~~ So geht’s auch. Es ist aber auch möglich, das Eingabefeld mit ins `label`-Attribut zu tun[^1], dann ist die Zuordnung implizit da – `for` und `id` braucht man dann nicht unbedingt. LLAP 🖖 [^1]: von den Bedenken mal abgesehen, dass `input` in `label` geschachtelt semantisch nicht stimmig ist (das Eingabefeld ist ja nicht Teil seiner Beschriftung) -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)