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

acc_calendar: Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) | Niquelao Niquelao Hvordan synes du det ble? Hopp til innhold Hjem Kontrastsjekk OverskrifterKart Easyvalidator Om meg… acc_calendar: Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) Tilgjengelighet og JavaScript? acc_calendar: Tilgjengelig kalender i JavaScript (unødvendig, men nyttig) Oppdatert 1. juni 2008 , av Rumoroso I skjemaer der brukeren skal angi en dato, kan man for å forbedre brukeropplevelsen og samtidig øke kontrollen over 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 løsningen: Den skal være tilgjengelig og ikke-påtrengende. Selvfølgelig tilbys ikke muligheten til å åpne kalenderen hvis JavaScript ikke støttes, men hvis støtte finnes… hvorfor da ikke gjøre det genererte innholdet tilgjengelig og brukervennlig?

Den skal være enkel å implementere og bruke. Jeg har søkt en løsning der utviklere som ønsker å ta den i bruk på sine nettsider, slipper å skrive ekstra kode. På samme måte som vi i CSS bruker ulike typer selektorer (element-, id-, klasse-selektorer osv.) for å knytte stiler til forskjellige deler av dokumentene våre, hvorfor da ikke gjøre det samme for å knytte atferd?

I tillegg kommer følgende sekundære mål: optimalisering, generalisering, internasjonalisering,… (for å være realistisk måtte jeg stryke målene om å finne kjærligheten og tjene penger.) Inkludering i dokumentene våre Først og fremst: skriptet kan lastes ned direkte ved å hente hele eksempelet . Å inkludere kalenderen i dokumentet ditt er like enkelt som å legge inn riktig script-element i head : Kalenderen lastes for alle tekstfelt som har klassen “dato” (hvis dokumentets språk er norsk).

Datoformatet angis på første linje i skriptet. Hvis du eksempelvis ø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 siffer for året: var formato = ‘d/mm/yyyy’; Som nevnt tidligere, må tekstfeltet ha klassen “dato” hvis dokumentets erklærte 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 parametere som klasser. Den fullstendige listen er som følger: Last kalender (påkrevd): dato Tidligere datoer enn i dag: prev Fremtidige datoer enn i dag: post Årsspekter: rangX (der X er antall år) Utelat dagens dato: todnact Bruk filter for tilgjengelige datoer: disp Hva hvis jeg laster input-felt dynamisk med AJAX? Skriptet har den egenskapen at hvis nye tekstfelt legges til asynkront via AJAX når som helst, holder det å kalle funksjonen cargaLinks() etter denne innlastingen.

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

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

Denne muligheten er nå lagt til. Også her styres alt gjennom klasser som tildeles input-feltene. For at de tre feltene skal utgjøre en gruppe, må de ha en felles identifikator. 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 eksempelvis gir alle tre klassen “datoA”, vil lenken for å åpne kalenderen bli koblet til dem, og de vil oppføre seg som en gruppe. Lenger ned følger 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 tilsvarer den delen av datoen det representerer: For dag-feltet: klassen “day” For måned-feltet: klassen “month” For år-feltet: klassen “year” Rekkefølgen på feltene er helt valgfri. Klassene for kalenderkonfigurasjon (antall år, tidligere, fremtidige osv.) plasseres i det første feltet i gruppen. Eksempelet under viser hvordan dette gjøres: Andre eksempel Dato 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 eksempelet gjøres dette i teksten før feltene, og dessuten inneholder label-tekstene for input-feltene denne informasjonen. Dato 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 eksempelet gjøres dette i teksten før feltene, og dessuten inneholder label-tekstene for input-feltene denne informasjonen. 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 befinner seg i en slik), og har følgende markup: Hvis lenken gjelder for datoangivelse fordelt på tre tekstfelt, blir klassen på lenken “enl_cal_group”, og den plasseres før

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.