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 mere end mål egentlig har været retningslinjer for arbejdet med at konstruere det: Det skal være tilgængeligt og ikke-forstyrrende. Uden støtte til JavaScript tilbydes muligheden for at åbne kalenderen naturligvis ikke, men hvis der er support… hvorfor så ikke gøre det genererede indhold tilgængeligt og brugbart? Det skal være nemt at implementere og bruge. Jeg har søgt en løsning, så udviklere, der ønsker at implementere det på deres hjemmesider, ikke behøver at indsætte yderligere kode.

Ligesom man i CSS bruger forskellige typer selektorer (elementer, id, klasser,…) 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 tilsvarende script-element i head : Kalenderen indlæses for alle tekstfelter, der har klassen ” fecha ” (hvis dokumentets sprog er spansk). Datoformatet angives i første linje i scriptet. Således, hvis man eksempelvis ønsker, at datoen følger rækkefølgen dag/måned/år, uden at indsætte 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 årsformatet skal være 4 cifre: var formato = ‘d/mm/yyyy’; Som allerede nævnt skal feltet have klassen “fecha”, hvis det erklærede sprog for dokumentet er spansk (“date” hvis det er engelsk osv.), for at kalenderen vises sammen med et tekstfelt.

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) Dagens dato medtages 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 på noget tidspunkt tilføjes 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 tilbage og frem i formatet d/mm/yyyy ( class=“fecha rang10” ) Ny forbedring (april 2007) Nogle gange kunne man ønske, at datoen indtastes i tre tekstfelter, ét for hver del, den består af.

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

Muligheden for dette er nu tilføjet.为此 vi fortsætter 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 mærkeligt, er det egentlig ikke. I praksis 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 eksempelvis anvende klassen “fechaA” på alle tre, og straks efter at linket til åbning af kalenderen er knyttet, vil de begynde at opføre sig som en gruppe. Senere inkluderer vi 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. 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. 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 i denne) 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 dette placeres 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.