28172 sujets

CSS et mise en forme, CSS3

Hello,

J'ai renseigné toutes mes balises alt comme il est préconisé par tout le monde. Mais comme je viens également d'activer un script "lazy image", l'image se charge que lorsqu'elle entre dans le champ de vision déterminé par la taille de la fenêtre du navigateur, mais avant ça, il est affiché l'attribut alt de l'image.

Je trouve ça assez moche. C'est juste une question cosmétique et je me demandais si on pouvait ne rien afficher du tout, mais garder ces alt là en place.

Merci de votre aide.
Modifié par myself (27 Aug 2016 - 16:46)
Bonjour !

Le plus simple est de ne rien mettre dans les alt...

Et puis, si vous voulez vraiment avoir du texte dans le alt, vous pouvez toujours le rajouter avec Javascript une fois que l'image est chargée...

Smiley smile
Modifié par Zelena (27 Aug 2016 - 18:33)
Administrateur
Zelena a écrit :

Le plus simple est de ne rien mettre dans les alt...

Et puis, si vous voulez vraiment avoir du texte dans le alt, vous pouvez toujours le rajouter avec Javascript une fois que l'image est chargée...

Selon moi c'est un très mauvais conseil au regard de l'accessibilité du document : si ces images sont porteuses de sens, il est nécessaire qu'elles disposent d'un attribut alt correctement renseigné dans le HTML, ceci pour tous les agents utilisateurs qui peuvent exploiter cette information (lecteurs d'écrans, plages brailles, moteurs de recherche, etc.)
Raphael a écrit :

Selon moi c'est un très mauvais conseil au regard de l'accessibilité du document : si ces images sont porteuses de sens, il est nécessaire qu'elles disposent d'un attribut alt correctement renseigné dans le HTML, ceci pour tous les agents utilisateurs qui peuvent exploiter cette information (lecteurs d'écrans, plages brailles, moteurs de recherche, etc.)


Bien.
Que proposez-vous ?
Smiley smile

Edit : peut-être faire en sorte que le texte ne soit pas visible grâce au CSS...

Il y a cette page, intéressante :
https://la-cascade.io/styler-les-images-non-affichees/
Modifié par Zelena (27 Aug 2016 - 19:00)
Zelena a écrit :

Edit : peut-être faire en sorte que le texte ne soit pas visible grâce au CSS...

Il y a cette page, intéressante :
https://la-cascade.io/styler-les-images-non-affichees/

Je pense que même cette approche n'est pas l'idéale étant donné que le texte alternatif HTML est différent d'un pseudo élément généré en CSS Smiley smile . L'impact n'est pas le même.

Les textes alternatifs des images peuvent être stylés tout bêtement avec un color: transparent par exemple.
Raphael a écrit :
PS : la bidouille du color: transparent est tout aussi inaccessible Smiley decu

S'il s'agit de lazy loading, les véritables images seront de toute façon inaccessibles tant que celles-ci ne seront pas visibles pour l'utilisateur. Il s'agirait donc d'utiliser une classe css qui permettrait une mise en page temporaire de l'image.
Pour les robots d'indexation, il faudrait renseigner les images avec leur véritables src dans des balises <noscript>.

Donc, je dis peut être une bêtise, mais à mon sens, cela ne pénaliserait pas l'accessibilité de la page étant donné que de toute façon, les images n'auront de sens que lorsqu'elles seront visibles.