Anzahl von Kind-Elementen zählen

[Gunnar Bittersmann]

@@claus ginsel

was meinst du mit

Aber warum verwendest du nicht 🗑 im Quelltext?

<button>🗑</button>

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 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!

button {
	background: transparent;
	border-color: transparent;
}

Wie in diesem Beispiel.

Das Markup:

				<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 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, löschen Stein, löschen Eisen“ o.ä. angesagt.

🖖 Живіть довго і процвітайте