Wenn Ihr folgendes Layout hättet: eine Suchformular als Satz – wie würdet Ihr das Markup hierfür schreiben? Also mit korrekten Labels und sinnvoller Semantik. Bin gerade ein bisschen aufgeschmissen … (Bitte keine Vorschläge für andere Formularlayouts, es geht um diesen konkreten Fall. Danke!) #html#forms#accessibility
@nilshoerrmann Das ist so gar nicht voll barrierefrei zu machen, weil du irgendwo Abstriche machen musst. Zum Beispiel wenn du den sichtbaren Text mit ARIA-hidden versteckst, dann macht “allen Ländern” und “jede Beschäftigungsform” nicht mehr viel Sinn.
Ich würde gar nichts verstecken und über aria-label Elementnamen wählen, die ein Voice Control user nutzen würde: Beschäftigungsform, ???, Bereich, Land, Stichwort.
@yatil Du, danke auch noch einmal für den Satz: "Das ist so gar nicht voll barrierefrei zu machen." Der hat mir gerade nochmal die richtige Perspektive gegeben, weil ich das vorher nur als Gefühl hatte und nicht greifen konnte.
Wir aktualisieren gerade für einen Kunden das CSS und haben dabei die Gelegenheit, überhaupt echte Formularelemente für diese UI einzuführen. Auch wenn die Lesbarkeit mit dieser Text-Label-Kombination nicht perfekt wird, wird das Formular am Ende wenigstens nutzbar sein.
@nilshoerrmann Ja, wenn Kunde gewisse Design/Ästhetik-Vorstellungen hat, dann ist das oft schwierig in Einklang mit Usability und Accessibility zu bringen. Ich wär ja mal an einem A/B test mit einem gewöhnlichen Formular interessiert. Mein Bauchgefühl sagt es wäre schneller/besser zu verstehen, aber wirkliche Daten dazu habe ich noch nicht gesehen.
@yatil Ach, ich glaube das Formular kann im Kontext der Seite tatsächlich ganz gut funktionieren. Aber A/B-Tests wären in der Tat eine gute Idee. Allerdings muss vorher das Hauptproblem gelöst werden, dass Suchanfragen schnell mal eine halbe Minute dauern 😑 Eins nach dem Anderen 😬 Danke Dir noch mal!
Add comment