acc_calendar: Tillgänglig JavaScript-kalender (onödig men användbar)

acc_calendar: Tillgänglig kalender i JavaScript (onödig men användbar) | Niquelao Niquelao Hur skulle du säga att det blev? Hoppa till innehåll Hem Kontrastkontroll Rubriker Karta Easyvalidator Om mig… acc_calendar: Tillgänglig kalender i JavaScript (onödig men användbar) Tillgänglighet och JavaScript? acc_calendar: Tillgänglig kalender i JavaScript (onödig men användbar) Uppdaterad den 1 juni 2008 , av Rumoroso I formulärfält där ett datum ska anges kan man, för att förbättra användarupplevelsen och samtidigt öka kontrollen över dataformatet, inkludera en kalender via JavaScript.

Jag vet, ett förbannat ord , men om det görs noggrant och med kontroll behöver det inte få negativa konsekvenser vad gäller standarder och tillgänglighet. Mål Ursprungligen har jag fastställt två huvudmål, som snarare än mål har varit riktlinjer för arbetet vid konstruktionen: Att den ska vara tillgänglig och icke-påträngande. Utan stöd för JavaScript erbjuds naturligtvis inte möjligheten att visa kalendern, men om stöd finns… varför inte se till att det genererade innehållet är tillgängligt och användbart?

Att den ska vara enkel att implementera och använda. Jag har sökt ett sätt så att utvecklare som vill implementera den på sina webbplatser inte behöver lägga till extra kod. Precis som i CSS där olika typer av selektorer (element, id, klasser,…) används för att koppla stilar till olika delar av våra dokument, varför inte använda samma sak för att koppla beteenden?

Dessutom finns följande sekundära mål: optimera, generalisera, internationalisera,… (för att vara realistisk fick jag stryka målen att bli rik och tjäna pengar.) Inkludering i våra dokument Först och främst bör nämnas att skriptet kan erhållas direkt genom att ladda ner det kompletta exemplet . Att inkludera kalendern i vårt dokument är lika enkelt som att lägga till motsvarande script-element i head : Kalendern kommer att laddas för alla textfält som har klassen “fecha” (om dokumentets språk är spanska).

Datumformatet anges på den första raden i skriptet. Så, om man exempelvis vill att datumet ska följa ordningen dag/månad/år, utan ett inledande 0 framför dagen när den bara består av en siffra, men med ett sådant för månaden vid behov, och att året ska ha 4 siffror: var formato = ‘d/mm/yyyy’; Som redan nämnts måste textfältet ha klassen “fecha” om dokumentets deklarerade språk är spanska (“date” om det är engelska, etc.) för att kalendern ska visas bredvid fältet.

Dessa klassnamn kan ändras, nya kan läggas till för andra språk, etc., direkt i skriptet. Dessutom anges alla möjliga parametrar som klasser. Den fullständiga listan är följande: Ladda kalender (krävs): fecha Datum före idag: prev Datum efter idag: post Årtalsintervall: rangX (där X är antalet år) Dagens datum inkluderas inte: todnact Applicera filter för tillgängliga datum: disp Vad händer om jag laddar input-fält dynamiskt med AJAX? Skriptet har egenskapen att om nya textfält läggs till asynkront via AJAX vid något tillfälle, räcker det att anropa funktionen cargaLinks() efter denna laddning för att koppla länkarna för öppning av kalendern till input-fälten Första exemplet Framtida datum, i formatet d/mm/yyyy , från detta år ( class=“fecha post” ) Framtida datum, i formatet d/mm/yyyy, från detta år utan att inkludera idag ( class=“fecha post todnact” ) Födelsedatum, i formatet d/mm/yyyy, upp till 100 år bakåt ( class=“fecha prev rang100” ) Datum för de kommande 20 åren, i formatet d/mm/yyyy, utan att inkludera idag ( class=“fecha post rang20 todnact” ) Datum för de senaste 15 åren, i formatet d/mm/yyyy ( class=“fecha prev rang15” ) Datum 10 år bakåt och framåt, i formatet d/mm/yyyy ( class=“fecha rang10” ) Ny förbättring (april 2007) Ibland kan vi önska att datumet anges i tre separata textfält, ett för varje del som utgör det.

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

Möjligheten att göra detta har lagts till. För detta fortsätter vi att styra allt genom användning av klasser tilldelade till input . För att de ska utgöra en grupp måste de tre textfälten innehålla en kod som identifierar dem som sådan.

Detta, vilket kan verka märkligt, är det egentligen inte. I praktiken behöver man bara lägga till en bokstav eller ett tal till ordet fecha som vi använder som klass i alla tre. Så, vi kan exempelvis tilldela alla tre klassen “fechaA” och omedelbart, utöver att länken för att öppna kalendern kopplas, kommer de att bete sig som en grupp. Längre fram inkluderas två exempel som visar detta tydligt.

Vart och ett av fälten måste ha en klass beroende på vilken data det är associerat med: För dagsfältet klassen ” day ” För månadsfältet klassen ” month ” För årsfältet klassen ” year ” Det finns full frihet beträffande den ordning de placeras i, där klasserna för konfiguration av kalendern (antal år, tidigare, senare, etc.) placeras i det första fältet som används. I exemplet nedan kan man se hur detta görs: Andra exemplet Datum för de kommande 10 åren i formatet dag, månad, år: Dag / Månad / År Det är viktigt att alltid informera användaren om vilket fält som är avsett för vad.

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

I exemplet informeras detta i texten beforehand och dessutom ingår det i label-taggar för input-fälten. Datum för de senaste 15 åren i formatet år, månad, dag: År / Månad / Dag Det är viktigt att alltid informera användaren om vilket fält som är avsett för vad.

I exemplet informeras detta i texten beforehand och dessutom ingår det i label-taggar för input-fälten. Uppdatering (april 2007) Skriptet har justerats för att reducera de stilar som appliceras från detta.

Nu har den genererade länken bilden som innehåll (tidigare laddades denna från stilarket). Länken genereras omedelbart efter input-fältet (utanför label om den ingår i den) och har följande markup: Om det är länken för att ladda datumet i tre textfält, ändras länkens klass till ” enl_cal_group , och denna placeras före

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.