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

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.