Niquelao » Archivio del weblog » Calendario accessibile in javascript (inutile ma utile)

» Archivio del weblog » Calendario accessibile in javascript (inutile ma utile) Niquelao - Accessibilità Calendario accessibile in javascript (inutile ma utile) 11 febbraio 2007 di Rumoroso Nei campi di un modulo in cui si deve inserire una data, per 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 avere implicazioni negative in termini di standard e accessibilità.

Obiettivi In principio ho stabilito due obiettivi principali, che più che obiettivi sono state linee guida di lavoro al momento di costruirlo: Che sia accessibile e non intrusivo. 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,… (realisticamente, ho dovuto eliminare gli obiettivi di rimorchiare e di guadagnare soldi.) L’esempio Per verificarne il funzionamento, potete accedere a un esempio e scaricarlo . Includendolo nei nostri documenti 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 ”.

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: var formato = ‘d/mm/y’; Per riuscire a mostrare il calendario accanto a un campo di testo, questo dovrà avere la classe “data”. Inoltre, tutti i possibili parametri si introducono come classi.

La lista completa è la seguente: Caricare calendario (richiesto): data Date precedenti a oggi: prev Date successive a oggi: post Intervallo di anni: rangX (essendo X il numero di anni) Non si include il giorno attuale: todnact Vantaggi Tra i vantaggi che gli si possono attribuire abbiamo: Facile da usare e implementare. Non è intrusivo.

Il codice e il contenuto che si genera è accessibile (marcatura, organizzazione, contenuto,…) ed è utilizzabile mediante l’uso di ausili tecnici (lettore di schermo,…). In questo punto si è tenuto conto di dove ricade il focus sia quando si mostra sia durante il funzionamento e quando scompare. Così, quando si mostra, il focus ricade direttamente sul selettore di anni, seguendo un ordine logico nel tabulare da esso, e quando si chiude il calendario (mediante il link di chiusura o dopo aver selezionato una data) il focus ricade sul campo di testo a cui era stato associato.

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

Si facilita la navigazione nello stesso indipendentemente dal dispositivo. Si può navigare utilizzando qualsiasi dispositivo con cui possiamo navigare sul web. I suoi parametri sono facilmente configurabili e la sua chiamata molto semplice (mediante l’uso di nomi di classe).

La lingua la prende direttamente dal documento padre, potendo aggiungere nuove traduzioni al codice. Nel caso in cui non sia dichiarata la lingua nel documento (cosa che non deve accadere), sarà lo spagnolo quello utilizzato per impostazione predefinita. Attualmente, oltre allo spagnolo include l’inglese. Inoltre si è fatto in modo che riconosca se è inglese americano, non perché cambierà il contenuto, ma per cambiare la disposizione dei giorni della settimana (la domenica si colloca per prima).

Gli stili applicati al calendario si includono mediante un CSS collegato tramite lo script, cosicché in assenza di supporto per questo, si ottimizza il download del documento non chiamando a detto foglio di stili. Si sono incluse classi in modo tale che si possano applicare stili su qualsiasi delle celle della tabella (giorni attivi, giorni non attivi, giorno attuale), così come stili specifici per i sabati o le domeniche. Codice generato Di seguito includo parte del codice generato dallo script.

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

Come si può osservare (e come ho già detto) si includono nomi di classe e id per poter controllare la maquetazione mediante il foglio di stili.

Conclusione A mo’ di chiusura… cosa si potrebbe dire di questo calendario?… ebbene che ” è inutile… ma utile ” e che ” non ha implicazioni negative in termini di accessibilità ”. …a proposito, che giorno è oggi?

Categoria: Accessibilità, Javascript —> 2 commenti juan 16 marzo 2007 è eccellente, ma mi sorge un errore a volte al momento di selezionare la data o passare gli anni, e smette di funzionare IE e anche in Firefox. sai cos’è? Rumoroso 21 agosto 2008 Verifica se non invia il contenuto del campo o se in realtà non sta inviando la variabile.

Lo script non interferisce nell’invio del modulo, quindi il problema potrebbe venire da un altro lato. Un saluto Puoi fare un monitoraggio dei commenti grazie al feed RSS 2.0 . Potresti anche lasciare un commento , o inviare un trackback dal tuo sito. Articolo precedente: Enhorabuena TAW Articolo successivo: acc_calendar v1.1 Lascia il tuo commento I campi Nome ed Email sono obbligatori Aggiungici a…

Tag che evidenziamo in generale accessibilità bert bos blockquote bug cañas citazioni cite comportamento conoscenza CSS escuas standard fieldset Firefox formato formulario font hidden ie IE 7 informazione javascript legend lista niquelando obbligatorio opera spiaggia q squash vacanze w3c WCAG xhtml Quest’opera è sotto una licenza di Creative Commons .

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.