Accessibarre - améliorer le confort des personnes non-voyantes, handicapées visuelles ou agées

Soyez le premier à donner votre avis sur cette source.

Vue 5 051 fois - Téléchargée 607 fois

Description

L'AccessiBarre est un script XHTML / CSS / JavaScript permettant d'améliorer le confort de lecture pour les personnes aveugles, malvoyantes ou agées. Vous pouvez participer a son développement en vous rendant à l'adresse http://www.accessibarre.com et envoyer vos versions de l'AccessiBarre à l'adresse infos@accessibarre.com.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Accueil - AccessiBarre Version 1.0</title>
		<link type="text/css" rel="stylesheet" href="styles/styles.css" id="styles" />
		<link type="text/css" rel="stylesheet" href="styles/accessibarre.css" />
		<script type="text/javascript" src="js/mootools.js"></script>
		<script type="text/javascript" src="js/accessibarre.js"></script>
	</head>
	<body>
	<div id="AccessiBarre">
	<div id="Barre">
		<div class="BarreContenu">
			<div class="ContenuParties">
				<h1 class="TitreAccessiBarre">Vous êtes non-voyant ?</h1>
				<br />
				<a href="#" id="VersionTexte">Activer la version pour non-voyants</a>
				<a href="#" id="VersionGraphique">Désactiver la version pour non-voyants</a>
				<br />
				<a class="LiensNonVoyants" href="#ContenuWeb">Aller directement au contenu de la page</a>
				<br />
				<a class="LiensNonVoyants" href="#menu">Aller directement au menu général de la page</a>
			</div>
			<div class="ContenuParties">	
				<h1 class="TitreAccessiBarre">Vous êtes malvoyant ?</h1>
				<p class="TexteBarre">Taille des caractères</p>
				<div id="SliderPolice" class="Slider">
					<div class="Mini">-</div>
					<div class="Bouton"></div>
					<div class="Maxi">+</div>
				</div>
				<p class="TexteBarre">Changer le contraste</p>
				<div class="Carre"><a class="LienCarre" id="NoirBlanc" href="#"><img src="images-accessibarre/NoirBlanc.png" alt="Contraste : Fond Noir - Police Blanche" title="Contraste : Fond Noir - Police Blanche" /></a></div>
				<div class="Carre"><a class="LienCarre" id="VertBlanc" href="#"><img src="images-accessibarre/VertBlanc.png" alt="Contraste : Fond Vert - Police Blanche" title="Contraste : Fond Vert - Police Blanche" /></a></div>
				<div class="Carre"><a class="LienCarre" id="BrunBlanc" href="#"><img src="images-accessibarre/BrunBlanc.png" alt="Contraste : Fond Brun - Police Blanche" title="Contraste : Fond Brun - Police Blanche" /></a></div>
				<div class="Carre"><a class="LienCarre" id="JauneBrun" href="#"><img src="images-accessibarre/JauneBrun.png" alt="Contraste : Fond Jaune - Police Brun" title="Contraste : Fond Jaune - Police Brune" /></a></div>
				<div class="Carre"><a class="LienCarre" id="JauneNoir" href="#"><img src="images-accessibarre/JauneNoir.png" alt="Contraste : Fond Jaune - Police Noire" title="Contraste : Fond Jaune - Police Noire" /></a></div>
				<div class="Carre"><a class="LienCarre" id="BlancNoir" href="#"><img src="images-accessibarre/BlancNoir.png" alt="Contraste : Fond Blanc - Police Noire" title="Contraste : Fond Blanc - Police Noire" /></a></div>
				<div class="Carre"><a class="LienCarre" id="RoseBlanc" href="#"><img src="images-accessibarre/RoseBlanc.png" alt="Contraste : Fond Rose - Police Blanche"  title="Contraste : Fond Rose - Police Blanche"/></a></div>
				<div class="Carre"><a class="LienCarre" id="BleuBeige" href="#"><img src="images-accessibarre/BleuBeige.png" alt="Contraste : Fond Bleu - Police Beige" title="Contraste : Fond Bleu - Police Beige" /></a></div>
				<div class="Carre"><a class="LienCarre" id="JauneBleu" href="#"><img src="images-accessibarre/JauneBleu.png" alt="Contraste : Fond Jaune - Police Bleue" title="Contraste : Fond Jaune - Police Bleue" /></a></div>
				<div class="Carre"><a class="LienCarre" id="JauneRouge" href="#"><img src="images-accessibarre/JauneRouge.png" alt="Contraste : Fond Jaune - Police Rouge" title="Contraste : Fond Jaune - Police Rouge" /></a></div>
			</div>
			<div class="ContenuParties">
				<br /><a href="#" id="initial">Réinitialiser tout</a>
			</div>
		</div>
		<div class="OngletFermer"><a href="#" id="OngletFermer">Fermer</a></div>
	</div>
    <div id="ConteneurOnglet">
		<div id="Onglet">
			<ul class="OngletContenu">
		    	<li class="Gauche"></li>
				<li class="debug"><a href="http://www.accessibarre.com"><img src="images-accessibarre/handicap.png" alt="Plus d'infos sur l'AccessiBarre" title="Plus d'infos sur l'AccessiBarre" /></a></li>
				<li><a id="OngletOuvrir" href="#">Ouvrir AccessiBarre</a></li>
				<li class="Droite"></li>
			</ul>
		</div>
	</div>
	</div>
    <div class="ClearFix"></div>	
		
	<div id="ContenuWeb">	
		<div id="page">
		<div id="header"><h1>Ceci est le Header</h1></div>
		<div id="menu">
			<ul>
				<li><a href="index.html">Accueil</a></li>
				<li><a href="page2.html">Page 2</a></li>
			</ul>
		</div>
		<div id="contenu">
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem diam, ultrices vitae varius id, pulvinar gravida urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mattis ligula in diam sodales sit amet malesuada turpis sagittis. Mauris nisi est, interdum sed dictum nec, bibendum vitae erat. Nullam pretium nunc mattis lacus porttitor ut varius dui bibendum. Pellentesque tempus tincidunt porttitor. Proin eu mauris sit amet lacus consequat vulputate. Curabitur non risus lacus, sit amet hendrerit urna. Ut porta neque vitae elit dignissim sed bibendum neque feugiat. Phasellus risus risus, bibendum nec volutpat non, porttitor eu ligula. Cras eu adipiscing erat. Nam rutrum vulputate tortor, eu consectetur nunc ultricies imperdiet. Duis tincidunt, velit vel semper vulputate, dolor magna tempus est, at sodales risus tellus nec erat. Donec lacinia turpis eget lectus posuere fermentum sed eget elit.
<br /><br />
Mauris blandit mauris nec tortor egestas eget auctor nulla lacinia. Donec ullamcorper est ac risus molestie id ornare quam laoreet. Fusce odio odio, suscipit id aliquet eget, fermentum et odio. Nam dapibus sem ac quam mattis commodo porta justo vulputate. Morbi ac mi et lectus commodo feugiat. Praesent tellus nisi, facilisis at porttitor quis, facilisis vel metus. Nulla nec arcu ac mi ultrices semper. Nam in tempus nisi. Nullam ut est massa. Fusce dapibus semper arcu. Donec nulla arcu, ultrices ac porttitor ut, porttitor vitae lorem.
<br /><br />
Aenean lobortis tempor nisl, quis vehicula lectus imperdiet eu. Praesent vitae porta sapien. Quisque eget lectus lectus, vitae convallis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque faucibus lectus auctor diam imperdiet vitae facilisis ante tincidunt. Duis sapien neque, consequat sit amet malesuada ac, cursus ac elit. Phasellus dignissim orci vel mauris venenatis in eleifend neque venenatis. Praesent id risus non sem blandit dapibus nec eleifend augue. Nam malesuada ipsum ac mauris consectetur venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br /><br />
Aenean at turpis sit amet velit hendrerit interdum a a mi. Praesent placerat eleifend suscipit. Pellentesque adipiscing viverra justo, id pulvinar ligula scelerisque ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis ligula massa, eget mattis nisi. Morbi at pretium libero. Fusce sem est, facilisis in tristique sed, eleifend eget sapien. Morbi ut quam nisi. Integer congue adipiscing tellus ac tincidunt. Nullam sit amet imperdiet odio. Vestibulum commodo blandit blandit.
<br /><br />
Morbi bibendum, diam non tempor fermentum, metus elit suscipit nisl, et rhoncus sapien leo non mi. Maecenas nec diam et arcu interdum vestibulum nec non neque. Aliquam dapibus libero arcu. Ut placerat, nibh a sollicitudin elementum, massa urna lacinia est, sed laoreet sapien nisi eget sem. Etiam ac nunc tellus. Fusce euismod hendrerit nulla, in pretium eros semper vitae. Suspendisse ornare ultrices risus quis molestie. Ut dapibus elit id urna sollicitudin viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sem nisi, tincidunt vitae sollicitudin at, luctus vitae elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
				</p>
			</div>
		<div class="clear"></div>
		<div id="footer"><p>Ceci est le Footer</p></div>
		</div>
	</div>
	</body>
