1174 sujets

Accessibilité du Web

Bonsoir,
J'aimerai savoir comment faire pour intégrer dans la page HTML 2 boutons pour augmenter et diminuer la taille des textes.
De préférence sans recharger complètement la page...

Merci !
Fu'
La solution est simple, il suffit d'avoir deux feuilles de styles, un petit script javascript, et trois ligne de code en html.

Le script javascript :



function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (navigator.appName == "Microsoft Internet Explorer") {
window.resizeBy(0,-10);
window.resizeBy(0,+10);
}
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);



Ce script tu l'enregistre dans un fichier que tu nomme changement_css.js

Le script étant fait, il te faut ton fichier css, et le deuxieme fichier css avec une taille de texte different.

Il faut maintenant les integrer dans tes pages html.



<!--La feuille utilisé par défaut-->

<link rel="stylesheet" type="text/css" href="normal.css" title="normal">

<!--Une feuille alternative-->

<link rel="alternate stylesheet" type="text/css" href="grand.css" title="grand">



Ce code, tu le place à la place de ta ligne qui appelle ta css normale.

Puis apres tu rajoute le lien qui appelle le script Javascript :



<script language="JavaScript" src="changement_css.js" type="text/javascript"></script>



Tu le places juste apres tes liens de css.

Il manque plus qu'a créer les bouton qui te permettrons d'effectuer le changment de taille de police.


<ul>

<li><a href="#" onclick="setActiveStyleSheet('normal'); return false;">Normal</a></li>

<li><a href="#" onclick="setActiveStyleSheet('grand'); return false;">Grand</a></li>

</ul>


Voila, tu sais tout, bonne chance Smiley cligne [/i][/i][/i][/i]
Modifié par Super_baloo8 (16 Feb 2006 - 23:44)
Bonjour,
Ce genre de bouton fait redondant avec la fonctionnalité classique du navigateur accessible dans le menu Affichage.

Cela dit, si tu as ce type de code, tu n'as pas forcément besoin de deux styles CSS :

body {
font-size:80%;
}


Car javascript permet de modifier directement la valeur grâce à l'objet document.styleSheets
Je suis septique à l'utilité de se bouton. Comment une personne qui ne voit pas ou moyennement bien pourra localiser se bouton ? Je suggère simplement l'utilisation de police relative. Ce genre de bouton ne fait pas automatiquement augmenter l'accessibilité du site. Smiley ohwell
Il est inutile de doubler à l'identique les fonctions natives des navigateurs. En revanche je trouve personnellement que les taux d'agrandissement sont souvent trop rapides, et donc plutôt sympa d'ajouter des agrandissements de polices intermédiaires moins violents et surtout qui restent compatibles avec un ratio de signes-par-ligne raisonnable. En résumé offrir de switcher entre 0.9 et 1.2em est inutile, mais offrir d'agrandir de 10% en 10% améliore le confort et le plaisir Smiley biggrin
dans tout les cas il faut doublé le script avec un equivalent coté serveur pour rester accessible
Merci pour vos réponses Smiley smile , j'ai finalement utiliser cette méthode :


<script language="JavaScript" type="text/javascript">			
	var t;			
	t = 1;

	function changerTaille(modif) {
		t = t + modif;
		document.getElementsByTagName("body")[0].style.fontSize = t + "em";		
	} 	

</script>


Avec dans le corps de la page :

<a href="#"><img src="images/aPetit.gif" onClick="changerTaille(-0.1); return false;" alt="Réduire la taille du texte" /></a>
<a href="#"><img src="images/aGrand.gif" onClick="changerTaille(0.1); return false;" alt="Aggrandir la taille du texte" /></a>


Et enfin, dans la feuille de style :
body {
  font-size:1em;
}


J'aurais du doubler le script côté serveur, mais manque de temps Smiley confused

C'est vrai que ça double les fonctionnalités du navigateur, mais avec des années d'utilisation d'IE et des sites dont la taille étaient spécifiées en pixel, cette fonctionnalité ne marchait pas souvent : j'ai vu beaucoup d'utilisateurs très agréablement surpris d'apprendre qu'on pouvait augmenter la taille des caractères depuis Firefox...
D'où l'intérêt, peut être, de proposer ces boutons dans le site.

