[pour update] Mes observations diverses

bonjour,

Puisque mes observations que j'ai faites récemment concerne plus qu'un tuto, c'est la raison pourquoi je ne spécifie pas lequel dans le titre. Je viens en faire part, question que cela puisse être ajouté dans les tutoriels concernés.

Première observation

Conceerne : Accessibilité > Balises <img /> ou feuille de style CSS

Observation : Récemment, sur phpBB.com, il y a eu un membre qui a signalé un problème d'accessibilité sur les styles basés sur prosilver. En effet, les images des boutons sont en fond. Or, le membre éprouvant le problème d'accessibilité a une déficience visuelle plus sévère que la mienne, sans être toutefois non-voyant. Pour pallier, il doit parfois utiliser une configuration de type "Contraste élevé" qui change l'affichage des pages en mettant les fonds en noir et les textes en blanc et en désactivant les fonds. Or, puisque les boutons sont en fond, ceux-ci deviennent invisibles, comme on peut le voir sur la capture dans le premier post de ce fil. La discussion est en cours, donc il n'y a rien d'encore décidé pour le moment.

Donc je pense qu'en faisant mention des configurations spéciales pour pallier à une mauvaise vision serait un plus.

Deuxième observation

Concerne : XHTML > À quoi servent les balises META ?

Observation : Même si on sait que la balise meta description sert à afficher un texte dans les résultats de recherche, je viens signaler que c'est cette même balise qui est utilisée pour afficher une description lorsqu'on partage un lien sur les réseaux sociaux comme Facebook par exemple.

Pour vous donner un exemple, prenons ce lien dont la méta description fait dur : http://www.cieletespace.fr/node/6946

Voici ce que j'ai en regardant le code-source :

<meta name="description" content="Auteur JL Dauvergne Mis en avant Vidéo Audio Image LeverLune_360.jpg Fichiers Mots clefs super lune 19 mars 2011 mystification pleine lune 1993 terre soleil eclipse lumineuse japon tsunami ecliptique grandes marées marées d&amp;#039;equinoxe seisme" />

Comme on s'en doute, ça fait un truc pas très ragoûtant dans le résultat de recherche :
http://img.photobucket.com/albums/v381/ladykatt/mauvaise-description03.png

Or, regarder ce que ça a affiché comme description quand je l'ai partagé sur Facebook :
http://img.photobucket.com/albums/v381/ladykatt/mauvaise-description02.png

J'ai d'ailleurs envoyé un mail au webmaster car c'était vraiment trop frappant pour laisser passer ça. Je lui ai laissé le lien de l'article sur les balises méta.

Or, il me semble ne pas me souvenir d'avoir vu la moindre mention des réseaux sociaux dans l'explication sur la méta description. Il serait bon de le souligner, d'autant plus que si un article est intéressant, il sera forcément partagé sur les réseaux sociaux, qu'il y ait un bouton "Partager" ou non.


Voilà pour mes observations, en espérant avoir apporter ma p'tite pierre à l'édifice.

Salut,

IshimaruChiaki a écrit :

Première observation

Conceerne : Accessibilité &gt; Balises &lt;img /&gt; ou feuille de style CSS

Observation : Récemment, sur phpBB.com, il y a eu un membre qui a signalé un problème d'accessibilité sur les styles basés sur prosilver. En effet, les images des boutons sont en fond. Or, le membre éprouvant le problème d'accessibilité a une déficience visuelle plus sévère que la mienne, sans être toutefois non-voyant. Pour pallier, il doit parfois utiliser une configuration de type &quot;Contraste élevé&quot; qui change l'affichage des pages en mettant les fonds en noir et les textes en blanc et en désactivant les fonds. Or, puisque les boutons sont en fond, ceux-ci deviennent invisibles, comme on peut le voir sur la capture dans le premier post de ce fil. La discussion est en cours, donc il n'y a rien d'encore décidé pour le moment.

Ce problème a déjà été évoqué maintes fois sur le forum. Même si ça n'est peut être pas assez explicite, Raphael fait la différence entre les images décoratives et les images de contenu. Après il peut y avoir divergence sur ce qui est une image de contenu ou pas mais dans le cas d'un bouton, c'est à 100% du contenu.
Ce problème n'intervient pas qu'en cas de déficience visuelle, il y a d'autre raison pour qu'une image ne s'affiche pas (image non chargé par exemple).

Concernant prosilver, ce n'est clairement pas un exemple de bonne intégration que ce soit au niveau de l'accessibilité (et ce sur énormément de points) tant au niveau de la construction du code en lui même.

Moi ce qui m'épate c'est le courage des gars qui arrivent à coder un truc pareil car il faut avouer que ça marche très bien malgré tout .

IshimaruChiaki a écrit :


Deuxième observation

...

Or, il me semble ne pas me souvenir d'avoir vu la moindre mention des réseaux sociaux dans l'explication sur la méta description. Il serait bon de le souligner, d'autant plus que si un article est intéressant, il sera forcément partagé sur les réseaux sociaux, qu'il y ait un bouton &quot;Partager&quot; ou non.

Je ne savais pas pour facebook et autres(ils sont nombreux à faire ça je pense), pas le temps de m'y intéresser. C'est un comportement similaire à celui de google. Dans ton exemple la balise méta description est juste mal remplie.

