Hmmmmm va visto bene questo problema, io con JS sono un ignorante totale ed è possibile che si possano trovare altre vie.
Forse ho trovato la soluzione: baypassare il Js (senza escluderlo)
Prima soluzione:
inserire due funzioni per il testo in un Js esterno, ( le funzioni di esempio sono sotto)
Seconda soluzione:
linkare il file Js che stai usando adesso per gestire il font, il che significa che il codice javascript adesso associato: onkeypress="changeFontSize(-1); sparirà dall'index del template, rimuovendo il blocco e il link attiverà le funzioni nel Jscript impostato normalmente nell'head della pagina: //<script type="text/javascript" src="js/xxx.js"></script>//
//funzioni di esempio (inserite in un file Js) utilizzate per il ridimensionamento del testo
function setFontSize(size) {
var bod = document.getElementsByTagName("body")[0];
var percentuale = "100%"; // default
if (size == 1) percentuale = "100%";
if (size == 2) percentuale = "110%";
if (size == 3) percentuale = "120%";
bod.style.fontSize = percentuale;
createCookie('fontUtente',size,365);
}
function setFontSizeacc(size) {
var bod = document.getElementsByTagName("body")[0];
var percentuale = "100%"; // default
if (size == 1) percentuale = "110%";
if (size == 2) percentuale = "130%";
if (size == 3) percentuale = "150%";
bod.style.fontSize = percentuale;
createCookie('fontUtenteacc',size,365);}
// nota bene: queste funzioni sono estrapolate da un file piu complesso che gestisce anche il cambio di skin e gestisce i cookies, quindi bisognerà fare riferimento alle effettive funzioni che gestiscno i font nell'attuale Js usato dal template//
------------- ----------- ------------- ------
Questo è invece l'esempio pratico di utilizzo, nell'index del template, della seconda soluzione:
<!-- INIZIO AREA PERSONALIZZA -->
<div id="versioni" class="clear">
<div class="fondobox1">
<h3><span>Personalizza:</span></h3>
<!-- Personalizzazione font visibile solo nelle versioni non grafiche-->
<div class="carattereacc">carattere:
<ul>
<li><a href="javascript: setFontSizeacc(1)" title="imposta carattere piccolo">piccolo[/url]</li>
<li><a href="javascript: setFontSizeacc(2)" title="imposta carattere medio">medio[/url]</li>
<li><a href="javascript: setFontSizeacc(3)" title="imposta carattere grande">grande[/url]</li>
</ul>
</div>
<!-- Fine personalizzazione font -->
<ul>
<li id="carattere">carattere
<ul>
<li><a href="javascript: setFontSize(1); setCSS('/css/grafica')" title="Imposta carattere piccolo"><img src="imcom/char_piccolo.gif" alt="imposta carattere piccolo" width="14" height="10" />[/url]</li>
<li><a href="javascript: setFontSize(2); setCSS('/css/grafica')" title="Imposta carattere medio"><img src="imcom/char_medio.gif" alt="imposta carattere medio" width="14" height="10" />[/url]</li>
<li><a href="javascript: setFontSie(3); setCSS('/css/grafica')" title="Imposta carattere grande"><img src="imcom/char_grande.gif" alt="imposta carattere grande" width="14" height="10" />[/url]</li>
</ul>
</li>
<li><a href="redaz/access.htm" accesskey="6">guida all'uso[/url]</li>
</ul>
</div>
</div>
<!-- FINE AREA PERSONALIZZA -->
Infine si potrebbe aggiungere ll menu veloce di cui ho gia accennato ( il sommario a inizio pagina) "invisibile" nella visualizzazione grafica, fatto così:
<h1 class="hidden">Benvenuti nel sito di ...</h1>
<div id="xyxyxyxy">
<img src="images/tstxxx.jpg" alt="[Logotipo e Scudetto del Comune di ...]" />
</div>
<!-- menu accessibile -->
<div id="menuaccess">
<a id="menuacc" name="menuacc" href="#menuacc" accesskey="0" tabindex="1">[/url]
<h2>Menu di navigazione rapida</h2>
<div></div>
<ul>
<li><a href="#menugenerale" accesskey="3" tabindex="5">Vai al menu di navigazione generale. [tasti: alt + 3][/url]</li>
<li><a href="#areacontenuti" accesskey="4" tabindex="1">Vai all'area dei contenuti. [tasti: alt + 4][/url]</li>
<li><a href="#areaspalla" accesskey="5" tabindex="1">Vai all'area dei contenuti secondari. [tasti: alt + 5][/url]</li>
<li><a href="#formricerca" accesskey="6" tabindex="2">Vai al modulo di ricerca. [tasti: alt + 6][/url]</li>
<li><a href="#noteaccess" accesskey="8" tabindex="1">Tasti di accesso rapido (accesskey) e note di accessibilita'. [tasti: alt + 8][/url]</li>
</ul>
<p>Avvertenza:
in alcuni browser la combinazione di tasti [alt + numero] va seguìta dalla pressione del tasto "Invio".
Per accedere a questo menu premere [alt + 0].</p>
</div>
<!-- fine menu accessibile -->
In questo caso di esempio viene linkato il livello che contiene il motore di ricerca (o il modulo del motore in Joomla) : <li><a href="#formricerca" accesskey="6" tabindex="2">Vai al modulo di ricerca. [tasti: alt + 6][/url]</li>
Infine manca ancora una "guida" o meglio un indice che spiega l'utilizzo delle access key di qusto tipo, anc'esso visualizabile solo nelle versioni non grafiche:
Tasti di accesso rapido (accesskey)
* [alt + 0] Menu di navigazione rapida
* [alt + 1] Homepage
* [alt + 2] Menu del canale corrente
* [alt + 3] Menu di navigazione generale
* [alt + 4] Area dei contenuti
* [alt + 5] Area dei contenuti secondari
* [alt + 6] Modulo di ricerca
* [alt + 7] Accesso all'area riservata
* [alt + 8] Tasti di accesso rapido (accesskey) e note di accessibilita'
Note di accessibilita'
Questo sito e' realizzato dal team di Joomla.it e joomlaitalia.it secondo gli standard del W3C (raccomandazioni XHTML 1.0 Strict e CSS 2) per garantire la massima accessibilita' e fruibilita' delle informazioni a tutte le tipologie di utenti e senza distinzioni di piattaforma e browser ecc, ecc, ecc
( piu o meno...)
alla fine si potrebbe inserire, insieme al cambio del font, l'opportunità di cambiare visualizzazione inserendone una ad altro contrasto cromatico e caratteri medi piu grandi per ipovedenti, ma non c'è fretta, mica si puo fare tutto subito...
