onclick funktioniert nicht auf Smartphone

[Gunnar Bittersmann]

@@Linuchs

Klappt vorzüglich auf dem PC unter Firefox

Nein, das tut es nicht.

Bitte diese Seite mal mit dem Smartphone aufrufen. Ich kann keinen Namen akivieren.

Bitte diese Seite mal mit beliebigem Gerät aufrufen. Ich kann keinen Namen akivieren. Nicht per Tastatur. Deine Auswahl ist nicht funktionstüchtig.

Bevor du jetzt rangehst und die Tastaturbedienbarkeit mühsam mit JavaScript und ARIA nachrüstest: das ist nicht der Weg, du du gehen solltest. Sondern: die richtigen HTML-Elemente verwenden: Du willst eine Ja/nein-Auswahl von mehreren Items – also Checkboxen.

Nicht

<div id="K13778-14649" onclick="toggleWunsch( '14649', this)" class="border_transparent prio1 haken1 fleet" title="4Fleet Group 50733 Köln &nbsp; Kontakt 13778-14649">
  <p class="bezeichnung">4Fleet Group</p>
</div>

sondern

<div>
  <input type="checkbox" id="K13778-14649" name="K13778-14649"/>
  <label for="K13778-14649" title="4Fleet Group 50733 Köln &nbsp; Kontakt 13778-14649">4Fleet Group</label>
</div>

oder auch

<label>
  <input type="checkbox" name="K13778-14649"/>
  <span title="4Fleet Group 50733 Köln &nbsp; Kontakt 13778-14649">4Fleet Group</span>
</label>

Damit ist die Tastaturbedienbarkeit gegeben. Und die Auswahl funktioniert auch ohne JavaScript. Du kannst natürlich Funktionalität als progressive enhancement hinzufügen.

Und du kannst die Auswahl wie gewünscht stylen: ausgewählte Items gelb hinterlegt:

:checked + label { background: yellow }

bzw.

:checked + span { background: yellow }

LLAP 🖖