Niquelao » acc_calendar: Tillgänglig kalender i JavaScript (onödig men användbar)

» acc_calendar: Tillgänglig kalender i Javascript (onödig men användbar) Niquelao Vad tycker du att det blev? 7 juli 2007 av Rumoroso —> 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 svuret ord , men om det görs noggrant och med kontroll behöver det inte få negativa konsekvenser när det 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 med att bygga den: Att den ska vara tillgänglig och icke-påträngande. Självklart erbjuds inte alternativet att fälla ut kalendern om det saknas stöd för Javascript, men om det finns stöd… 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 en lösning där utvecklare som vill implementera den på sina webbplatser inte behöver lägga till någon extra kod. Precis som i CSS använder vi olika typer av selektorer (element, id, klasser,…) för att koppla stilar till olika delar av våra dokument, varför inte göra detsamma för att koppla beteenden?

Dessutom finns sekundära mål som: 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 det nämnas att skriptet kan erhållas direkt genom att ladda ner det kompletta exemplet . Inkluderingen av kalendern i vårt dokument är så enkel som att inkludera 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 önskar att datumet följer ordningen dag/månad/år, utan ett inledande 0 framför dagen när den består av en enda siffra, men med ett sådant för månaden vid behov, och att årsformatet ska bestå av 4 siffror: var formato = ‘d/mm/yyyy’; Som redan nämnts måste textfältet ha klassen “fecha” om det deklarerade språket för dokumentet ä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 Årsintervall: 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 dynamiskt med AJAX? Skriptet har egenskapen att om nya textfält introduceras asynkront via AJAX vid något tillfälle, räcker det att anropa funktionen cargaLinks() efter denna laddning för att länkarna för att öppna kalendern ska kopplas 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 datumet.

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ådana.

Detta, vilket kan låta 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 skulle exempelvis kunna 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 råder total frihet beträffande den ordning de placeras i, där klasserna för konfigurering av kalendern (antal år, tidigare, senare, etc.) placeras i det första av de fält 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 innan och dessutom inkluderar label-taggar för input-fälten denna information. 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 innan och dessutom inkluderar label-taggar för input-fälten denna information. 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 stilmallen). Länken genereras omedelbart efter input (utanför label om den ingår i denna) 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 den placeras före det första av dessa. Uppdatering (7 juli 2007) Av

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.