@@claus ginsel > was meinst du mit > > > Aber warum verwendest du nicht 🗑 im Quelltext? `<button>🗑</button>`{:.language-html} Da fehlt natürlich noch eine zugängliche Beschriftung, dazu gleich mehr. > > Den click-Eventhandler beim table-Element registrieren und event delegation zu nutzen, ist in Ordnung. > > Geht das denn anders, wenn man dynamisch die Liste füllt? Geht sicher, aber *event delegation*{:@en} ist besser. > > Und auch die <a href="https://"> sehen mir danach aus, dass das auch <button>s sein sollten. > > dahinter steckt tatsächlich ein Link. Ah, da kommt hinter `https://` noch was? Dann ist `<a>` hierfür in Ordnung. > Und um gleiches Layout zu erhalten, habe ich <a> etwas zweckentfremdet. Das ist nie eine gute Idee, HTML-Elemente nach deren Default-Aussehen auszuwählen. Wenn du die Default-Hintergrundfarbe eines Buttons weghaben willst, setze sie mit CSS auf `transparent`. Wenn du die Default-Rahmenfarbe eines Buttons weghaben willst, setze sie mit CSS auf `transparent`. Aber nicht den Rahmen entfernen! ```css button { background: transparent; border-color: transparent; } ``` Wie in diesem [Beispiel](https://codepen.io/gunnarbittersmann/pen/abKYEqx). Das Markup: ```html <button aria-describedby="marmor"> <span aria-hidden="true">🗑</span> <span class="visually-hidden">löschen</span> </button> ``` Das 🗑-Icon wird mit `aria-hidden="true"` vor Screenreadern versteckt. (Was sollten die da auch sinnvolles vorlesen?) Screenreader-Nutzer brauchen eine textuelle Beschreibung der Funktion des Buttons: „löschen“. Diese kann [visuell versteckt](https://www.a11yproject.com/posts/how-to-hide-content/) werden. Damit Screenreader nicht „löschen, löschen, löschen, …“ vorlesen ohne bekanntzugeben, was da jeweils gelöscht wird, wird durch `aria-describedby` die Verbindung zum Bezeichner des jeweiligen Items über dessen ID hergestellt. Die Buttons werden dann als „löschen Marmor“ o.ä. angesagt. 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter