Taille des caractères
Changer le contraste
Par Lucas Pfister
L'AccessiBarre est destinée aux Webmasters souhaitant rendre leurs sites web accessible à toute personne souffrant d'un trouble de la vision (aveugles, malvoyants, personnes agées, etc...).
L'AccessiBarre est simple et rapide à mettre en place. Vous pouvez vous reporter à la rubrique Mise en place pour les opérations à suivre.
Aujourd'hui, environ 1 200 000 personnes souffrent d'une déficience visuelle partielle ou complète en France. Cela représente à peu près 2% de la population Française. L'AccessiBarre essaye d'améliorer la lisibilité des sites internet en proposant une interface permettant de modifier certains paramètre graphique du site. Ainsi, pour les personnes non-voyantes, l'AccessiBarre propose une alternative textuelle du site internet. Pour les personnes malvoyantes, il est possible d'agrandir la taille des caractères mais également de modifier les contrastes de couleurs de la page. Toutes les modifications concernent uniquement le design du site et ne modifient en rien le contenu.
L'AccessiBarre est basé sur le framework Mootools 1.2 et plus précisement sur les excellents scripts Login Form Mootools 1.2 de web-kreation.tv et Slider de mootools.net.
L'AccessiBarre est compatible pour les navigateurs suivants :
La liste des navigateurs compatibles ci-dessus représente environ 97% des navigateurs utilisés par les internautes.
Inclure le code HTML suivant juste après la balise <body> de vos pages Web
<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 Brune" 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>
Inclure le code HTML suivant avant la balise </head> de vos pages Web
<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> <!--[if lte IE 6]> <script type="text/javascript" src="js/supersleight.js"></script> <![endif]-->
Donner un id a votre feuille de style principale
<link type="text/css" rel="stylesheet" href="styles/styles.css" id="styles" />
Encadrer votre page web avec la balise <div> ContenuWeb
<div id="ContenuWeb"> ... Le contenu de votre page ... </div>
Vous pouvez télécharger l'AccessiBarre avec une page de démonstration en cliquant ici
Le projet n'en est qu'a ses débuts, voici les principales améliorations à apporter à l'AccessiBarre pour les prochaines versions.
L'AccessiBarre est libre d'être modifiée comme bon vous semble sous réserve de laisser le lien vers le site officiel :
http://www.accessibarre.com.
Vous pouvez apporter votre savoir au projet en envoyant vos versions et vos améliorations à l'adresse suivante : infos@accessibarre.com
