Niquelao » acc_calendar: Tilgængelig JavaScript-kalender (unødvendig, men nyttig)

Rumoroso I formularfelter, hvor der skal indtastes en dato, kan man for at forbedre brugeroplevelsen og samtidig øge kontrollen med dataformatet inkludere en kalender via javascript. Jeg ved det, et bandord , men hvis det gøres omhyggeligt og kontrolleret, behøver det ikke have negative konsekvenser for standarder og tilgængelighed.

Mål Indledningsvist har jeg fastlagt to hovedmål, som snarere end mål har været retningslinjer for arbejdet med at konstruere det: At det skal være tilgængeligt og ikke-påtrængende. Uden understøttelse af javascript tilbydes muligheden for at åbne kalenderen naturligvis ikke, men hvis der er understøttelse… hvorfor så ikke gøre det genererede indhold tilgængeligt og brugbart? At det skal være nemt at implementere og bruge. Jeg har søgt en løsning, så programmører, der ønsker at implementere det på deres hjemmesider, ikke behøver at indsætte yderligere kode.

Ligesom man i CSS bruger forskellige typer selectorer (element-, id-, klasse-,…) til at knytte styles til de forskellige dele af vores dokumenter, hvorfor så ikke bruge det samme til at knytte adfærd? Derudover er de sekundære mål: optimere, generalisere, internationalisere,… (for at være realistisk måtte jeg fjerne målene om at binde og tjene penge.) Inkludering i vores dokumenter Først og fremmest skal det nævnes, at scriptet kan hentes direkte ved at downloade det komplette eksempel . Inkluderingen af kalenderen i vores dokument er så simpel som at indsætte det tilhørende script-element i head : Kalenderen vil blive indlæst for ethvert tekstfelt, der indeholder klassen “fecha” (hvis dokumentets sprog er spansk).

Datoformatet angives i første linje af scriptet. Således, hvis man f.eks. ønsker, at datoen følger rækkefølgen dag/måned/år, uden at inkludere et 0-tal foran dagen, når den kun består af ét ciffer, men med det i måneden, når det er nødvendigt, og at formatet for året skal være 4 cifre: var formato = ‘d/mm/yyyy’; Som allerede nævnt skal tekstfeltet for at få vist kalenderen ved siden af et tekstfelt have klassen “fecha”, hvis det erklærede sprog for dokumentet er spansk (“date” hvis det er engelsk, osv.).

Disse klassenavne kan ændres, nye kan tilføjes for andre sprog osv., direkte i scriptet. Derudover angives alle mulige parametre som klasser. Den fulde liste er som følger: Indlæs kalender (påkrævet): fecha Datoer før i dag: prev Datoer efter i dag: post Årsinterval: rangX (hvor X er antallet af år) Den aktuelle dato inkluderes ikke: todnact Anvend filter for tilgængelige datoer: disp Hvad nu hvis jeg indlæser input dynamisk med AJAX?

Scriptet har den egenskab, at hvis der til enhver tid indsættes nye tekstfelter asynkront via AJAX, er det nok at kalde funktionen cargaLinks() efter denne indlæsning, for at inputs’ene får knyttet linkene til åbning af kalenderen Første eksempel Fremtidig dato, i formatet d/mm/yyyy , fra dette år ( class=“fecha post” ) Fremtidig dato, i formatet d/mm/yyyy, fra dette år uden at inkludere i dag ( class=“fecha post todnact” ) Fødselsdato, i formatet d/mm/yyyy, op til 100 år tilbage ( class=“fecha prev rang100” ) Dato for de næste 20 år, i formatet d/mm/yyyy, uden at inkludere i dag ( class=“fecha post rang20 todnact” ) Dato for de sidste 15 år, i formatet d/mm/yyyy ( class=“fecha prev rang15” ) Dato 10 år bagud og fremad, i formatet d/mm/yyyy ( class=“fecha rang10” ) Ny forbedring (april 2007) Nogle gange kunne vi ønske, at datoen indtastes i tre tekstfelter, ét for hver af de data, den består af.

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

Muligheden for at gøre dette er nu tilføjet. For at gøre dette fortsætter vi med at styre alt gennem brug af klasser tildelt til input . For at udgøre en gruppe skal de tre tekstfelter tilføje en kode, der identificerer dem som sådan.

Dette, som måske virker lidt underligt, er det faktisk ikke. I realiteten skal man blot tilføje et bogstav eller et tal til ordet fecha, som vi bruger som klasse i alle tre. Således kunne vi f.eks. give alle tre klassen “fechaA”, og straks efter at linket til åbning af kalenderen er knyttet, vil de begynde at opføre sig som en gruppe. Længere nede er inkluderet to eksempler, der viser dette tydeligt.

Hvert af felterne skal have en klasse afhængigt af den data, det er knyttet til: For dag-feltet klassen ” day ” For måned-feltet klassen ” month ” For år-feltet klassen ” year ” Der er fuld frihed til den rækkefølge, de placeres i, idet klasserne til konfiguration af kalenderen (antal år, tidligere, senere osv.) placeres i det første felt, der bruges. I eksemplet nedenfor kan man se, hvordan det gøres: Andet eksempel Dato for de næste 10 år i formatet dag, måned, år: Dag / Måned / År Det er vigtigt altid at informere brugeren om, hvilket felt der er til hvad.

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

I eksemplet gives informationen i teksten forud, og desuden inkluderer labels’ene for input dette også. Dato for de sidste 15 år i formatet år, måned, dag: År / Måned / Dag Det er vigtigt altid at informere brugeren om, hvilket felt der er til hvad.

I eksemplet gives informationen i teksten forud, og desuden inkluderer labels’ene for input dette også. Opdatering (april 2007) Scriptet er justeret for at reducere de styles, der anvendes herfra.

Nu har det genererede link billedet som indhold (tidligere blev dette indlæst via stylesheet). Linket genereres umiddelbart efter input (uden for label, hvis det er inkluderet deri) og har følgende markup: Hvis det er linket til indlæsning af datoen i tre tekstfelter, ændres linkets klasse til ” enl_cal_group , og det placeres før det første af dem. Opdatering (7. juli 2007) Af

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.