Niquelao » Bloggarkiv » Tilgjengelig kalender i JavaScript (unødvendig, men nyttig)

» Arkiv for webloggen » Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) Niquelao - Tilgjengelighet Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) 11. februar 2007 av Rumoroso I skjemaer der brukeren må oppgi en dato, kan man for å forbedre brukeropplevelsen og samtidig ha bedre kontroll på dataformatet, inkludere en kalender via JavaScript. Jeg vet, et forbannet ord, men hvis det gjøres med omhu og kontroll, trenger det ikke å få negative konsekvenser for standarder og tilgjengelighet.

Mål Innledningsvis har jeg fastsatt to hovedmål, som mer enn mål har vært retningslinjer for arbeidet med å bygge den: Den skal være tilgjengelig og ikke-intrusiv. Selvfølgelig tilbys ikke muligheten til å åpne kalenderen hvis JavaScript ikke støttes, men hvis støtten finnes… hvorfor ikke da gjøre det genererte innholdet tilgjengelig og brukervennlig? Den skal være enkel å implementere og bruke. Jeg har søkt en løsning slik at utviklere som ønsker å ta den i bruk på sine nettsteder, slipper å skrive ekstra kode.

På samme måte som man i CSS bruker ulike typer selektorer (element-, id-, klasse-selektorer osv.) for å knytte stiler til forskjellige deler av dokumentene våre, hvorfor ikke gjøre det samme for å knytte oppførsel? I tillegg kommer følgende sekundærmål: optimalisere, generalisere, internasjonalisere,… (for å være realistisk måtte jeg stryke målene om å binde og tjene penger.) Eksempelet For å teste funksjonaliteten, kan du se et eksempel og laste det ned . Inkludering i dokumentene våre Å inkludere kalenderen i dokumentet ditt er like enkelt som å legge inn det aktuelle script-elementet i head-delen: Kalenderen vil lastes for alle tekstfelt som har klassen “dato”.

Datoformatet angis på første linje i scriptet. Hvis du for eksempel ønsker at datoen skal følge rekkefølgen dag/måned/år, uten ledende null for dagen når den består av ett siffer, men med ledende null for måneden når det er nødvendig: var formato = ‘d/mm/y’; For at kalenderen skal vises ved siden av et tekstfelt, må feltet ha klassen “dato”. I tillegg angis alle mulige parametre som klasser.

Den fullstendige listen er som følger: Last kalender (påkrevd): dato Tidligere datoer enn i dag: forgj Datoer senere enn i dag: etter Årsspenn: årX (der X er antall år) Dagens dato er ikke inkludert: idagnå Fordeler Blant fordelene kan vi nevne: Enkel å bruke og implementere. Ikke-intrusiv.

Koden og det genererte innholdet er tilgjengelig (oppmerking, organisering, innhold,…) og kan brukes med hjelpemidler (skjermleser,…). Her er det tatt hensyn til hvor fokus havner både når kalenderen vises, under bruken og når den lukkes. Når den vises, flyttes fokus direkte til årsvelgeren, og fra der følger man en logisk tabulatorrekkefølge. Når kalenderen lukkes (via lenken for lukking eller etter at en dato er valgt), flyttes fokus tilbake til tekstfeltet den var knyttet til.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Navigasjonen forenkles uavhengig av enhet. Man kan navigere med enhver enhet som lar deg surfe på nettet. Parametrene er enkle å konfigurere, og kallmetoden er svært enkel (ved bruk av klassenavn).

Språket hentes direkte fra overordnet dokument, og nye oversettelser kan legges til i koden. Hvis språket ikke er angitt i dokumentet (noe som ikke bør skje), vil spansk brukes som standard. Per nå inkluderer den både spansk og engelsk. I tillegg er det lagt inn gjenkjenning av amerikansk engelsk, ikke fordi innholdet endres, men for å endre rekkefølgen på ukedagene (søndag plasseres først).

Stilene som brukes på kalenderen, inkluderes via en CSS-fil som kobles til gjennom scriptet, noe som optimaliserer nedlastingen av dokumentet når JavaScript ikke støttes, siden stilarket da ikke hentes. Det er inkludert klasser slik at stiler kan brukes på alle cellene i tabellen (aktive dager, inaktive dager, dagens dato), samt spesifikke stiler for lørdager og søndager. Generert kode Nedenfor følger en del av koden som genereres av scriptet.

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

Som du kan se (og som allerede nevnt), er det inkludert klasse- og id-navn for å kunne styre layouten via stilarket.

Konklusjon Avslutningsvis… hva kan man si om denne kalenderen?… vel, at den “er unødvendig… men nyttig” og at den “ikke har negative implikasjoner når det gjelder tilgjengelighet”. … forresten, hvilken dag er det i dag?

Kategori: Tilgjengelighet, Javascript —> 2 kommentarer juan 16. mars 2007 denne er flott, men jeg får noen ganger en feil når jeg velger dato eller bytter år, og slutter å fungere i IE og også i Firefox. vet du hva det er? Rumoroso 21. august 2008 Sjekk om innholdet i feltet sendes, eller om variabelen faktisk ikke sendes.

Scriptet forstyrrer ikke innsendingen av skjemaet, så problemet kan ligge et annet sted. Hilsen Du kan følge med på kommentarene via RSS 2.0-feeden . Du kan også legge igjen en kommentar , eller sende en trackback fra nettstedet ditt. Forrige artikkel: Gratulerer TAW Neste artikkel: acc_calendar v1.1 Legg igjen din kommentar Feltene Navn og E-post er obligatoriske Legg oss til…

Taggar vi fremhever generelt tilgjengelighet bert bos blockquote bug cañas sitater cite oppførsel kunnskap CSS escuas standarder fieldset Firefox format skjema skrifter hidden ie IE 7 informasjon javascript legend liste niquelando obligatorisk opera strand q squash ferie w3c WCAG xhtml Dette verket er lisensiert under en Creative Commons-lisens .

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.