bzh a écrit :
Ce problème a déjà été évoqué maintes fois sur le forum. Même si ça n'est peut être pas assez explicite, Raphael fait la différence entre les images décoratives et les images de contenu. Après il peut y avoir divergence sur ce qui est une image de contenu ou pas mais dans le cas d'un bouton, c'est à 100% du contenu.
Ce problème n'intervient pas qu'en cas de déficience visuelle, il y a d'autre raison pour qu'une image ne s'affiche pas (image non chargé par exemple).

Ce que je veux dire par là c'est que oui, on mentionne le serveur en rade et tout ça, mais mis à part dans un lien en anglais donné dans un article, je n'ai aucun souvenir que l'on ait fait mention du cas des configurations particulières.

a écrit :
Concernant prosilver, ce n'est clairement pas un exemple de bonne intégration que ce soit au niveau de l'accessibilité (et ce sur énormément de points) tant au niveau de la construction du code en lui même.

Quand Daniel (le gars très malvoyant) est venu le signaler, je n'ai pas manqué de le souligner au sujet de la façon d'insérer des images de contenu. Là en ce moment, il n'y a rien de définitif, mais cette suggestion est à l'état du "Peut-être". À suivre.

a écrit :
Moi ce qui m'épate c'est le courage des gars qui arrivent à coder un truc pareil car il faut avouer que ça marche très bien malgré tout .

Surtout pour tout le CSS nécessaire pour simuler ces tableaux (on peut dire la même chose pour PunBB qui est tableless lui aussi).

Mais pour les convaincre du caractère excessif du degré de suppression des tableaux, ça me prendrait du poids... du genre un coup de main de QuentinC (s'il est à l'aise avec l'anglais) ainsi que des exemples de forums semi-tablés accessibles (comme celui-ci), car à l'heure actuelle, si on leur parle de rétablir les tableaux pour la structure de la liste des forums ou des sujets, tout de suite ça pense à subsilver2 qui, lui, est montré comme modèle des choses à ne pas faire à cause justement... des tableaux ! Même s'il y en a moins dans subsilver2 que dans le subsilver original de phpBB2, il y en a quand même plus par rapport à la vision d'alsa. ils ne peuvent donc pas imaginer un intermédiaire entre les deux... c'est soit blanc, soit noir.

Déjà, je suis en train d'envisager de faire des changements dans mes styles phpBB3 pour au moins passer des images-fonds aux <img /> (tant pis pour le rollover...quoique j'ai quand même quelques bases en JS).

Mais l'idéal serait de refaire un style au grand complet, dans l'esprit d'Alsacréations, mais je ne me verrais pas faire ça seule, à cause de la maintenance que ça amène à devoir faire, ainsi que les adaptations des MODs.

a écrit :
Je ne savais pas pour facebook et autres(ils sont nombreux à faire ça je pense), pas le temps de m'y intéresser. C'est un comportement similaire à celui de google. Dans ton exemple la balise méta description est juste mal remplie.

Justement, c'est pour ça que je viens le signaler, afin de :
1- en faire mention dans l'article
2- en informer les habitués des critiques de sites Web pour qu'ils puissent en informer ceux qui viennent soumettre leur site aux critiques et qui ont une méta description qui ressemble plus à un ramassis de mots-clés qu'autre chose.

IshimaruChiaki a écrit :

Ce que je veux dire par là c'est que oui, on mentionne le serveur en rade et tout ça, mais mis à part dans un lien en anglais donné dans un article, je n'ai aucun souvenir que l'on ait fait mention du cas des configurations particulières.

Effectivement, je ne crois pas qu'il y est d'article explicite la dessus. Dans le tuto sur les sprites css, les mêmes remarques avaient été faîtes d'où l'encadré attention.

IshimaruChiaki a écrit :

Mais l'idéal serait de refaire un style au grand complet, dans l'esprit d'Alsacréations, mais je ne me verrais pas faire ça seule, à cause de la maintenance que ça amène à devoir faire, ainsi que les adaptations des MODs.

Oui, ça représente énormément de travail. Je suis sur la fin d'un forum phpbb3 en ce moment avec un thème personnalisé et ajout de nombreux mod dont certains que j'ai du développer et ça m'a pris un temps immense. J'ai fais beaucoup de concession niveau code vu la taille de la css et les répercutions de certaines propriétés, il vaut mieux y aller avec des pincettes.

IshimaruChiaki a écrit :

Surtout pour tout le CSS nécessaire pour simuler ces tableaux (on peut dire la même chose pour PunBB qui est tableless lui aussi).

On sent que ce sont des choix(sprites, tableless,...) fondés sur des on-dit mais pas vraiment creusés. Il me semble qu'il y a tout de même des tableaux sur certaines pages ; la liste des membres et certaines parties dans l'ucp.

Le pire pour les tableaux, c'est que ça n'optimise vraiment en rien.

IshimaruChiaki a écrit :

Déjà, je suis en train d'envisager de faire des changements dans mes styles phpBB3 pour au moins passer des images-fonds aux <img /> (tant pis pour le rollover...quoique j'ai quand même quelques bases en JS).

Un autre solution serait de mettre du vrai texte à la place de l'image qui ne sert finalement qu'a écrire en helvetica (donc pas à grand chose).