1178 sujets

Accessibilité du Web

[Résolu] IE 6, <abbr> et <acronym>

Bonjour,
Je travaille sur un site contenant beaucoup d'abréviations, ce site vise une accessibilité bronze. Le texte ne m'appartient pas, quand c'est possible j'ajoute la signification du sigle entre parenthèse, mais ce n'est pas toujours possible.

D'après les discussions lues (en grande partie sur ce forum Smiley cligne ),
mon choix est fait, c'est <abbr> que je souhaite utiliser, avec évidemment l'éccueil de la compréhension de cette balise par ie6.

En cherchant un peu, je suis tombé (ouille) sur cette solution:
http://dean.edwards.name/my/abbr-cadabra.html

Seulement, elle ne semble pas validée par le w3c, les erreurs retournées par le validateur ne me parlent pas Smiley sweatdrop

Auriez-vous un avis / une suggestion sur cette "astuce" abbr-cadabra?
Modifié par speedlab (08 Oct 2007 - 15:27)
Modérateur
Salut,

En repartant de cet exemple et à titre de suggestion, je pense qu'on pourrait faire ainsi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>&lt;abbr-cadabra/&gt;</title>

		<style type="text/css">

html\:abbr, abbr
{
	background: yellow;
	border: none;
	cursor: help;
}

		</style>

	</head>

	<body>
		<p>This page demonstrates legitimate use of the <code>&lt;abbr/&gt;</code> (abbreviation) tag for all platforms.</p>
		<p>Microsoft Internet Explorer does not support the <code>&lt;abbr/&gt;</code> tag.</p>
		<p>Web developers take several approaches to getting round this problem:</p>
		<ul>
			<li>incorrectly use the <code>&lt;acronym/&gt;</code> tag</li>
			<li>wrap the contents in another tag (i.e. <code>&lt;span/&gt;</code>) and duplicate the style settings</li>
			<li>execute javascript code to fix the problem</li>
		</ul>
		<p>This page contains no JavaScript and no unnecessary tags. This is not a hack!</p>
		<p>View the source of this page for an explanation of how it works.</p>
		<p>example: This is an
			<!--[if IE]><html:abbr title="abbreviation">abbr</html:abbr><![ endif]-->
			<!--[if !IE]><!--><abbr title="abbreviation">abbr</abbr><!--><![ endif]-->.</p>
		<p><strong>abbr-cadabra!</strong></p>
		<p style="font-style:italic; font-size:smaller">Tested on Microsoft Internet Explorer: 5.0/5.5/6.0, Mozilla 1.6/Firebird 0.7, Opera 7.23.</p>
		<p style="font-style:italic; font-size:smaller">January 22<sup>nd</sup> 2004</p>
	</body>
</html>
(sans les espaces avant les endif)

Ca permet de rester en xhtml1.0 tout en étant valide.
En réalité, ça ne l'est pas sous IE mais comme seul ce dernier a le code invalide et qu'il l'interprète correctement malgré tout, on n'a pas de problème de rendu. Smiley smile
Merci, je n'avais (bêtement) pas pensé à l'utilisation des commentaires conditionnels. Smiley sweatdrop

Tu m'ôtes une poutre du pied!
Non, overkill au sens de «solution excessive».
Le problème de cette solution, ça va être son automatisation (outils) et son accompagnement (rédacteurs).

Sinon, question bidouillages sympathiques, on peut sans doute simplifier. Par exemple:
[b]HTML:[/b]
<span class="test" title="test"><abbr title="abréviation">abrév.</abbr></span>

[b]CSS:[/b]
span.test, abbr {
	color: #f82;
	cursor: help;
	border: none;
}

Au survol, IE7 et Firefox affichent "abréviation", et IE6 affiche "test". Il suffit d'harmoniser les deux title pour obtenir le bon résultat.
Mais peut-être la solution de Dean Edwards est-elle plus compatible avec certains agents utilisateur (notamment les lecteurs d'écran)?
On peut aussi envisager de mettre les deux balises du span entre commentaires conditionnels pour IE6 et inférieurs (vu que IE7 gère abbr).

En passant, ma page de test:
<!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=UTF-8" />
	<title>Test</title>
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css">
	#styles abbr, #styles acronym, #styles span.test {
		color: #d62;
		cursor: help;
	}
	</style>
</head>
<body>
<h1>Sans styles</h1>
<p><abbr title="abréviation">abrév.</abbr></span> (abbr seul)<br />
<span class="test" title="test"><abbr title="abréviation">abrév.</abbr></span> (abbr entouré d'un span)<br />
<acronym title="abréviation">abrév.</acronym> (acronym seul)<br />
<span class="test" title="test"><acronym title="abréviation">abrév.</acronym></span> (acronym entouré d'un span)</p>

<h1>Avec styles</h1>
<p id="styles"><abbr title="abréviation">abrév.</abbr></span> (abbr seul)<br />
<span class="test" title="test"><abbr title="abréviation">abrév.</abbr></span> (abbr entouré d'un span)<br />
<acronym title="abréviation">abrév.</acronym> (acronym seul)<br />
<span class="test" title="test"><acronym title="abréviation">abrév.</acronym></span> (acronym entouré d'un span)</p>
</body>
</html>
Florent,

Merci pour tes explications/exemples. Je trouvais la solution des commentaires conditionnels effectivement excessive, mais je ne vais pas gérer le contenu dudit site. Je dois faire avaliser le moindre choix pris sur ce site, et vu les discussions ce matin au bureau, l'utilisation de <abbr> à l'air de passer à la trappe.

a écrit :
overkill ?! Et bien passons par un glossaire...

J'ai bien soumis la création d'un glossaire, mais la réponse fût: "oui, mais ça nous ajoute du dév' supplémentaire..." Smiley rolleyes

Bha en tous cas, pour ma pomme, ça m'a fait lire des pages et des pages sur le choix entre l'utilisation de <abbr> ou de <acronym> Smiley cligne
Sujet clos
Aller à