Form Block 1.4.0 und eine Meinung zu Datepickern

Auch wenn die Entwicklung rund um Version 1.4.0 von Form Block nicht lief wie geplant, freue ich mich, ihre Verfügbarkeit nun ankündigen zu können. Es war ein bisschen frustrierend und bedeutet möglicherweise eine noch längere To-do-Liste für mich, aber eins nach dem anderen …

Was es werden sollte

Der eigentliche Plan für Form Block 1.4.0 war das Hinzufügen eines individuellen Datepickers für Datum- und Zeit-Felder, da die Standardversionen der Browser nicht die besten sind, geschweige denn anpassbar. Deshalb habe ich mich umgeschaut und den Air Datepicker gefunden, der funktionsreich war, ausgereift, klein und performant, und – am wichtigsten – überhaupt noch gewartet. Also habe ich begonnen, ihn zu implementieren und alles lief gut. Als ich mit der initialen Version praktisch fertig war, habe ich jedoch ein großes Problem festgestellt. Leider nicht früher, das war mein eigenes Verschulden.

In seinem aktuellen Status ist der Air Datepicker nicht per Tastatur bedienbar und damit nicht barrierefrei. Da mir Barrierefreiheit aber insbesondere wichtig ist, war sofort klar, dass ich ihn nicht mit veröffentlichen kann.

Recherche

Die Suche nach einem barrierefreien Datepicker ist gar nicht mal so einfach. Manche davon erfordern noch jQuery, eine große und heutzutage veraltete JavaScript-Bibliothek, andere werden nicht mehr gepflegt, sodass am Ende nur 3 übrig blieben: einer vom W3C WAI als Beispiel für einen barrierefreien Datepicker, der nicht für Produktivumgebungen gedacht ist (und definitiv seine Probleme hat), ein weiterer vom U.S. Web Design System, welcher sehr vielversprechend aussieht, aber zu wortreich ist (z. B. kündigt er den Wochentag, das vollständige Datum und Jahr für jedes fokussierte Element für Screenreader an) und bezüglich der Übersetzbarkeit auch ein großes Problem hat.

Danach stolperte ich auf eine Präsentation von Russ Weakley bei Inclusive Design 24 mit der Fragestellung, wie ein barrierefreier Datepicker überhaupt aussieht. Und so habe ich diese Funktion erst einmal nach hinten gestellt, da es noch keine ausreichend ausgereifte Version davon zu geben scheint, die meine Wünsche erfüllt.

Der neue Plan

Russ zeigte auch einen alternativen Weg, das Datum in mehrere Felder aufzuteilen, einen für den Tag, für den Monat und das Jahr. Auf diesem Wege hast du immer noch keinen Datepicker, aber es ist einfacher für Benutzer, das richtige Format einzugeben, da sie lediglich Zahlen eingeben müssen und sich nicht um das richtige Format kümmern zu müssen.

Und deshalb gibt es in Form Block 1.4.0 nun individuelle Eingabetypen für date, datetime-local, time und week auswählen, die automatisch in mehrere Felder aufgeteilt sind. Dadurch ist das Format selbsterklärender und mit optionalen Platzhaltern so beschreibend wie möglich. Wenn das immer noch nicht genug ist, kannst du auch die Labels der einzelnen aufgeteilten Felder anzeigen lassen, die standardmäßig nicht sichtbar sind.

Als Beispiel zeigt das folgende Bild zwei Versionen dieser aufgeteilten Datumsfelder, das zweite davon mit aktivierten Labels und Platzhaltern.

Und der Datepicker?

Ich bin immer noch ein Fan davon, einen separaten Datepickern anzubieten und will das auch immer noch tun. Da es leider aber keinen gibt, der meinen Anforderungen gerecht wird, geht das wohl nur, wenn ich selbst einen entwickle. Das würde jedoch sehr zeitaufwendig werden und ich bin mir aktuell nicht sicher, ob es den Aufwand wert ist. Und ich bin mir auch nicht sicher, ob ich dafür genug Zeit habe. Vielleicht finde ich einen Sponsoren dafür.

Weitere Funktionen kommen

Zusätzlich war mein eigentlicher Plan, eine Möglichkeit hinzuzufügen, abgesendete Formulare im Backend aufzulisten. Durch die Anpassung der Datumsfelder oben habe ich aber viel Zeit anderweitig verbracht als geplant, da diese Funktion eigentlich gar nicht geplant war. Daher plane ich diese Möglichkeit nun für die nächste Version. Du findest alle offenen Funktionswünsche auf GitHub. Sobald ich anfange, an einer neuen Version zu arbeiten, gibt es dort auch dafür einen Meilenstein, sodass du sehen kannst, was als nächstes kommt.

Weitere (kleinere) Verbesserungen

Teil von Form Block 1.4.0 ist auch ein Standard-Design für Formularelemente im Theme Twenty Twenty-Four und die Auswahl der Eingabetypen ist nun beschreibender, sodass du nicht mehr den eigentlichen HTML-Attributnamen für Eingabetypen kennen musst. Außerdem kannst du nun alle Eingabetypen verwenden, die es bisher nur in der Pro-Version gab. Dennoch ist die Pro-Version einen Blick Wert, insbesondere wenn du höhere Anforderungen an ein Formular-Plugin hast.