Quiz - Event-Handler dynamisch anbinden

[Gunnar Bittersmann]

@@Felix Riesterer

Allerdings versuche ich hier das ARIA-bewusste Umsetzen eines ansonsten simplen Quizzes

Ich bin positiv überrascht.

Mit „ARIA-bewusst“ meinst du „barrierefrei“? Ob man dazu ARIA braucht oder ob HTML-„Hausmittel“ genügen, steht auf’m anderen Blatt.

welches primär simpel mit der Maus bedient werden soll. Nur wenn jemand auf Tastatureingaben angewiesen sein sollte

“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli (Quelle, siehe auch Nachfrage vom Schepp ;-))

braucht es ein im Grunde anderes User Interface. Der Mausakrobat klickt auf die gewünschte Antwort und das Quiz wertet sie sofort aus. Der Tastaturkämpfer fokussiert erst einmal die Gruppe der Radio-Buttons, hangelt sich dann zum gewünschten durch und bestätigt seine Auswahl.

Wie vereint man diese beiden Bedienkonzepte? Der Tastaturkämpfer ist einen Submit-Button gewohnt, der seine Auswahl bestätigt, der Mausakrobat gerade eben nicht. Letzterer will den Button erst gar nicht sehen!

Submit-Button, der bei aktiviertem JavaScript visuell versteckt wird, aber in der Tab-Reihenfolge bleibt. Bei :focus wird er angezeigt.

Nur so’ne Idee, ohne tiefer drüber nachgedacht zu haben. Könnte auch ’ne Schnapsidee sein.

LLAP 🖖