5568 sujets

Sémantique web et HTML

<a href="blabal.html"> texte obligatoire ? </a>

Pages :
Bonjour à tous,

je voulais savoir s'il était obligatoire ou conseillé de mettre du texte dans un lien <a href></a> ?

J'utilise une image en background pour le visuel de chaque lien avec :


			<ul>
				<li><a id="bulle1" title="Page d'accueil du site sans utiliser Flash" href="index.html">Accueil</a></li>
				<li><a id="bulle2" title="Nos activités" href="activites.html">Nos<br />activités</a></li>
				<li><a id="bulle3" title="Les partenaires d' Algorithme Informatique" href="partenaires.html"></a></li>
				<li><a id="bulle4" title="Les coordonnées et plans d'accès" href="conctact.html">Nous<br />contacter</a></li>
			</ul>


Le texte : Accueil, Nos activités, .... s'affiche alors qu'il ne me sert à rien... Smiley rolleyes
L'attribut "title" est indispensable pour un lien sur une image, car sans elle impossible de savoir pour un lecteur d'écran ce que ca représente.

Grace à cet attribut, pour ton cas, tu n'a pas besoin de mettre du texte entre 
<a href ....></a>
Puisque ce sont des images.

Edit : une image doit avoir un attribut "alt", comment réagi un lecteur d'écran fasse à une image contenant un "alt" et un "title" dans son lien ?
Modifié par Super_baloo8 (17 Oct 2005 - 17:07)
Modérateur
Oui c'est important de le faire, voir indispensable.

Certaines personnes naviguent sans images, sans styles CSS. En texte seulement. Comment pourront-ils naviguer facilement ?

N'oublions pas non plus qu'il n'y a pas que les lecteurs écrans. Je peux très bien naviguer en désactivant les images et les styles, sans pour autant avoir un assistant pour lire le contenu. Je risque d'avoir beaucoup de difficultés à naviguer sans de contenu (texte ou image) dans les balises a.

Dans ton cas, pourquoi ne pas faire :


<a href="accueil.htm" title="Aller sur la page d'accueil"><img src="images/accueil.gif" alt="Accueil" ...  /></a>

Modifié par Merkel (17 Oct 2005 - 17:17)
ok mais alors comment faire pour ne pas les afficher si les images sont visibles ?

Car là c'est moche !!! J'ai l'image avec le texte par dessus.... Smiley ohwell

voici une partie de mon css :

#menubulle a#bulle1 {
	background-image: url(images/menubulle/bulle1.jpg);
	background-repeat:no-repeat;
	background-position: 5px 5px;
}
#menubulle a#bulle1:hover {
	background-image: url(images/menubulle/bulle1_big.jpg);
	background-repeat:no-repeat;
	background-position: 0;
}


@+ Smiley cligne
Modérateur
Il y a toujours la solution de mettre en background que l'image de fond, et que le contenu du lien soit du texte, comme :


<a href="accueil.htm">Accueil</a>


L'image de fond ne contiendrait pas le mot Accueil dedans. L'avantage est que le visiteur peut encore agrandir la taille du menu pour lui faciliter la vie, contrairement à des images contenant du texte qui reste figé.

Si le plus important pour toi est le graphisme, et non l'accessibilité/ergonomie, tu peux toujours cacher le texte des liens, pour laisser la place qu'aux backgrounds qui cette fois contiendraient le texte aussi, en image. Peut-être que l'article Mettre un titre en image et rester accessible pourra te donner des pistes.
Modifié par Merkel (17 Oct 2005 - 17:39)
Concernnat les synthèses vocales, alt et title

<a href="..." title="...></a>
title est lu

<a href="..." title="...">...</a>
Le contenu du lien est lu

<a href="..." title="..."><img src="..." alt="..." /></a>
alt est lu; title non

Voilà.
Merci à vous tous pour vos réponses ! Smiley biggrin

à la base, j' avais choisi d'intégrer le texte des boutons dans les images pour 2 raisons :
¤ pour ne pas avoir de problème avec ma police (rare).... Smiley ohwell
¤ et parce que je n'arrive pas à aligner verticalement le texte par rapport à l'image

Etant donné que le site que je prépare est plus basé sur le graphisme que l'accéssibilité, je vais peut-être garder ma méthode en enlevant le texte des liens.... Smiley murf
Mais je vais d'abord finir la lecture du lien de Merkel....

QuentinC : tu veux dire que le texte n'est pas obligatoire du moment qu'il y a title ?

@+ Smiley cligne
Modérateur
Tchupacabra a écrit :

¤ pour ne pas avoir de problème avec ma police (rare).... Smiley ohwell


Dans le sens que tu veux absolument que les visiteurs voient cette police en particulier ?

Tchupacabra a écrit :

¤ et parce que je n'arrive pas à aligner verticalement le texte par rapport à l'image


Pour ca, suffit de poser la question sur les forums, après avoir effectué une petite recherche au préalable.

Tchupacabra a écrit :

Etant donné que le site que je prépare est plus basé sur le graphisme que l'accessibilité, je vais peut-être garder ma méthode en enlevant le texte des liens.... Smiley murf
Mais je vais d'abord finir la lecture du lien de Merkel....

QuentinC : tu veux dire que le texte n'est pas obligatoire du moment qu'il y a title ?


Attention là, ce n'est vraiment pas une bonne pratique de faire ceci :


<a href="page.htm" title="Consulter le page X"></a>


J'ai évoqué les raisons. Les visiteurs naviguant sans images avec un navigateur classique ne pourront tout simplement pas naviguer dans ton site. Retirer le texte entre les balises <a></a> est fortement déconseillé, qu'on fasse un site sur le graphisme, l'accessibilité ou sur les patates de grand-mère. Smiley cligne L'accessibilité doit être prise en compte sur tout type de site. L'accessibilité à tous, c'est primordial, peu importe le contenu du site.

Le compromis que je ferais serait l'un des suivants :

Solution A :


<a href="Accueil.htm"><img src="images/accueil.gif" alt="Accueil" ... /></a>


Solution B :


<a href="Accueil.htm">Accueil</a>


et mettre qu'une image de background simple, sans texte dans l'image

Solution C :


<a href="Accueil.htm">Accueil</a>


et mettre une image de background contenant le texte dedans. Ensuite je cacherais le mot Accueil pour les navigateurs graphiques, via CSS. Attention, cette solution n'est pas accessible pour ceux naviguant sans image mais avec CSS. À éviter donc. Mais c'est bien quand même d'explorer les possibilités.
Modifié par Merkel (19 Oct 2005 - 17:04)
1/ oui parce que ma police n'est pas standart. En fait, le logo utilise cette police et je doit le réutiliser. La police est TektonBold

2/ en utilisant les marges négatives ?
Bonjour,

Utiliser des images HTML en dur doté de textes alt pertinents et fonctionnels.

ça ne pose aucun problème, contrairement aux astuces CSS.

Et c'est fait pour ça.
Modérateur
Laurent, je l'ai suggéré à deux reprises. J'espère que cette fois, ca l'intéressera. C'est ce que je ferais, personnellement, si je devais absolument utiliser des liens en image.
d'accord... Smiley langue

lorsque vous dites : Utiliser des images HTML en dur doté de textes alt pertinents et fonctionnels.
Ceci fait l'affaire ? :

		<div id="menubulle">
			<ul>
				<li><a id="bulle1" href="main.html"><img src="../images/menubulle/bulle1.jpg" alt="Page d'accueil du site sans utiliser Flash" /></a></li>
				<li><a id="bulle2" href="activites.html"><img src="../images/menubulle/bulle2.jpg" alt="Nos activités" /></a></li>
				<li><a id="bulle3" href="partenaires.html"><img src="../images/menubulle/bulle3.jpg" alt="Nos partenaires" /></a></li>
				<li><a id="bulle4" href="conctact.html"><img src="../images/menubulle/bulle4.jpg" alt="Les coordonnées et plans d'accès" /></a></li>
			</ul>
		</div>

je pense que oui ... Smiley biggol
Sauf que maintenant mon problème est de zommer sur l'image lorsqu'il y a img:hover car MSIE ne le gère pas... Smiley fache

D'après cet article : http://www.openweb.eu.org/articles/zoom_image/
¤ soit je me fiche de MSIE
¤ soit j'utilise background-image

Smiley decu dur dur les standarts...
Modérateur
Tchupacabra a écrit :

¤ soit je me fiche de MSIE
¤ soit j'utilise background-image


Et Javascript a été inventé pour les farfadets ? Smiley cligne

