Niquelao » 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 umgesetzt wird, muss es keine negativen Auswirkungen auf Standards und Barrierefreiheit haben.

Ziele Grundsätzlich habe ich zwei Hauptziele definiert, die eher als Arbeitsrichtlinien bei der Entwicklung dienten: Es soll barrierefrei und unaufdringlich sein. Ohne JavaScript-Unterstützung wird natürlich keine Option zum Aufklappen des Kalenders angeboten, doch wenn Unterstützung vorhanden ist… warum sollte der generierte Inhalt dann nicht barrierefrei und nutzbar sein? Es soll einfach zu implementieren und zu verwenden sein. Ich habe eine Lösung gesucht, bei der Entwickler, die den Kalender 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? Darüber hinaus gab es sekundäre Ziele: Optimierung, Verallgemeinerung, Internationalisierung,… (um realistisch zu bleiben, musste ich die Ziele „Links setzen” 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 Einfügen des entsprechenden script-Elements im head -Bereich: 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 festgelegt. Wenn beispielsweise das Format Tag/Monat/Jahr gewünscht wird, wobei vor einem einstelligen Tag keine führende Null steht, vor einem einstelligen Monat jedoch schon, und das Jahr aus vier Ziffern besteht: var formato = ‘d/mm/yyyy’; Wie bereits erwähnt, muss ein Textfeld die Klasse „fecha” tragen, damit der Kalender daneben angezeigt wird, sofern die dokumentierte Sprache 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) Aktuelles Datum ausschließen: 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 Nachladen neuer Textfelder via AJAX lediglich nach Abschluss dieses Ladevorgangs die Funktion cargaLinks() aufgerufen werden muss, damit den neuen Inputs die Links zum Öffnen des Kalenders zugewiesen werden.

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

Erstes Beispiel Zukünftiges Datum im Format d/mm/yyyy , aktuelles Jahr ( class=“fecha post” ) Zukünftiges Datum im Format d/mm/yyyy, aktuelles Jahr ohne heutiges Datum ( 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 heutiges Datum ( class=“fecha post rang20 todnact” ) Datum der letzten 15 Jahre im Format d/mm/yyyy ( class=“fecha prev rang15” ) Datum 10 Jahre rückwärts und vorwärts im Format d/mm/yyyy ( class=“fecha rang10” ) Neue Verbesserung (April 2007) Gelegentlich könnte es gewünscht sein, das Datum in drei separate Textfelder einzugeben – je eines für Tag, Monat und Jahr.

Diese Möglichkeit wurde nun ergänzt. Auch hier steuern wir alles über Klassen, die den input -Feldern zugewiesen werden. Damit sie als Gruppe funktionieren, müssen alle drei Textfelder einen identifizierenden Code erhalten. Das klingt vielleicht ungewöhnlich, ist es aber nicht wirklich.

Tatsächlich genügt es, dem als Klasse verwendeten Wort „fecha” in allen drei Feldern einen Buchstaben oder eine Zahl anzuhängen. Wenn wir beispielsweise allen drei die Klasse „fechaA” zuweisen, wird nicht nur der Link zum Öffnen des Kalenders erzeugt, sondern die Felder verhalten sich fortan als Gruppe. Weiter unten finden Sie zwei Beispiele, die dies deutlich verdeutlichen.

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

Jedes einzelne Feld erhält eine Klasse entsprechend dem zugeordneten Datumsteil: Für das Tagesfeld die Klasse „ day ” Für das Monatsfeld die Klasse „ month ” Für das Jahresfeld die Klasse „ year ” Bei der Reihenfolge besteht volle Freiheit; die Klassen zur Konfiguration des Kalenders (Anzahl der Jahre, vergangene/zukünftige Daten usw.) werden im ersten der verwendeten Felder platziert. Im folgenden Beispiel sehen Sie, wie dies 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 vorgesehen ist.

Im Beispiel erfolgt dies sowohl durch den vorausgehenden 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 vorgesehen ist.

Im Beispiel erfolgt dies sowohl durch den vorausgehenden Text als auch durch die Beschriftungen der input -Felder. Aktualisierung (April 2007) Das Skript wurde überarbeitet, um die darin enthaltenen Styles zu reduzieren. Der generierte Link enthält nun das Bild als Inhalt (zuvor wurde dieses über das Stylesheet geladen). Der Link wird unmittelbar nach dem input -Feld erzeugt (außerhalb des label -Elements, falls vorhanden) und besitzt folgendes Markup: Handelt es sich um den Link zur Datumeingabe über drei Textfelder, lautet die Klasse des Links „ enl_cal_group ”, und er wird vor dem ersten dieser Felder platziert. Aktualisierung (7. Juli 2007) Von

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.