1175 sujets

Accessibilité du Web

Bonjour à tous!

Je dois avouer que je n'y connait pas grand-chose en accesibilité web, mais être ignorant ne veux pas ne pas être impliqué Smiley biggrin

Je me demande si un petit script javascript pourrais augmenter l'accesibilité du site, il serais minible et très incomplet mais serais facile de mise en oeuvre (et ainsi peut-etre que certains dev web serais + tenter de l'utilisé) il essayerais de modifier l'aspect visuel de la page comme la police et sa taille, l'espace des mots, le background, etc....

Par-contre il faudrais avoir une liste de déficites existants associé avec des éléments de réponses à leur handicap, ce que je n'ai pas.

Ca intéresse des gens ? Vous pensez que je fait fausse route ?
Modérateur
Bonjour,

Bien que certains sites le font ou le faisaient, je trouve que c'est une fausse bonne idée que d'offrir ce type de fonctionnalités sur le site Web directement. C'est plutôt le rôle de navigateur / lecteur d'écran / outil informatique spécialisé de permettre de changer la taille du texte, la police, l'espacement entre les mots, l'affichage ou non des images de fond, etc.

L'avantage est que l'utilisateur peut adapter tous les sites Web qu'il visite de la même manière, alors qu'un script ne fonctionnerait que sur les sites l'ayant mis en place.
a écrit :

rodolpheb
# 07 Mar 2013 - 19:13:49
Bonjour,

Et le but de votre message....?

Obtenir des réponses comme celle de "Tony Monast" qui me permettent de juger le pour et le contre dans ma tentative de rendre mes prochains site plus accesibles Smiley smile

@Tony Monast Je comprend... et je pense que vous avez raison, je me concentrais donc sur l'accesibilité du code rendu, et non de son affichage, mais quand j'aurais le temps, j'essayerais quand meme de le coder ce petit truc js Smiley smile
Merci de votre réponse
Ah.... Et bien les deux en réalité.
Car n'étant pas atteint d'un handicap (aussi faible soit-t-il) il m'est difficile d'imaginer les problèmes d'accesibilité et les solutions à apportés.
Mes recherche n'ayant débouché sur rien de concret, je me tournais donc vers vous.
Bien que je reste d'avis que Mr.Monast as raison, je pense aussi que les navigateurs actuelles n'ont pas de réelles options d'accesibilité (corrigez-moi si je me trompe Smiley murf ) 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.

Trève de blabla, je m'y met et je posterais ce qu'il en sort Smiley biggrin
Voilà c'est fini Smiley smile
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 Smiley ohwell ) 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. Smiley cligne [/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par ilar (08 Mar 2013 - 12:58)