Les changements d'image au passage de la souris peuvent être gérés par Javascript, via un fichier Javascript externe. Ca t'intéresse ?
et bien s'il n'y a pas de solutions avec CSS, je vais surement me tourner faire JavaScript... Smiley ohwell ... c'est dommage

Moi farfadet ? Smiley smile Merci Merkel je vais voir ce que je peux faire...

@+ Smiley cligne
Modérateur
Tchupacabra a écrit :

Moi farfadet ? Smiley smile


Non pas du tout, c'était une façon de dire que Javascript était là justement pour faire de l'interaction dans les pages, et non pour les farfadets. Smiley langue
Bon désolé, mais ça commence à me gonfler ! Je tourne en rond et ça m'énerve.... Smiley fache

onMouseOver & co ne sont plus valides.... je suis retourné à ma méthode de départ Smiley eek avec 2 background en css pour le normal et un autre pour le hover... et ça, ça marche bien Smiley smile

Aussi j'ai abandonné le texte visible au dessus d'une image.... pas beau et police non respectée par rapport à la charte graphique...

Comme le texte dans une balise <a href>le texte</a> est apparemment obligatoire, je l'ai mis....
et surtout caché avec :
#menubulle a {
	text-indent: -5000px;
	line-height: 0;
}

Alors maintenant, mon souci est de respecter l'accessibilité pour les visiteurs ayant un navigateur qui n'affiche pas les images.... Smiley rolleyes

Vous pourriez m'aider SVP....

@+ et merci d'avance

Smiley jap
Modérateur
Tchupacabra a écrit :
Bon désolé, mais ça commence à me gonfler ! Je tourne en rond et ça m'énerve.... Smiley fache


Avant de tout foutre en l'air, et de t'énerver, tu aurais dut passer par ici. Smiley smile

Tchupacabra a écrit :

Aussi j'ai abandonné le texte visible au dessus d'une image.... pas beau et police non respectée par rapport à la charte graphique...


D'où la raison d'utiliser des balises <img>. En plus c'est la solution accessible pour ceux n'ayant pas d'images, grâce à l'attribut ALT.

Tchupacabra a écrit :

onMouseOver & co ne sont plus valides


C'est valide, mais en xhtml, c'est onmouseover, sans majuscules. L'idéal est aussi de mettre ces événements dans un fichier externe js. Tu peux ajouter ces événements aux éléments selon leur id, via une fonction contenu dans un fichier js externe. Je vais tenter de te trouver un article là-dessus.

a+
Modifié par Merkel (18 Oct 2005 - 23:19)
Smiley clapclap
Effectivement c'est valide ! Smiley nut
J'avais mis onMouseOver et onMouseOut en oubliant que TOUT devait être en minuscule.... Smiley prie

Donc voici mon code final (enfion je pense.... Smiley cligne ) :
<div id="menubulle"><ul>

<li><a id="bulle1" href="main.html">

<img src="../images/menubulle/bulle1.jpg" alt="Page d'accueil du site"
onmouseover="this.src='../images/menubulle/bulle1_big.jpg'"
onmouseout="this.src='../images/menubulle/bulle1.jpg'" />

<span>Accueil</span>

</a></li>

</ul></div>


/*********************************************************************\
* menu bulle
\*********************************************************************/
#menubulle {
	position: absolute;
	left: 240px;
}
#menubulle ul, #menubulle li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
}
#menubulle li a { /* dimensions et définitions des boutons */
	display: block; /* mise en block de <a> pour lui donner des dimensions */
	height: 100px;
	width: 100px;
	/*border: 1px solid;*/
}
#menubulle li a span {
	position: absolute;
	left: 0px;
	top: -5000px;
	width: 1px;
	height: 1px;
	overflow:hidden;
}
#menubulle img {
	border: 0;
	margin: 0;
}
/* bulle a */
#menubulle a#bulle1 {
	margin: 10px 0 0 0;
}
#menubulle a#bulle2 {
	margin: 55px 0 0 55px;
}
#menubulle a#bulle3 {
	margin: 14px 0 0 32px;
}
#menubulle a#bulle4 {
	margin: 36px 0 0 50px;
}

Et du coup pas besoin de background ni de javascript !!! Smiley biggrin
Que pensez-vous de mon code ? Il tient la route ?

Merci pour tout

@+

Smiley cligne
Pages :
Sujet clos
Aller à