</html>

Conclusion :


Merci de me signaler toutes incompatibilités, bugs, améliorations ou toutes remarques constructives sur ce projet.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mercredi 9 mars 2005
Statut
Membre
Dernière intervention
23 septembre 2009

Merci pour cette info JDMCREATOR. Cependant, je ne suis pas certain que d'intégrer une synthèse vocale à l'AccessiBarre soit judicieux. 95% des aveugles qui sont informatisés utilisent une synthèse vocale adaptée à Windows (Jaws par exemple). Le fait d'inclure une synthèse vocale supplémentaire risque de créer des conflits et de superposer des voix.

Si tu as une idée pour éviter ces problèmes, je suis preneur...
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Bonjour,

Pour lire du texte d'une page web, regarde ici http://www.javascriptfr.com/codes/SYNTHESE-VOCALE_42235.aspx

Ça pourrait être intéressant je crois.
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017

J'ajoute que sous XP et (opera) mon navigateur préféré pour plusieurs raisons et en plus il a la possibilité de sectionner toute la page ou une partie, en suite sur le bouton droite on choisie (Parler) ou (sélectionner + v) sur la sélection, et on a qu’à écouter, l'option est seulement en anglais le français se lit mais mal prononcé, bien sure après avoir téléchargé le composant...

bonne chance.
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017

