Quiz - Event-Handler dynamisch anbinden

[Felix Riesterer]

Lieber Gunnar,

Ich bin positiv überrascht.

ach komm jetzt! Prinzipiell war ich nie Überlegungen zur Barrierefreiheit abgeneigt. Meine Ablehnung war nur im Kontext der inhaltlichen Menge und technischen Komplexität eines Anfängertutorials. Wenn man in fortgeschrittener Manier soetwas angeht, dann darf es ruhig komplexer und dafür barrierefrei sein.

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

Also: Hier ist ein Versuch, der es recht machen will. Bitte ausprobieren und hinsichtlich Zugänglichkeit kritisieren (und nein, ohne JavaScript ist das gesamte Quiz nicht zugänglich - by design!).

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

Keyboard only funktioniert. Die jeweils erste Auswahlmöglichkeit wird automatisch fokussiert und vorausgewählt. Damit sollte eine reine Tastaturbedienung auf die Pfeiltasten und die Entertaste beschränkt funktionieren. Die Tab-Taste zum Erreichen der ursprünglichen Radio-Buttons (man sieht sie ja jetzt nicht mehr) ist dadurch nicht mehr notwenig.

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

Er wird überhaupt nicht angezeigt. Das Formular (das habe ich jetzt eingebaut) kann mit der Enter-Taste abgeschickt werden. Dabei wird das submit-Event abgefangen.

Liebe Grüße,

Felix Riesterer.