Niquelao » Blog-Archiv » Barrierefreier JavaScript-Kalender (unnötig, aber nützlich)

» Archiv des Weblogs » Barrierefreier Kalender in JavaScript (unnötig, aber nützlich) Niquelao - Barrierefreiheit Barrierefreier Kalender in JavaScript (unnötig, aber nützlich) 11. Februar 2007 von Rumoroso In Formularfeldern, in die ein Datum einzugeben ist, kann zur Verbesserung der Benutzererfahrung und gleichzeitig zur besseren Kontrolle des Datenformats ein Kalender mittels JavaScript eingebunden werden.

Ich weiß, ein gefürchtetes 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 festgelegt, die eher als Arbeitsrichtlinien bei der Erstellung dienten: Er soll barrierefrei und nicht-intrusiv sein. Ohne JavaScript-Unterstützung wird natürlich keine Kalenderfunktion angeboten, doch 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 eine 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 zu verknüpfen? Als sekundäre Ziele kamen hinzu: Optimierung, Verallgemeinerung, Internationalisierung,… (um realistisch zu bleiben, musste ich die Ziele „reich werden” und „Geld verdienen” streichen.) Das Beispiel Um die Funktionsweise zu prüfen, könnt ihr euch ein Beispiel ansehen und es herunterladen .

Einbindung in unsere Dokumente 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” trägt. Das Datumsformat wird in der ersten Zeile des Scripts definiert.

Wenn beispielsweise das Format Tag/Monat/Jahr gewünscht wird, wobei vor einem einstelligen Tag keine führende Null steht, diese aber beim Monat ergänzt wird, falls nötig: var formato = ‘d/mm/y’; Damit der Kalender neben einem Textfeld angezeigt wird, muss dieses die Klasse „fecha” besitzen. Außerdem werden alle möglichen Parameter als Klassen angegeben. Die vollständige Liste lautet wie folgt: Kalender laden (erforderlich): fecha Daten vor dem heutigen Datum: prev Daten nach dem heutigen Datum: post Jahresbereich: rangX (wobei X die Anzahl der Jahre ist) Aktueller Tag wird nicht included: todnact Vorteile Zu den Vorteilen zählen: Einfach zu verwenden und zu implementieren.

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

Nicht-intrusiv. Der Code und der generierte Inhalt sind barrierefrei (Auszeichnung, Struktur, Inhalt,…) und mit Hilfsmitteln (Screenreader usw.) nutzbar. Hierbei wurde besonders berücksichtigt, wo der Fokus liegt – beim Erscheinen, während der Bedienung und beim Verschwinden.

Beim Öffnen liegt der Fokus direkt auf der Jahresauswahl; von dort aus erfolgt die Tabulator-Navigation in logischer Reihenfolge. Beim Schließen des Kalenders (über den Schließ-Link oder nach Auswahl eines Datums) springt der Fokus zurück auf das zugehörige Textfeld. Die Navigation ist geräteunabhängig möglich. Der Kalender lässt sich mit jedem Gerät bedienen, mit dem man im Web navigieren kann.

Die Parameter sind leicht konfigurierbar, der Aufruf sehr einfach (mittels Klassennamen). Die Sprache wird automatisch vom übergeordneten Dokument übernommen; neue Übersetzungen können im Code hinzugefügt werden. Falls keine Sprache im Dokument deklariert ist (was eigentlich nicht vorkommen sollte), wird standardmäßig Spanisch verwendet.

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

Derzeit sind neben Spanisch auch Englisch sowie amerikanisches Englisch enthalten. Letzteres wird erkannt, nicht um den Inhalt zu ändern, sondern um die Anordnung der Wochentage anzupassen (Sonntag wird zuerst angezeigt). Die auf den Kalender angewendeten Styles werden über eine CSS-Datei geladen, die vom Script eingebunden wird.

Fehlt JavaScript-Unterstützung, wird diese Stylesheet-Datei gar nicht erst geladen, was die Download-Zeit des Dokuments optimiert. Es wurden Klassen so definiert, dass sich beliebige Tabellenzellen stylen lassen (aktive Tage, inaktive Tage, heutiger Tag), ebenso spezifische Styles für Samstage und Sonntage.

Generierter Code Nachfolgend findet ihr einen Ausschnitt des vom Script generierten Codes. Wie ersichtlich (und bereits erwähnt), werden Klassen- und ID-Namen vergeben, um das Layout über das Stylesheet steuern zu können.

Fazit Abschließend bleibt zu sagen: Was lässt sich über diesen Kalender bemerken?

Nun, er ist „unnötig… aber nützlich” und hat „keine negativen Auswirkungen im Hinblick auf Barrierefreiheit”. …übrigens, welcher Tag ist heute? Kategorie: Barrierefreiheit, Javascript —> 2 Kommentare juan 16.

März 2007 Das ist großartig, aber manchmal tritt ein Fehler auf, wenn ich ein Datum auswähle oder durch die Jahre navigiere – dann funktioniert weder IE noch Firefox. Wisst ihr, woran das liegen könnte? Rumoroso 21. August 2008 Prüft bitte, ob der Feldinhalt tatsächlich gesendet wird oder ob die Variable vielleicht gar nicht übermittelt wird.

Related: IAAP CPACC / WAS Certification — La certificación profesional que acredita tu experiencia en accesibilidad.

Das Script greift nicht in den Formularversand ein, daher könnte das Problem woanders liegen. Viele Grüße Ihr könnt die Kommentare dank des RSS 2.0 Feeds verfolgen . Alternativ könnt ihr auch einen Kommentar hinterlassen oder einen Trackback von eurer Website senden.

Vorheriger Artikel: Glückwunsch an TAW Nächster Artikel: acc_calendar v1.1 Hinterlasse einen Kommentar Die Felder Name und E-Mail sind Pflichtfelder Füge uns hinzu… Hervorgehobene Tags allgemein barrierefreiheit bert bos blockquote bug cañas zitate cite verhalten wissen CSS escuas standards fieldset Firefox format formular quellen hidden ie IE 7 information javascript legend liste niquelando pflicht opera strand q squash urlaub w3c WCAG xhtml Dieses Werk ist unter einer Creative Commons Lizenz lizenziert .

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.