Niquelao » acc_calendar: Tilgjengelig JavaScript-kalender (unødvendig, men nyttig)

» acc_calendar: Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) Niquelao Hvordan synes du det ble? 7. juli 2007 av Rumoroso —> Tilgjengelighet og JavaScript? acc_calendar: Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) Oppdatert 1. juni 2008 , av Rumoroso I skjemaer der brukeren skal 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 omtanke 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 egentlig har vært retningslinjer for arbeidet med å bygge dette: At det skal være tilgjengelig og ikke-intrusivt. Selvfølgelig tilbys ikke alternativet om å åpne kalenderen dersom JavaScript ikke støttes, men hvis støtten finnes… hvorfor da ikke gjøre det genererte innholdet tilgjengelig og brukervennlig?

At det skal være enkelt å implementere og bruke. Jeg har søkt en løsning slik at utviklere som ønsker å ta det 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 da ikke bruke det samme prinsippet for å knytte atferd til elementer?

I tillegg kommer følgende sekundære mål: optimalisering, generalisering, internasjonalisering,… (for å være realistisk måtte jeg stryke målene om å binde og tjene penger.) Inkludering i dokumentene våre Først og fremst: skriptet kan lastes ned direkte ved å hente hele eksempelprosjektet . Å 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” (hvis dokumentets språk er norsk).

Datoformatet defineres på første linje i skriptet. 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, og med fire sifre for året: var formato = ‘d/mm/yyyy’; Som nevnt tidligere, må tekstfeltet ha klassen “dato” hvis dokumentets deklarerte språk er norsk (“date” hvis det er engelsk, osv.) for at kalenderen skal vises ved siden av feltet.

Disse klassenavnene kan endres, og nye kan legges til for andre språk, direkte i skriptet. I tillegg angis alle mulige parametre som klasser. Den komplette listen er som følger: Last inn kalender (påkrevd): dato Tidligere datoer enn i dag: prev Fremtidige datoer enn i dag: post Årsintervall: rangX (der X er antall år) Ekskluder dagens dato: todnact Bruk filter for tilgjengelige datoer: disp Hva hvis jeg laster input-felt dynamisk med AJAX? Skriptet har den egenskapen at hvis det senere legges til nye tekstfelt asynkront via AJAX, holder det å kalle funksjonen cargaLinks() etter lasting.

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

Da vil lenkene for å åpne kalenderen bli knyttet til input-feltene automatisk. Første eksempel Fremtidig dato, format d/mm/yyyy , fra dette året ( class=“dato post” ) Fremtidig dato, format d/mm/yyyy, fra dette året uten å inkludere i dag ( class=“dato post todnact” ) Fødselsdato, format d/mm/yyyy, opptil 100 år tilbake ( class=“dato prev rang100” ) Dato for de neste 20 årene, format d/mm/yyyy, uten å inkludere i dag ( class=“dato post rang20 todnact” ) Dato for de siste 15 årene, format d/mm/yyyy ( class=“dato prev rang15” ) Dato 10 år bakover og fremover, format d/mm/yyyy ( class=“dato rang10” ) Ny forbedring (april 2007) Noen ganger kan det være ønskelig at datoen oppgis i tre separate tekstfelt, ett for hver komponent.

Denne muligheten er nå lagt til. Også her styres alt gjennom klasser som tildeles input-feltene. For at de tre feltene skal danne en gruppe, må de inneholde en identifikator som knytter dem sammen. Dette høres kanskje rart ut, men er egentlig ganske enkelt.

Det du trenger å gjøre, er å legge til en bokstav eller et tall etter ordet “dato” som brukes som klasse på alle tre feltene. Hvis du for eksempel gir alle tre klassen “datoA”, vil lenken for å åpne kalenderen bli knyttet, og feltene vil oppføre seg som en gruppe. Lenger ned finner du to eksempler som viser dette tydelig.

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

Hvert felt må ha en klasse som angir hvilken data det representerer: For dag-feltet: klassen “day” For måned-feltet: klassen “month” For år-feltet: klassen “year” Du står fritt til å velge rekkefølgen på feltene. Konfigurasjonsklassene for kalenderen (antall år, tidligere, fremtidige osv.) plasseres i det første feltet i gruppen. Eksemplet nedenfor viser hvordan dette gjøres: Andre eksempel Dato for de neste 10 årene i formatet dag, måned, år: Dag / Måned / År Det er viktig alltid å informere brukeren om hvilket felt som er til hva.

I eksemplet gjøres dette i teksten før feltene, og dessuten er det angitt i label-tekstene for input-feltene. Dato for de siste 15 årene i formatet år, måned, dag: År / Måned / Dag Det er viktig alltid å informere brukeren om hvilket felt som er til hva.

I eksemplet gjøres dette i teksten før feltene, og dessuten er det angitt i label-tekstene for input-feltene. Oppdatering (april 2007) Skriptet er justert for å redusere mengden stiler som anvendes direkte fra det. Nå har den genererte lenken bildet som innhold (tidligere ble bildet lastet via stilarket). Lenken genereres umiddelbart etter input-feltet (utenfor label hvis feltet er pakket inn i en slik), og har følgende markup: Hvis lenken gjelder for datooppføring i tre separate felt, blir klassen på lenken “enl_cal_group”, og den plasseres før det første feltet i gruppen. Oppdatering (7. juli 2007) Av

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.