Button liegt auf Frage- div und markiert Antwortmöglichkeit

Question

Hinter den Antwortmöglichkeiten einer Auswahlfrage sind Lautsprecher eingebettet, welche die Antwort als Audiofile wiedergeben (Text-To-Speech). Der Code dafür ist folgender:

<img align="right" src="speaker_klein_border_grau.png" input onclick="responsiveVoice.speak('Deutschland', 'Deutsch Female');" type="button" value="Play" />

Durch den Klick auf den Lautsprecher wird leider auch die Antwort angekreuzt. Ich denke es liegt daran, dass der Button in dem div- des Items liegt. Gibt es eine Möglichkeit den Button anzuklicken ohne die Antwortmöglichkeit anzukreuzen?

Answer 1

Schreiben Sie bitte vor das <img>folgenden HTML-Code:

<!-- no label -->

Dann endet das <label>-Element, welches für die Auswahl verantwortlich ist, vor dem Knopf. Allerdings kenne ich die Funktion responsiveVoice.speak() nicht und weiß nicht, ob der Inhalt zum Sprechen dann noch korrekt erkannt wird.

Comments

Funktioniert, auch die TTS API noch. Vielen Dank!

---

Es gibt doch nochmal eine kleine Nachfrage hierzu.  <!-- no label --> funktioniert perfekt wenn die Option "Klickbare Bereiche für Auswahlfelder optimieren" deaktiviert ist. Dann ist aber die klickbare Fläche sehr klein. Wenn die Option aktiviert ist, funktioniert <!-- no label --> nicht mehr und dann in der Ausgangsfrage beschriebene Problem besteht wieder.

Gibt es auch die Möglichkeit<!-- no label --> zu verwenden, wenn "Klickbare Bereiche für Auswahlfelder optimieren" aktiviert ist?
Entschuldigen Sie diese sehr speziellen Fragen und wie immer vielen Dank für Ihre Mühe.

---

Gut, dass Sie sich das nochmal genauer angesehen haben.

Die besagte Option hat zwei Funktionen: Zum einen werden auch Klicks in der Nähe des Auswahlfelds zugeordnet. Zum anderen werden - bei der Auswahlfrage - Klicks auf die komplette Zeile einer Auswahloption der Option zugeordnet. Normalerweise werden nur Klicks auf das Eingabefeld und die Beschriftung gewertet.

EiIngabefelder sind von den "sensitiven" Bereichen ausgenommen, denn ein Texteingabefeld soll nicht unbedingt zur Auswahl der Option führen. Langer Rede kurzer Sinn: Versuchen Sie bitte einmal, das Bild in einen Button zu packen und wenn das nicht hilft, posten Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite. Eventuell müssen wir <button> bei der Optimierung der Eingabefelder nochmal explizit ausnehmen.

<button type="button" value="Play" onclick="responsiveVoice.speak('Deutschland', 'Deutsch Female');" style="border: 0 none; float: right;"><img src="speaker_klein_border_grau.png"></button>

---

Die Umstellung zu Button hat leider keine Änderung gebracht.
Hier ist der Pretestlink zu der entsprechenden Seite:                          
xxxxxxxx (Seite wurde wieder rausgenommen)
Deutschland und Afghanistan sind mit einem Button eingebunden, die anderen als image. Die Error Meldungen oben können Sie ignorieren.
Wie Sie vielleicht auch sehen, wird auch der Item Text nicht mehr auf der selben Höhe wie das Anklickfeld angezeigt, sobald ein Button bzw. Image eingebunden sind. Vielleicht wissen Sie auch zusätzlich wie ich das wieder in den Griff bekomme :)
Viele Grüße

---

So ... <button> wird nun auch ignoriert, wenn es um den Klick geht, aber das hilft Ihnen erstmal wenig, denn dafür wäre ein Update Ihres Servers notwendig. Mir war zunächst nicht klar, dass Sie auf einem lokalen Befragungsserver arbeiten.

Aber ich habe auch eine andere Lösung für Sie:

<a type="button" value="Play" onclick="responsiveVoice.speak('Afghanistan', 'Deutsch Female');" style="border: 0 none; float: right; margin: -0.2em 0 -0.5em 0"><img src="speaker_klein_border_grau.png" class="s2mIgnore"></a>

Die CSS-Klasse "s2mIgnore" sorgt dafür, dass der Klick nicht als Auswahl missverstanden wird und der negative "margin" im äußeren <a>-Tag sorgt dafür, dass die Grafik - welche höher ist als der Text - die Zeile nicht "aufbläht", was zu der beschriebenen Dezentrierung des Textes/Eingabefelds führte.

---

Das mit dem Server hätte ich vielleicht gleich dazu erwähnen sollen. Jedenfalls funktioniert die CSS-Klasse "s2mIgnore" wunderbar. Ich wäre auch nicht darauf gekommen, das Problem mit CSS zu lösen.