Hallo Gunnar, durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen. Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument [](/images/3498e380-93fc-11ec-80fa-b42e9947ef30.png) und das find ich für sehende User richtig doof. Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" an's input-Element zu hängen? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich. Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, denn es wird ja immer nur am Ende angefügt. Und man bräuchte eine Umsortierfunktion (up/down Buttons pro Element oder drag+drop). Ohne Sortierfunktion sähe das bei mir so aus: ~~~html <h2>Zutaten</h2> <button>Zutaten festlegen</button> <ul class="zutaten"> <li> <input value="Hugo" type="text" aria-label="Zutat" name="zutaten[]" width="20"> <button type="button">Löschen</button> </li> </ul> <button type="button" id="newIngredient">Weitere Zutat</button> <script> // Vorlage für neue Rows aus dem ersten Listitem erstellen const rowTemplate = document.querySelector(".zutaten li").innerHTML; // Liste der Zutaten const ingredients = document.querySelector(".zutaten"); // Click-Handler für neue Zutaten auf den Button legen document.getElementById("newIngredient").addEventListener("click", function(event) { const newItem = document.createElement("li"); newItem.innerHTML = rowTemplate; const newInput = newItem.querySelector("input"); newInput.value = ""; ingredients.appendChild(newItem); newItem.querySelector("input").focus(); }); // Click-Handler zum Löschen auf die Liste legen, click bubbelt dorthin ingredients.addEventListener("click", function(event) { // event.target ist das geklickte Element, nur auf Buttons reagieren if (event.target.tagName != "BUTTON") return; event.target.parentElement.remove(); }); </script> ~~~ Dazu noch eine Prise CSS für die Liste ~~~css ul { list-style: none; padding: 0; } li { margin-bottom: 0.3em; } ~~~ _Rolf_ -- sumpsi - posui - obstruxi

Hallo Gunnar, durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen. Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument [](/images/3498e380-93fc-11ec-80fa-b42e9947ef30.png) und das find ich für sehende User richtig doof. Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" an's input-Element zu hängen? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich. Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, der am Ende anfügt, und eine Umsortierfunktion (die in einer zugänglichen Fassung etwas mühsamer ist). _Rolf_ -- sumpsi - posui - obstruxi

Hallo Gunnar, durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen. Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument [](/images/3498e380-93fc-11ec-80fa-b42e9947ef30.png) und das find ich für sehende User richtig doof. Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" dranzuschreiben? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich. Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, der am Ende anfügt, und eine Umsortierfunktion (die in einer zugänglichen Fassung etwas mühsamer ist). _Rolf_ -- sumpsi - posui - obstruxi