Sezioni

Chiudi B3 & Linux

Chiudi Linux

Chiudi Webdesign

Chiudi Parole

Chiudi Tutorials

Chiudi Utilità

Altro

Chiudi In Rilievo

Chiudi Linux In Rilievo

Chiudi Ubuntu In Rilievo

Chiudi Dreamlinux

Ricerca




Login

Si riconnetta
---

Il tuo nome :

Il tuo codice segreto (associato al tuo pseudonimo)


 Numero di membri  5 membri


Utenti registrati online

( Nessuno )
Visite

 98896 visitatori

 5 visitatori online

Webmaster - Infos
Utilità



Locations of visitors to this page

lqh_button.png

nokappa.png

get_bluefish_80x15_2.png

mint_80x15.png

dreamlinux_15x8.png

vector_88x15.png

crunchbang_80x15.png

goblinx_80x15.png

big_linux_88x15.png

opera80x15.gif

button-thunar.png

play_ogg.png

multietnico.png

idv_b_europa.jpg

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.
Purtroppo non tutti i browsers sono in grado di leggere o rendere attivi questi scripts, per cui gli oggetti che dovrebbero essere influenzati da questi script, rimangono desolatamente inerti. Finchè lo script non influenza il contenuto informativo della pagina, è un male di poco conto, ma quando invece il dato informativo si può consultare solo attraverso uno script javascript, la cosa è più grave perchè non è possibile consultarlo adeguatamente.
Questa deficienza di supporto a JavaScript avviene ormai solo in browser arcaici e programmi assistivi come lettori di schermo, browser vocali, e sistemi braille di consultazione di pagine ipertestuali, ma questo non toglie che in effetti JavaScript sia un linguaggio lontano dai riconosciuti standard di accessibilità.

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.
Sono scripts costruiti malamente che sfruttano solo l'interazione con il mouse, dimenticando l'utilità della tastiera e dei testi alternativi, facendo si che funzioni Javascript e DHTML di utilità riconosciuta, siano esempi lampanti di inaccessibilità.
Rendere gli scripts più accessibili, se non totalmente accessibili, è affare di poca complessità.

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à.
In essi, infatti è previsto che ad un evento segua una azione voluta e messa in opera agendo su un pulsante o su un collegamento preciso.
Questa messa in opera dell'azione può avvenire agendo con il mouse, ma anche attraverso la tastiera.
In più la presenza di testi alternativi facilità la comprensione dell'evento e la possibilità di accedere all'azione successiva.

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:

Punto (1.1) (Priorità 1)
Provvedere a inserire un testo equivalente per tutti gli elementi non testuali (alt="", longdesc="") . Questi includono immagini, rappresentazioni grafiche del testo (simboli), regioni delle immagini mappate, animazioni (gif animate), applets, ASCII art, frames, scripts, bottoni, spaziatori, bottoni grafici, suoni, video.


Punto (6.4) (Priorità 2)
Per gli scripts e le applet, assicurate che il manipolatore dell'evento inserito nell'applet o nello script, sia indipendente dallo strumento di attivazione.


Punto (7.3) (Priorità 2)
Fino a quando i programmi utente permetteranno agli utenti di fermare i contenuti in movimento, evitate i movimenti nelle pagine.


Punto (8.1) (Priorità 2) Costruite elementi programmatici come scripts e applet, direttamente accessibili o compatibili con le tecnologie assistive (lettori di schermo, browser vocali, browser braille). Priorità 1 se la funzione è importante e non presentabile diversamente, altrimenti Priorit? 2.

Punto (9.3) (Priorità 2) Per gli scripts, specificare un attivatore logico, piuttosto che un attivatore dipendente da uno strumento.

Punto (9.4) (Priorità 3) Creare un ordine logico nei controlli dei links, dei controlli modulo e degli oggetti.

Punto (9.5) (Priorità 3) Prevedete le chiavi di accesso ai links importanti (inclusi quelli delle mappe di immagine lato client), ai controlli dei moduli ed ai gruppi di controllo dei Form.

Punto (10.4) (Priorità 3) Fino a quando i programmi utente tratteranno correttamente i controlli di modulo vuoti, annidate del testo nei box selezionabili e nelle aree di testo.

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à.
Ne deriva che è importante rendere accessibile un modulo a gestione Javascript inserendo le opportune chiavi di accesso rapido, gli indici tabellari, le modalità di impiego tramite tastiera e mouse, i testi alterntivi a fini indicativi.
Vediamo un esempio.

Ricerche su più motori di ricerca
Questa 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:

<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
Con l'esempio illustrato abbiamo soddisfatto i punti 1.1, 6.4, 8.1, 9.3, 9.4, 9.5, 10.4.

Ora passiamo ad illustrare come rendere uno script accessibile se JavaScript non è supportato.
Se il programma che stiamo utilizzando non supporta JavaScript, le informazioni gestite da JavaScript stesso, non sono disponibili, quindi saremo costretti a renderle disponibili in altro modo con la produzione delle stesse informazioni che vengano visualizzate nella stessa pagina od in altre.

Scegliamo la via delle informazioni alloggiate nella stessa pagina e per farlo utilizziamo con profitto il tag <noscript> ... </noscript>.
Il tag in argomento non può inserirsi nei tag <head> ... </head> e deve sempre accompagnarsi ad ogni script, saremo quindi obbligati ad inserire il JavaScript all'interno dei tags <body> ... </body>.
Per farlo con criterio senza appesantire il codice, interferire in qualche modo con gli altri lementi della pagina e per fare in modo che chi non supporta JavaScript goda delle informazioni gestite dal medesimo, è bene inserire lo script come primo elemento del tag <body> abbinandogli l'elemento <noscript> come illustrato nell'esempio.

<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.
Se, per esempio, lo script incluso gestisce una finestra di scorrimento nella quale sono contenute delle informazioni o dei collegamenti, nel tag <noscript> devono essere contenute tutte le informazioni contenute nella finestra a scorrimento ed i links eventualmente inclusi. Stessa cosa se sono contenute delle immagini.
Se non è possibile inserire le informazioni o le immagini nel tag <noscript>, perchè troppo voluminosi, si produrrà una pagina alternativa e la si collegherà alla pagina con lo script, inserendo il link nel tag <noscript>, come illustrato negli esempi.

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
Ultima modifica : 20/02/2008 - 21:18
Categoria : Webdesign
Pagina letta 211 volte


Anteprima di stampa Anteprima di stampa     Stampa pagina Stampa pagina


Opinioni su questo articolo


Nessuno ha lasciato un commento.
Diventa il primo a farlo!



^ Torna in alto ^