Niquelao » Weblog-arkiv » Tilgængelig kalender i JavaScript (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 Indledningsvis har jeg fastlagt to hovedmål, som mere end mål har været retningslinjer for arbejdet med at konstruere den: At den er tilgængelig og ikke-påtrængende. Uden understøttelse af JavaScript tilbybles muligheden for at udfolde kalenderen naturligvis ikke, men hvis der er understøttelse… hvorfor så ikke gøre det genererede indhold tilgængeligt og brugbart? At den er nem at implementere og bruge. Jeg har søgt en løsning, så programmører, der ønsker at implementere den på deres hjemmesider, ikke behøver at indsætte yderligere kode.

Ligesom man i CSS bruger forskellige typer selectorer (elementer, id’er, klasser osv.) til at knytte styles til 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 blive berømt og tjene penge.) Eksemplet For at teste funktionen kan du se et eksempel og downloade det .

Inkludering i vores dokumenter Det er lige så enkelt at inkludere kalenderen i vores dokument som at indsætte det relevante script-element i head : Kalenderen indlæses for ethvert tekstfelt, der indeholder klassen ” fecha ”. Datoformatet angives i første linje af scriptet. Hvis man f.eks. ø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 et 0-tal i måneden, når det er nødvendigt: var formato = ‘d/mm/y’; For at få vist kalenderen ved siden af et tekstfelt skal dette have klassen “fecha”.

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 dag medtages ikke: todnact Fordele Blandt de fordele, der kan tilskrives den, har vi: Nem at bruge og implementere.

Ikke-påtrængende. Koden og det indhold, der genereres, er tilgængeligt (opmærkning, organisering, indhold,…) og kan bruges ved hjælp af hjælpemidler (skærmlæser,…). På dette punkt er der taget hensyn til, hvor fokus havner, både når den vises, under betjeningen og når den forsvinder. Når den vises, havner fokus direkte på års-vælgeren, hvilket følger en logisk rækkefølge ved tabulering herfra, og når kalenderen lukkes (via lukke-linket eller efter valg af en dato), havner fokus på det tekstfelt, den var knyttet til.

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

Navigationen i den faciliteres uanset enhed. Man kan navigere ved hjælp af enhver enhed, som man kan navigere på nettet med. Parametrene er nemme at konfigurere, og kaldet er meget simpelt (ved brug af klassenavne).

Sproget hentes direkte fra overordnet dokument, og nye oversættelser kan tilføjes til koden. Hvis sproget ikke er defineret i dokumentet (hvilket ikke bør ske), vil spansk blive brugt som standard. I øjeblikket inkluderer den udover spansk også engelsk. Derudover er den gjort i stand til at genkende amerikansk engelsk, ikke fordi indholdet ændres, men for at ændre placeringen af ugedagene (søndag placeres først).

De styles, der anvendes på kalenderen, inkluderes via en CSS, der linkes gennem scriptet, hvilket optimerer downloadet af dokumentet i tilfælde af manglende understøttelse heraf, da stylesheetet ikke kaldes. Der er inkluderet klasser, således at styles kan anvendes på enhver af tabelcellerne (aktive dage, inaktive dage, aktuel dag), samt specifikke styles for lørdage eller søndage. Genereret kode Nedenfor inkluderer jeg en del af den kode, der genereres af scriptet.

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

Som det kan ses (og som jeg allerede har nævnt), inkluderes klasse- og id-navne for at kunne styre layoutet via stylesheetet.

Konklusion Afslutningsvis… hvad kan man sige om denne kalender?… nå ja, at ” den er unødvendig… men nyttig ” og at ” den ikke har negative implikationer i forhold til tilgængelighed ”. …for resten, hvilken dag er det i dag?

Kategori: Tilgængelighed, Javascript —> 2 kommentarer juan 16. marts 2007 Den er fremragende, men jeg støder nogle gange på en fejl, når jeg vælger datoen eller skifter år, og så holder IE op med at virke, og det gør Firefox også. Ved du, hvad det er?

Rumoroso 21. august 2008 Tjek om indholdet af feltet ikke sendes, eller om variablen faktisk ikke bliver sendt. Scriptet griber ikke ind i afsendelsen af formularen, så problemet kunne komme et andet sted fra. Mange hilsner Du kan følge kommentarerne via RSS 2.0 feedet . Du kan også efterlade en kommentar , eller sende en trackback fra dit eget site.

Forrige artikel: Tillykke TAW Næste artikel: acc_calendar v1.1 Efterlad din kommentar Felterne Navn og E-mail er påkrævet Føj os til… Tags vi fremhæver generelt tilgængelighed bert bos blockquote bug cañas citater cite adfærd viden CSS escuas standarder fieldset Firefox format formular skrifttyper hidden ie IE 7 information javascript legend liste niquelando påkrævet opera strand q squash ferie w3c WCAG xhtml Dette værk er licenseret under en Creative Commons licens .

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.