acc_calendar: Barrierefreier JavaScript-Kalender (nicht zwingend, aber nützlich)

Juni 2008 , von Rumoroso In Formularfeldern, in denen ein Datum eingegeben werden muss, kann zur Verbesserung der Benutzererfahrung und gleichzeitig zur besseren Kontrolle des Datenformats ein Kalender mittels JavaScript eingebunden werden. Ich weiß, ein geflügeltes Wort , doch wenn dies sorgfältig und kontrolliert geschieht, muss es keine negativen Auswirkungen auf Standards und Barrierefreiheit haben.

Ziele Grundsätzlich habe ich zwei Hauptziele festgelegt, die eher als Arbeitsrichtlinien bei der Erstellung dienten: Er soll barrierefrei und unaufdringlich sein. Ohne JavaScript-Unterstützung wird natürlich keine Option zum Aufklappen des Kalenders angeboten, aber wenn Unterstützung vorhanden ist… warum sollte der generierte Inhalt dann nicht barrierefrei und nutzbar sein? Er soll einfach zu implementieren und zu verwenden sein. Ich habe nach einer Lösung gesucht, bei der Entwickler, die ihn in ihre Webseiten einbinden möchten, keinen zusätzlichen Code schreiben müssen.

So wie in CSS verschiedene Selektoren (Element-, ID-, Klassen-Selektoren usw.) verwendet werden, um Stile verschiedenen Teilen unserer Dokumente zuzuordnen, warum nicht dasselbe Prinzip nutzen, um Verhaltensweisen zuzuordnen? Als sekundäre Ziele gelten zudem: Optimierung, Verallgemeinerung, Internationalisierung,… (um realistisch zu bleiben, musste ich die Ziele „reich werden” und „Geld verdienen” streichen.) Einbindung in unsere Dokumente Zunächst sei darauf hingewiesen, dass das Skript direkt durch Herunterladen des vollständigen Beispiels bezogen werden kann .

Die Einbindung des Kalenders in unser Dokument ist so einfach wie das Hinzufügen des entsprechenden script-Elements im head : Der Kalender wird für jedes Textfeld geladen, das die Klasse „ fecha ” enthält (sofern die Dokumentensprache Spanisch ist). Das Datumsformat wird in der ersten Zeile des Skripts definiert. Wenn Sie beispielsweise wünschen, dass das Datum im Format Tag/Monat/Jahr erfolgt, ohne führende Null beim Tag, falls dieser nur eine Ziffer hat, aber mit führender Null beim Monat, falls nötig, und das Jahr aus vier Ziffern besteht: var formato = ‘d/mm/yyyy’; Wie bereits erwähnt, muss das Textfeld die Klasse „fecha” tragen, damit der Kalender daneben angezeigt wird, sofern die deklarierte Dokumentensprache Spanisch ist („date” bei Englisch usw.).

Diese Klassennamen können direkt im Skript geändert oder neue für weitere Sprachen hinzugefügt werden. Außerdem werden alle möglichen Parameter als Klassen angegeben.

Die vollständige Liste lautet如下: Kalender laden (erforderlich): fecha Vergangene Daten: prev Zukünftige Daten: post Jahresbereich: rangX (wobei X die Anzahl der Jahre ist) Aktueller Tag ausgeschlossen: todnact Filter für verfügbare Daten anwenden: disp Was ist, wenn ich Eingabefelder dynamisch per AJAX lade? Das Skript bietet die Eigenschaft, dass bei asynchronem Hinzufügen neuer Textfelder via AJAX einfach nach dem Laden die Funktion cargaLinks() aufgerufen werden muss, damit den Inputs die Links zum Öffnen des Kalenders zugewiesen werden Erstes Beispiel Zukünftiges Datum im Format d/mm/yyyy dieses Jahres ( class=“fecha post” ) Zukünftiges Datum im Format d/mm/yyyy dieses Jahres ohne heutigen Tag ( class=“fecha post todnact” ) Geburtsdatum im Format d/mm/yyyy bis zu 100 Jahre zurück ( class=“fecha prev rang100” ) Datum der nächsten 20 Jahre im Format d/mm/yyyy ohne heutigen Tag ( class=“fecha post rang20 todnact” ) Datum der letzten 15 Jahre im Format d/mm/yyyy ( class=“fecha prev rang15” ) Datum 10 Jahre zurück und vorwärts im Format d/mm/yyyy ( class=“fecha rang10” ) Neue Verbesserung (April 2007) Manchmal möchte man vielleicht, dass das Datum in drei separate Textfelder eingetragen wird, je eines für jede Komponente.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Diese Möglichkeit wurde nun hinzugefügt. Dazu steuern wir alles weiterhin über Klassen, die den input-Feldern zugewiesen werden. Damit sie als Gruppe funktionieren, müssen alle drei Textfelder einen Identifikationscode erhalten.

Das klingt zunächst seltsam, ist es aber nicht. Tatsächlich reicht es, dem Wort „fecha”, das als Klasse in allen drei Feldern verwendet wird, einen Buchstaben oder eine Zahl anzuhängen. Wenn wir ihnen also beispielsweise alle die Klasse „fechaA” geben, wird nicht nur der Link zum Öffnen des Kalenders verknüpft, sondern sie verhalten sich fortan als Gruppe. Weiter unten finden Sie zwei Beispiele, die dies deutlich zeigen.

Jedes Feld erhält eine eigene Klasse entsprechend seiner Funktion: Für das Tagesfeld die Klasse „ day ” Für das Monatsfeld die Klasse „ month ” Für das Jahresfeld die Klasse „ year ” Die Reihenfolge ist völlig frei wählbar; die Klassen zur Konfiguration des Kalenders (Anzahl der Jahre, vergangen, zukünftig usw.) werden im ersten verwendeten Feld platziert. Im folgenden Beispiel sehen Sie, wie das umgesetzt wird: Zweites Beispiel Datum der nächsten 10 Jahre im Format Tag, Monat, Jahr: Tag / Monat / Jahr Wichtig ist, den Nutzer stets darüber zu informieren, welches Feld wofür gedacht ist.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Im Beispiel erfolgt dies sowohl durch den vorangehenden Text als auch durch die Beschriftungen der Input-Felder. Datum der letzten 15 Jahre im Format Jahr, Monat, Tag: Jahr / Monat / Tag Wichtig ist, den Nutzer stets darüber zu informieren, welches Feld wofür gedacht ist.

Im Beispiel erfolgt dies sowohl durch den vorangehenden Text als auch durch die Beschriftungen der Input-Felder. Aktualisierung (April 2007) Das Skript wurde überarbeitet, um die darin angewendeten Styles zu reduzieren.

Nun enthält der generierte Link das Bild als Inhalt (zuvor wurde es über das Stylesheet geladen). Der Link wird unmittelbar nach dem Input erzeugt (außerhalb des label, falls vorhanden) und besitzt folgendes Markup: Falls es sich um den Link zur Datumeingabe in drei Textfeldern handelt, lautet die Klasse des Links „ enl_cal_group ”, und dieser wird davor platziert

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.