28172 sujets

CSS et mise en forme, CSS3

Masquer le texte des alt

Bonjour,

J’ai une grosse image sur ma page d’accueil, et bien sûr, j’ai également renseigné la balise alt pour plaire à Google et surtout aux déficients visuels. Par contre, tout en ne nuisant pas à ces derniers, je voudrais « masquer » cet alt visuellement, car ça fait moche l’affichage qui passe du texte à l’image.

Est-ce faisable ? Est-ce souhaitable et dans les bonnes pratiques ? Puis-je définir une règle de masquage visuel pour toutes les images du site ?

Merci.
Modifié par myself (28 Apr 2021 - 07:00)
Modérateur
Bonjour,

Je ne comprends pas le "passage du texte a l'image. il y a un temps de chargement ou on voit le texte avant l'image ?
Bonjour,

Google détecte également les display: none; ou autres moyens pour cacher les éléments. Donc même si vous cachez le alt, Google interprétera ça comme si vous n'aviez rien mis.
De plus, je ne suis pas sûr que l'on puisse cacher ce texte. Le seul moyen serait de le laisser vide je pense.

Maintenant, autre sujet mais le alt ne s'affiche que si l'image n'a pas été trouvée logiquement, c'est son rôle donc vous ne devriez pas le voir. Et si sur certain navigateurs, il s'affiche pendant le chargement, je pense que le plus facile serait d'optimiser au maximum l'image

Bien à vous
Oui, ce texte alt ne s’affiche que sur Firefox. Sur Chrome, l’image arrive quand elle arrive.
Sinon, pour répondre à la suggestion, l’image est déjà optimisée, bien sûr.
Modérateur
myself a écrit :
Oui, ce texte alt ne s’affiche que sur Firefox.

Je n'arrive pas a reproduire ce comportement sur Firefox. Le text du alt ne s'affiche pas.. Tu aurais un exemple en ligne ? voir un screenshot ?
Modérateur
Et l'eau, 


img{
  color: #64a7d1;
}


Mais pour moi, c'est une très mauvaise pratique.
Modifié par niuxe (28 Apr 2021 - 09:52)
Meilleure solution
niuxe a écrit :
Et l'eau, 


img{
  color: #64a7d1;
}


Mais pour moi, c'est une très mauvaise pratique.

Ah je n’avais pas pensé à ça, juste un color…

Par contre, oui, je ne voudrais pas que Google pense que ça soit pour le gruger que je mettrais cette règle. Bon, ce n’est pas encore white sur fond white.

Merci pour vos avis, je vais réfléchir encore un peu Smiley biggol
Bonjour,
sinon, une image "placeholder", très légère et faite d'un fond correspondant aux couleurs de l'image originale. Elle s'affichera aussi rapidement que le Alt et fera patienter le visiteur dans les cas d'un chargement lent.
Pour la créer, prendre l'image originale, la mettre dans Gimp ou Photoshop, la réduire à 2 pixels (oui). Ensuite l'agrandir au format avec le css, tu auras un fond qui correspond à l'image originale, mais qui sera très léger. C'est un peu trivial, mais ça fonctionne. Tu peux aussi décider de la couleur de ton choix. J'utilise cette méthode avec Lazy load.
Au cas : 

<img src="Images/Goni-placeholder.jpg" width="480" height="360" alt="Image placeholder" data-src="Images/Goni-480.jpg" width="480" height="360" alt="Camele n'goni">
Modérateur
Bonsoir, il y a d'autre astuces a celles déjà suggérer.

L'image de petite résolution en fond pour afficher quelque chose est un bon début mais tu as aussi l'option de faire un jpg progressif (gimp/photoshop ,...) , à cela tu peut accoler un text-indent négatif important pour éjecter au loin le texte et, ou un font-size proche de zéro si vraiment tu ne veut jamais voir ce texte.
Mais en cachant le texte , si ton image est réellement inaccessible et qu'elle à son importance dans ton contenu, tu auras juste un espace vide.

cdt,
GC
Sujet clos
Aller à