Travaux pratiques
TROISIÈME PARTIE
180
Malheureusement, certains navigateurs non graphiques interprètent partiellement
les styles CSS. Au lieu de restituer le contenu de l’élément ainsi mis en place,
ils en suivent les instructions de mise en forme et masquent son texte, ce qui n’est pas
l’effet recherché. C’est l’association de plusieurs propriétés qui nous permettra de
couvrir un large éventail de navigateurs.
Plaçons l’élément contenu dans le lien hors de la zone visuelle de deux
manières distinctes : un positionnement absolu à -5000px en haut et à gauche et un
text-indent décalant le texte à gauche. L’une au moins de ces instructions sera
interprétée par la plupart des navigateurs non visuels :
Temps de latence et préchargement
Cette méthode présente un inconvénient pratique : le temps de chargement de
l’image de remplacement induit parfois une certaine latence lors du premier passage
du pointeur de la souris sur l’image. Ce petit retard, dépendant des données présentes en cache, de la vitesse de connexion, de la réactivité du serveur à l’autre bout
de la ligne… pourra gêner l’ergonomie et la souplesse d’utilisation de la page.
Ce genre de détails ne se manifeste qu’en production, échappant au designer développant un site web sur un ordinateur. En effet, le temps de chargement d’une image
présente sur le disque dur local est négligeable devant les durées nécessaires à l’établissement d’une connexion web sur un serveur distant.
Nous avons déjà vu, au chapitre portant sur les préchargements d’images, quelques
techniques évitant ces petits soucis. Il en existe d’autres, qui fonctionneront tout
a.image span {
display: none;
}
a.image span {
position: absolute;
left:-5000px;
top: -5000px;
text-indent: -5000px;
}
ÉTUDE Mettre un titre accessible en image
Le billet suivant de Laurent Denis, grand spécialiste en la matière, explore les limites et possibilités de ce
thème :
B http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image
TROISIÈME PARTIE
180
Malheureusement, certains navigateurs non graphiques interprètent partiellement
les styles CSS. Au lieu de restituer le contenu de l’élément ainsi mis en place,
ils en suivent les instructions de mise en forme et masquent son texte, ce qui n’est pas
l’effet recherché. C’est l’association de plusieurs propriétés qui nous permettra de
couvrir un large éventail de navigateurs.
Plaçons l’élément contenu dans le lien hors de la zone visuelle de deux
manières distinctes : un positionnement absolu à -5000px en haut et à gauche et un
text-indent décalant le texte à gauche. L’une au moins de ces instructions sera
interprétée par la plupart des navigateurs non visuels :
Temps de latence et préchargement
Cette méthode présente un inconvénient pratique : le temps de chargement de
l’image de remplacement induit parfois une certaine latence lors du premier passage
du pointeur de la souris sur l’image. Ce petit retard, dépendant des données présentes en cache, de la vitesse de connexion, de la réactivité du serveur à l’autre bout
de la ligne… pourra gêner l’ergonomie et la souplesse d’utilisation de la page.
Ce genre de détails ne se manifeste qu’en production, échappant au designer développant un site web sur un ordinateur. En effet, le temps de chargement d’une image
présente sur le disque dur local est négligeable devant les durées nécessaires à l’établissement d’une connexion web sur un serveur distant.
Nous avons déjà vu, au chapitre portant sur les préchargements d’images, quelques
techniques évitant ces petits soucis. Il en existe d’autres, qui fonctionneront tout
a.image span {
display: none;
}
a.image span {
position: absolute;
left:-5000px;
top: -5000px;
text-indent: -5000px;
}
ÉTUDE Mettre un titre accessible en image
Le billet suivant de Laurent Denis, grand spécialiste en la matière, explore les limites et possibilités de ce
thème :
B http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image