L'augmentation en pourcentage plutôt qu'en em est une très bonne idée ! Smiley biggrin
a écrit :

j'ai vu beaucoup d'utilisateurs très agréablement surpris d'apprendre qu'on pouvait augmenter la taille des caractères depuis Firefox...


On peut agrandir les caractères depuis trèèès longtemps (NS3 le faisait en 1996). Le monde n'a pas commencé avec IE Smiley cligne
Cela permet quand même à IE de pouvoir disposer de taux d'agrandissement supérieur à ceux par défaut.

Après l'application de la taille de la police par l'intermédiaire du switcher 2 agrandissement sont encore possible puisque la taille de base à été augmentée.
A propos d'agrandissement progressif, c'est prévu sous opera et on peut l'obtenir avec Firefox en utilisant Ctrl + molette de la souris (cran par cran).

C'était à titre informatif.
Autre fonction de ces boutons :
Dansle cas de mon site (et pas que du mien...) l'agrandissement par les fonctions natives du navigateur a des effets catastrophiques et pas évidents à corriger...

Alors qu'en utilisant le bouton (feuille de style alternative), on obtient une page aussi agrandie que possible, tout en gardant la mise en forme du site. (et d'ailleurs les fonctions natives y ont un effet moins catastrophiques)

Certes c'est une rustine, mais mieux vaut ça que rien AMHA...
Modifié par Freedom_09 (12 Apr 2006 - 11:02)
Bonjour,

Je me demandais juste ... comment faites vous lorsque vous changez de page pour vous rappeler de la valeur en "em" du body ?
Salut,

tu veux dire avec un dispositif d'agrandissement dans l'interface ?

Il faut créer un cookie je pense.
Modifié par clb56 (16 Jan 2007 - 19:45)
Salut Clb Smiley cligne

Ouai je parlais avec la solution qu'a abordé Fugita.

J'ai testé sa methode elle est pas trop mal... et je suis comme toi a par en rajoutant un cookie je vois pas comment sans rafraichir la page on peut garder les paramettre avec cette astuce.

Par contre si en plus d'un probleme de JS pas forcément activé/supporté sur la machine distante on rajoute un probleme de gestion de cookie pas forcément activé (je connais perso bcp de personne qui surf avec 0 cookie) sur la machine distante ... j'ai comme l'impression qu'à l'arrivé en voulant gagner en accessibilité on fini par en perdre Smiley langue

Donc pour moi la solution utliser 2 voir 3, 4, 5 ou + CSS est la meilleur. Un par configuration possible quoi Smiley lol

Edit : puisqu'en changeant de CSS (et donc rafraichir la page) rien ne t'empeche d'enregistrer ca dans une session PHP supporté par 100% des config Smiley cligne
Modifié par haugure (17 Jan 2007 - 13:16)
Bonjour,
comment faut-il changer le script pour avoir la réduction ou augmentation de la taille du texte en % et non en "em" ? Merci !!!
Modifié par Sonia10 (12 Feb 2007 - 16:00)
Sonia10 a écrit :
comment faut-il changer le script pour avoir la réduction ou augmentation de la taille du texte en % et non en "em" ? Merci !!!


Bonjour aussi...

<script language="JavaScript" type="text/javascript">			
	var t;			
	t = 1;

	function changerTaille(modif) {
		t = t + modif;
		document.getElementsByTagName("body")[0].style.fontSize = t + "[b]em[/b]";		
	} 	
</script>

Peut être là... ?
Modifié par Mikachu (12 Feb 2007 - 15:47)
merci pour votre réponse ! (je suis polie Smiley smile )

Oui il me semble que cest bien là aussi mais lorsque je mets en % ca ne marche pas à cause de mon font-size je pense car moi je le met en "x-smal"... Smiley ohwell
Modifié par Sonia10 (12 Feb 2007 - 16:02)
Bonsoir,
Je suis nouveau et j'essai vos tutos, votre forum, le livre de microapp "css le guide complet" et j'y arrive petit à petit.
Seulement voilà, cette histoire d'images qui une fois cliquée permettrait d'obtenir un police plus grande (et vice et versa) me plait.
Le problème c'est que je n'y arrive pas .

Connaîtriez-vous un "pas à pas" pour "pas doués" ?? Mais vraiment un "pas à pas" ?