Sezioni
Altro
Ricerca
Login
Si riconnetta --- 5 membri
( Nessuno )
Visite
98896 visitatori 5 visitatori online Webmaster - Infos
Utilità
|
Webdesign - Javascript Accessibili
Ormai sono disponibili in rete molte centinaia di scripts DHTML e Javascript, ma una pressochè nulla percentuale di questi risulta in qualche modo rispettare alcuni criteri di accessibilità, questo perchè gli sviluppatori di questi scripts hanno ottimizzato i loro prodotti per un uso normale e per normodotati, laddove per normodotati si intendono tutti coloro che oltre alla perfetta dotazione sensoriale, possiedono tecnologie odierne e adeguate. JavaScript - linguaggio orientato agli oggetti - si applica a oggetti contenuti in altri oggetti che vengono resi disponibili alla consultazione da dei programmi. Questi programmi si chiamano browsers. Anche lasciando da parte tecnologie assistive particolari adatte ai disabili, purtroppo molti Javascript sono inaccessibili anche per chi utilizza tecnologia adatta al supporto dello stesso. Premesso che gli scripts orientati a pure magie visuali (testi in movimento, effetti flash o cromatici sul testo, effetti di transizione sulle immagini, ecc.) sono gli scripts più inaccessibili per ovvi motivi, quelli che possono essere passibili di accessibilizzazione sono quelli che agiscono sui links e che prevedono l'uso di moduli e pulsanti, quelli insomma che richiedono il consenso è l' interattività. Questo script permette di aprire una finestra di allarme con un messaggio per il visitatore. Come è possibile vedere, il pulsante contiene una informazione ed un invito ad effettuare una operazione. Se non la si esegue, non succede nulla, ma la si può eseguire solo se si clicca, ovvero se si porta il puntatore del mouse sul bottone e si clicca con il pulsante di esso. Tuttavia è possibile cliccare sul pulsante senza usare il mouse. Ne potrete avere una prova se cliccate sul pulsante 'Tab' per quattro volte, cliccate la lettera 'b' e se premete 'invio'. Come sia possibile farlo è illustrato nelle righe successive. Rendere accessibile un modulo od un pulsante gestito da JavaScript, significa ottemperare a queste raccomandazioni del WAI-CAG 1.0: I moduli gestiti da JavaScript vengono impiegati per esporre del testo in modo statico e dinamico, rispondere a delle domande, illustrare delle alternative, rintracciare delle parole, ricercare dei files e per altre necessità. Ricerche su più motori di ricercaQuesta prima stringa permette all'utente di inserire una parola da ricercare. Appare ovvio quindi che, attraverso la tastiera sia il primo oggetto da selezionare e che venga suggerito al medesimo a cosa serva questa stringa. Nello script quindi dovremo inserire i seguenti dati: Con l'esempio illustrato abbiamo soddisfatto i punti 1.1, 6.4, 8.1, 9.3, 9.4, 9.5, 10.4.<form method="get" onsubmit="vaiURL(this.where.options.selectedIndex,this.what.value)"action="#"> <label for="what">Ricerca</label> <input size="20" name="what"tabindex="1" value="oggetto" title="digita la parola da ricercare"> </form> L'attributo 'tabindex' indica la posizione gerarchica tabellare che, in questo caso, è la numero uno quindi la prima che verrà selezionata premendo il tasto 'tab'. L'attributo 'value' indica un testo di base inserito nella stringa a fini indicativi. L'attributo 'title' è il testo alternativo che indica all'utente cosa deve fare.Questa seconda stringa permette all'utente di scegliere quale motore scegliere per effettuare le sue ricerche. Appare quindi ovvio che sia il secondo oggetto da selezionare e utilizzare. Lo script risulterà come segue: <label for="where">in</label><select name="where" tabindex="2"> <option value="http://search.yahoo.com/bin/search?p=">Yahoo</option> <option value="http://www2.infoseek.com/Titles?qt=">InfoSeek</option> <option value="http://www.altavista.digital.com/cgi-bin/query?q=">Altavista</option> <option value="http://www-msn.lycos.com/cgi-bin/pursuit?query=">Lycos</option> <option value="http://www.excite.com/search.gw?searchType=Concept;category=default;mode=relevance;showqbe=1; display=msn,hb;search=">Excite </option> <option value="http://www.google.com/search"selected>Google </option> <option value="http://services1.iltrovatore.it/redir.cgi">IlTrovatore </option> <option value="http://search.dmoz.org/cgi-bin/search">Dmoz </option> </select>Questo è il pulsante per avviare la ricerca nel motore prescelto. Sarà perciò il terzo oggetto da selezionare e utilizzare e deve essere suggerita la sua utilizzazione. Lo script che lo contraddistingue sarà : <input type="button" value="[T]rova!" accesskey="t" onclick="window.location.href=url(this.form.where.options.selectedIndex)+this.form.what.value" onkeypress="window.location.href=url(this.form.where.options.selectedIndex)+this.form.what.value" title="Avvia la ricerca."> Da notare che nel valore dell'attributo 'value' la T di 'Trova' sia inclusa tra due parentesi quadre. Ciò per indicare che la chiave di accesso da tastiera è la 't'. Di conseguenza nell'attributo 'accesskey' il valore sarà 't' per collegare il pulsante alla lettera 't' della tastiera. L'attributo 'onclick' indica che l'attivazione del pulsante è effettuabile con il mouse. L'attributo 'onkeypress' indica che l'attivazione del pulsante è effettuabile da tastiera cliccando sulla lettera 't' chiave di accesso rapido. Ecco il modulo completo: N.B. Il codice JavaScript non è stato illustrato perchè non richiede manovre di adeguamento Ora passiamo ad illustrare come rendere uno script accessibile se JavaScript non è supportato. Scegliamo la via delle informazioni alloggiate nella stessa pagina e per farlo utilizziamo con profitto il tag <noscript> ... </noscript>. <doctype> <html> <head> <title>Esempio</title> </head> <body> <script language="javascript" type="text/javascript"> - - codice dello script - - </script> <noscript>Testo che illustra o contiene le informazioni gestite da JavaScript</noscript> <h1>Titolo della pagina</h1> <h2>sottotitolo</h2> <p>Contenuto</p> </body> </html> Nel tag <noscript> andrebbero inserite tutte le informazioni gestite dal JavaScript incorporato in modo tale che in cima alla pagina mostrata dai browser che non supportano JavaScript siano visibili le informazioni. Se lo script agisce a soli fini estetici o a carico di elementi non informativi, sarebbe ideale descrivere cosa determina lo script. Informazioni inline <doctype> <html> <head> <title>Esempio</title> </head> <body> <script language="javascript" type="text/javascript"> - - questo script genera un menù orizzontale scrollabile attraverso due pulsanti laterali- - </script> <noscript>Se vedete queste righe significa che il vostro browser non supporta JavaScript. Ecco le informazioni gestite dal JavaScript incluso in questa pagina:<br /> <a href="http://www.dynamicdrive.com"tabindex="1" title="Collegamentoal sito Dynamic Drive">Dynamic Drive</a>| <a href="http://javascriptkit.com"tabindex="2" title="Collegamentoal sito JavaScript Kit">JavaScriptKit</a> | <a href="http://www.codearena.com"tabindex="3" title="Collegamentoal sito CodeArena.com">CodeArena.com</a>| <a href="http://www.html.it"tabindex="4" title="Collegamentoal sito Html.it">Html.it</a>| <a href="http://freewarejava.com"tabindex="5" title="Collegamentoal sito Freewarejava.com">Freewarejava.com</a> </noscript> <h1>Titolo della pagina</h1> <h2>sottotitolo</h2> <p>Contenuto</p> </body> </html> N.B. La pagina con l'esempio vero é disponibile al seguente indirizzo : http://www.btre.it/Prova2.htm Informazioni in pagina alternativa <doctype> <html> <head> <title>Esempio</title> </head> <body> <script language="javascript" type="text/javascript"> - - questo script genera un men? orizzontale scrollabile attraverso due pulsanti laterali- - </script> <noscript>Se visionate questo testo, significa che il vostro browser non supporta JavaScript. In ogni caso le informazioni gestite dal JavaScript incluso, <a href="Info.htm" title="Collegamento alla pagina alternativa con le informazioni"sono disponibili in questa pagina.</a></noscript> <h1>Titolo della pagina</h1> <h2>sottotitolo</h2> <p>Contenuto</p> </body> </html> Come abbiamo potuto vedere, rendere un JavaScript e le informazioni, da esso gestite, più accessibili, non è un compito difficile. Data creazione : 20/02/2008 - 21:18 Opinioni su questo articolo
| Traduci
Ultime Distribuzioni
Ultimi Pacchetti
Info Utili
Le Newsletter
Le Recensioni
Letture |


B3 & Linux
In Rilievo
5 membri



Torna in alto 


