Voilà c'est fini
Donc ça affiche un button qui affiche ensuite un petit formulaire pour remplir les valeurs désirées des balises css et on valide.
Les modifications prennent ~1s (attention donc aux grosses pages
) et une petite régle suit votre souris pour mieux vous repérer dans le texte.
La police utilisée est une police libre, créer pour faciliter la lecture aux dylexiques.
Le résultat :
lien
http://img15.hostingpics.net/pics/494585snapshot5.png
Le code :
<div id="accesibilite">
<!-- Thank's
http://opendyslexic.org/
http://www.devkb.org/javascript/33-Fonction-trim-en-JavaScript-pour-enlever-les-espaces-de-debut-et-de-fin-de-chaine
http://www.supportduweb.com/scripts_tutoriaux-code-source-47-image-qui-suit-la-souris-en-javascript.html
-->
<style>
@font-face {
font-family: 'dyslexic';
src: url('police.otf');
}
</style>
<button onclick="document.getElementById('accesibilite_form').style.display='block';">augmenter l'accesibilite</button>
<div id="accesibilite_form" style="display:none;">
fontSize <input id="accesibilite_a"/><br />
backgroundColor <input id="accesibilite_b"/><br />
color <input id="accesibilite_c"/><br />
letterSpacing <input id="accesibilite_d"/><br />
lineHeight <input id="accesibilite_e"/><br />
wordSpacing <input id="accesibilite_f"/><br />
<button onclick="start();">start</button>
</div>
<div id="accesibilite_regle" style="display:none;position:absolute;z-index:5;width:100%;height:2px;" ></div>
<script>
var a,b,c,d,e,f;
function start()
{
a=document.getElementById("accesibilite_a").value;
b=document.getElementById("accesibilite_b").value;
c=document.getElementById("accesibilite_c").value;
d=document.getElementById("accesibilite_d").value;
e=document.getElementById("accesibilite_e").value;
f=document.getElementById("accesibilite_f").value;
document.getElementById("accesibilite_regle").style.display="block";
explore(document.getElementById('body'));
}
function trim(sString)
{
while (sString.substring(0,1) == ' ' || sString.substring(0,1) == '\t' || sString.substring(0,1) == '\r' || sString.substring(0,1) == '\n')
{
sString = sString.substring(1, sString.length);
}
while (sString.substring(sString.length-1, sString.length) == ' ' || sString.substring(sString.length-1, sString.length) == '\t' || sString.substring(sString.length-1, sString.length) == '\r' || sString.substring(sString.length-1, sString.length) == '\n')
{
sString = sString.substring(0,sString.length-1);
}
return sString;
}
function explore(object)
{
var children = object.childNodes;
if(children.length > 0)
{
for(var i =0, z = children.length; i<z;++i)
{
if(children[i].nodeType==3)
{
if(trim(children[i].textContent)!="")
{
children[i].textContent=children[i].textContent;
}
}
if(children[i].style!=undefined)
{
children[i].style.fontSize=a;//"20px";
children[i].style.backgroundColor=b;//"white";
children[i].style.color=c;//"black";
children[i].style.letterSpacing=d;//"1px";
children[i].style.lineHeight=e;//"50px";
children[i].style.wordSpacing=f;//"10px";
children[i].style.fontFamily="dyslexic";
children[i].style.backgroundImage="";
children[i].style.textIndent="justify";
children[i].style.textTransform="none";
}
explore(children[i]);
}
}
}
function suitsouris(evenement)
{
if(navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
}
else
{
var x = evenement.pageX;
var y = evenement.pageY;
}
document.getElementById("accesibilite_regle").style.top = (y+1)+'px';
document.getElementById("accesibilite_regle").style.backgroundColor="red";
}
document.onmousemove = suitsouris;
</script>
</div>
N'hésitez pas à commenter, proposer, et critiquer, même si c'est en mal, tant que ça reste respectueux.
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par ilar (08 Mar 2013 - 12:58)
) et que tout le monde (et là je cible les personnes qui ont un handicap mineur, mauvaise vue, etc....) n'as pas forcement de lecteur d'écran et autre logiciels pour leur permettent d'avoir une navigation plaisante, alors un site qui propose un petit menu sur le coté qui fait des petites modifications à la page courante, peut être très appréciée.