Salut Pfuch,

1- Il y aura toujours quelques un (...) qui ne connaissent pas ces astuces et non "la plupart des personnes ne connaissent pas ces astuces"

2- La meilleur solution pour rendre service aux malvoyants ou non-voyants est de placer sur les pages un lien vers un fichier (audiovisuel) qui peut être lit tout en gardant le contenue de la page visible et accessible.

3- J'ai posté ici:
http://www.javascriptfr.com/code.aspx?ID=35897
une source (La page parlante) qui peut donner une idée sur cette astuce qui peut être perfectionnée et adaptée sous tous les navigateurs et tout contenu...

Merci et bon courage.
Messages postés
2
Date d'inscription
mercredi 9 mars 2005
Statut
Membre
Dernière intervention
23 septembre 2009

Bonjour,

C'est vrai qu'il existe des astuces sur les navigateurs pour faire cela. Cependant, la plupart des personnes ne connaissent pas ces astuces et peu de webmasters pour l'instant se donnent la peine de concevoir une page "accessibilité" où se trouve rassemblées ces informations pour faciliter la navigation sur leur site internet.
L'AccessiBarre n'a pas la prétention d'être la solution universelle pour la navigation web des malvoyants ou non-voyants, c'est juste un module supplémentaire permettant d'améliorer le confort de navigation des personnes souffrant d'une déficience visuelle.

Je travaille en CDI à l'AAAL (Association des Aveugles et Handicapés Visuels d'Alsace et de Lorraine) et l'AccessiBarre à été jugée utile par 95% des non-voyants ou malvoyants présents dans mon entreprise.

J'apprécie néanmoins ce retour, et je travaille constamment à l'amélioration de l'AccessiBarre.
Si vous avez des suggestions, scripts, idées, critiques, vous pouvez m'écrire à infos@accessibarre.com.
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.