Comment rendre un bouton Twitter compatible avec le W3C ?

Bonjour,
Les boutons Twitter emploient des attributs qui ne sont pas reconnus par les normes du W3C
Voici un exemple :

<a href="http://twitter.com/share" class="twitter-share-button" data-url="monsite.com" data-text="Venez sur ce site intéressant" data-count="horizontal" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Le data-url="",data-text="", data-count="", data-lang="" ce qui me faits déjà quatre erreurs de plus.
Avez-vous une idée pour contrer ce problème ?
Merci

Bonsoir,

Disclaimers: l’avis que vous allez lire, n’engage que son auteur

Le respect des standards, c’est bien, mais c’est encore mieux de comprendre pourquoi il faut les respecter, afin de les respecter intelligemment. Comme je dis souvent, pour transgresser une règle, il faut avoir bien compris la règle.

Tout d’abord pour faire simple, ces erreurs d’attributs sont comme celles que tu obtiens d’un validateur CSS quand tu utilise des -o-border-radius ou -webkit-border-radius : te priverais-tu de border-radius quitte à employer les veilles méthodes lourdes en HTML+CSS juste pour avoir un CSS qui passerait le validateur CSS sans un message d’erreur sur -webkit-border-radius ?

Le remède serait pire que le mal, quand bien même tu aurais un gros bravo écrit en vert sur tous les validateurs CSS !

Là, c’est pareil avec ces attributs non-conformes, tu peux ignorer ces messages d’erreur là.

Mais alors, pourquoi les normes si quelqu’un te dit que tu peux les transgresser dans de tels cas ? Le rôle d’une norme, c’est de garantir une interprétation et un traitement non-ambigüe. Par exemple, si dans un document HTML classique (pas en HTML 5), tu as un élément inline comme élément enfant directement inclue dans BODY, c’est une erreur, le validateur te dira que c’en est une, et celle là il faudra la corriger, et ne pas la transgresser. C’est une vraie erreur parce qu’elle peut empêcher l’interprétation correcte de la page. De même que c’est une vraie erreur (et une des plus graves même), de ne pas mettre de déclaration DOCTYPE à un document, … parce que ça empêche son interprétation et son traitement correcte.

Ici, ce sont des attributs inconnu de la norme, qui sont probablement destinés à servir de source de données à des script inclus dans la page. Mais ils n’empêchent pas l’interprétation, parce qu’un navigateur qui ne les reconnait pas, va simplement les ignorer.

En fait, pour bien utiliser un validateur, tu dois interpréter le résultat qu’il te renvoie. Par exemple une erreur du validateur sur un attribut inconnu pourrait signifier autre chose, comme le nom d’un attribut mal orthographié. Cette erreur là, il faudrait la corriger.

Pour chaque erreur du validateur, il faut se dire « que dois-je faire de ce message d’erreur ? comment dois-je le prendre et l’interpréter ? »

Le validateur, il n’est pas fait « pour avoir une bonne note », son rôle et de fournir un contrôle, une aide à la vérification, parce que la nature humaine (tout comme les robots, cette exemple le prouve) est sujette à erreur.

Il faut que tu vois ça comme un outil, plus que comme un prof qui donne une bonne note.
Modifié par hibou57 (16 Jan 2011 - 05:21)

D'accord,
Merci pour ton explication

Victor BRITO a écrit :
[…] si tu tiens à rester en HTML 4 ou en XHTML 1 et que tu peux modifier ce bout de code, il suffit de supprimer les attributs data-* incriminés.

Mais dans ce cas, il/elle perd des données qui sont peut-être essentielles pour le script qui peut les attendre. C’est pour cette raison que je conseillais de les laisser et d’ignorer l’erreur du validateur.

Je passais en fait pour donner un autre exemple d’attribut non-standard : typeof, qui est apparemment utilisé pour intégrer RDF à HTML. Il en est question ici :

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
   <div rel="v:itemreviewed">
      <span typeof="v:Organization">
         <h1 property="v:name">Droolong Dog Bar B Q</h1>
            ...
         <img rel="v:rating" class="stars_4" src="stars_map.png alt="4 star rating"/>
         <em>based on <span property="v:count">15</span> reviews</em>
         <strong>Price range:</strong> <span property="v:pricerange">$$</span>
      </span>
   </div>
</div>

Source : Introducing Rich Snippets [Google Webmaster Central Blog]

Ne faite surtout pas exactement pareil! Je veux dire, n’imiter pas les âneries de Google qui n’est pas une référence en matière de respect des standards ou d’accessibilité. Ne vous amusez pas à mettre des H1 dans des SPAN comme ils le font (j’ai aussi un doute sur l’utilisation de STRONG ici, son usage ne parait pas approprié, mais ça se discute). Ils sont vraiment bizarres chez Google quand-même, en plus leurs extraits de sources sur cette page, sont sous formes d’images (j’ai du retranscrire)… vraiment spéciale quand-même.


Autres sources à ce sujet :

RDFa metadata: introduce @typeof attribute ? [OMDoc - OpenMathDocuments]
+http://en.wikipedia.org/wiki/RDFa

Bref, c’était un autre exemple pour dire comment si on s’arrête aux messages d’erreur des validateurs, sans les interpréter, on peut se priver de choses importantes.
Modifié par hibou57 (17 Jan 2011 - 04:55)