Calendario accessibile in JavaScript (non necessario ma utile)

Calendario accessibile in javascript (inutile ma utile) Aggiornato il 1 giugno 2008 , da Rumoroso Nei campi di modulo in cui si deve inserire una data, al fine di migliorare l’esperienza utente e allo stesso tempo aumentare il controllo sul formato dei dati, si può includere un calendario tramite javascript. Lo so, parola maledetta , ma se fatto con cura e controllo, non deve necessariamente avere implicazioni negative in termini di standard e accessibilità.

Obiettivi In principio ho stabilito due obiettivi principali, che più che obiettivi sono stati linee guida di lavoro al momento di costruirlo: Che sia accessibile e non invasivo. Evidentemente, in assenza di supporto per javascript non si offre l’opzione di visualizzare il calendario, ma, se c’è supporto… Perché non rendere il contenuto generato accessibile e utilizzabile? Che sia facile da implementare e utilizzare. Ho cercato un modo tale che i programmatori che desiderano implementarlo nelle loro pagine web non debbano introdurre codice aggiuntivo.

Come in CSS si utilizzano diversi tipi di selettori (di elementi, id, classi,…) per associare stili alle diverse parti dei nostri documenti, perché non utilizzare lo stesso per associare comportamenti? Inoltre, come obiettivi secondari ci sono: ottimizzare, generalizzare, internazionalizzare,… (essendo realistico, ho dovuto eliminare gli obiettivi di rimorchiare e di guadagnare soldi.) Includerlo nei nostri documenti Prima di tutto indicare che lo script si può ottenere direttamente scaricando l’esempio completo .

L’inclusione del calendario nel nostro documento è semplice come includere l’elemento script corrispondente nell’head : Il calendario si caricherà per qualsiasi campo di testo che includa la classe ” data ” (se la lingua del documento è lo spagnolo). Il formato della data si introduce nella prima riga dello script. Così, se per esempio si desidera che la data segua l’ordine giorno/mese/anno, non includendo uno 0 davanti al giorno quando è formato da una cifra, e includendolo nel mese quando necessario, e che il formato per l’anno siano 4 cifre: var formato = ‘d/mm/yyyy’; Come già menzionato, per riuscire a mostrare il calendario accanto a un campo di testo, questo dovrà avere la classe “data” se la lingua dichiarata per il documento è lo spagnolo (“date” se è l’inglese, ecc).

Questi nomi di classe si possono modificare, aggiungere nuovi per altre lingue, ecc., direttamente nello script. Inoltre, tutti i possibili parametri si introducono come classi.

La lista completa è la seguente: Caricare calendario (richiesto): data Date precedenti a oggi: prev Date posteriori a oggi: post Intervallo di anni: rangX (essendo X il numero di anni) Non si include il giorno attuale: todnact Applicare filtro per date disponibili: disp E se carico dinamicamente gli input con AJAX? Lo script ha la proprietà che se in qualsiasi momento si introducono nuovi campi di testo in modo asincrono con AJAX, basterà che dopo tale caricamento si chiami la funzione cargaLinks() affinché agli input si associno i link per l’apertura del calendario Primo esempio Data futura, in formato d/mm/yyyy , di quest’anno ( class=“fecha post” ) Data futura, in formato d/mm/yyyy, di quest’anno senza includere oggi ( class=“fecha post todnact” ) Data di nascita, in formato d/mm/yyyy, fino a 100 anni ( class=“fecha prev rang100” ) data dei prossimi 20 anni, in formato d/mm/yyyy, senza includere oggi ( class=“fecha post rang20 todnact” ) Data degli ultimi 15 anni, in formato d/mm/yyyy ( class=“fecha prev rang15” ) Data 10 anni indietro e in avanti, in formato d/mm/yyyy ( class=“fecha rang10” ) Nuovo Miglioramento (aprile 2007) In occasioni potremmo desiderare che la data si introduca in tre campi di testo, uno per ogni dato che la compone.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Si è aggiunta la possibilità di farlo. Per questo continueremo a controllare tutto mediante l’uso di classi assegnate agli input . Affinché costituiscano un gruppo, i tre campi di testo dovranno aggiungere un codice che li identifichi come tale.

Questo, che sembra qualcosa di strano, non lo è poi così tanto. In realtà, quello che bisogna fare è aggiungere alla parola fecha che impieghiamo come classe nei tre, una lettera o un numero. Così, per esempio, potremmo applicare ai tre la classe “fechaA” e immediatamente, oltre ad associarsi il link per l’apertura del calendario, si passerebbero a comportare come un gruppo. Più avanti si includono due esempi che lo mostrano chiaramente.

Ognuno dei campi dovrà avere una classe in funzione del dato che gli si associa: Per il campo giorno la classe ” day ” Per il campo mese la classe ” month ” Per il campo anno la classe ” year ” Esiste totale libertà per l’ordine in cui si mettono, collocando le classi per la configurazione del calendario (numero di anni, precedenti, posteriori, ecc.) nel primo dei campi che si utilizza. Nell’esempio seguente si potrà apprezzare il modo di farlo: Secondo esempio Data dei prossimi 10 anni in formato giorno, mese, anno: Giorno / Mese / Anno Considerazione importante è informare sempre l’utente di qual è il campo per ogni cosa.

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

Nell’esempio si informa nel testo precedente e inoltre, le etichette degli input lo includono. Data degli ultimi 15 anni in formato anno, mese, giorno: Anno / Mese / Giorno Considerazione importante è informare sempre l’utente di qual è il campo per ogni cosa.

Nell’esempio si informa nel testo precedente e inoltre, le etichette degli input lo includono. Aggiornamento (aprile 2007) Si è ritoccato lo script per ridurre gli stili che si applicano da questo.

Ora, il link generato ha l’immagine per contenuto (prima questa si caricava dal foglio di stile). Il link si genera immediatamente dopo l’input (fuori dal label se è incluso in esso) e possiede il seguente markup: Nel caso in cui sia il link per il caricamento della data in tre campi di testo, la classe del link passa a essere ” enl_cal_group , e questo si situa prima

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.