<TD> mit onClick-Event versehen

[Gunnar Bittersmann]

@@Romero

ich brauch kurz eure Hilfe, wie ich einen onClick in eine TD bringen kann.

Am besten gar nicht!

Genauer: Den click-Eventhandler nicht fürs td-Element, sondern für ein Element darin, und zwar für eins, das von Natur aus ein interaktives Element ist: button.

Also: <td><button onclick="…">…</button></td>^[1]

td-Elemente sind von Natur aus nicht interaktiv – sie mögen mit click clickbar sein, aber nicht bedienbar – nicht per Tastatur. Dazu bedürfte es u.a. des tabindex="0"-Attributs.

Léonie Watson zeigt in ARIA, accessibility APIs & coding like you give a damn! (Video, Folien), wie aufwändig es ist, aus einem beliebigen Element ein interaktives zu machen, das nicht nur mit der Maus, sondern auch per Tastatursteuerung bedienbar ist, und assistive Technologie (wie Screenreader) dem Nutzer auch mitgeteilt, dass es sich dabei um ein UI-Element mit einer bestimmten Funktion handelt.

TL;DR: Nicht machen. button verwenden!

Nachtrag: Den Button kann man natürlich so stylen, dass er weder Rahmen noch Hintergrund hat.

LLAP 🖖

---

1. Dass Eventhandler nicht ins Markup geschrieben, sondern im JavaScript registriert werden sollten (addEventListener()), ist nochmal ein anderes Thema. ↩︎