Magazine

Remplir les attributs « alt » et « title » dans SPIP

Publié le 10 novembre 2011 par Tetue @tetue
Remplir les attributs « alt » et « title » dans SPIP

SPIP renseigne les attributs « alt » et « title » pour vous. Voici comment compléter dans vos squelettes, si besoin.

N'en mettez pas partout !

Pour commencer, renseignez-vous avant de remplir les attributs « alt » et « title » de vos images et de vos liens. Si cela améliore l'accessibilité et donc le référencement (SEO) d'un site, encore faut-il les utiliser à bon escient : n'en mettez pas partout, ce n'est pas de la poudre de perlimpinpin !

Rappelons rapidement que si l'attribut « alt » doit obligatoirement être présent sur chaque image, il doit rester vide sur celles décoratives et n'être renseigné que sur celles informatives. Relire : Bien utiliser le texte alternatif.

Quand à l'attribut « title », il sert à apporter une information complémentaire, si nécessaire : il est donc rare. En mettre partout est une mauvaise pratique. Relire : Du bon usage des attributs alt et title sur les images et les liens.

Ah oui, et pour le SEO, inutile d'en faire plus : il y a eu tellement d'abus que la pondération de ces attributs est faible. Rappelez-vous que le contenu important est idéalement dans les textes de la page. Si vous éprouvez le besoin d'en ajouter une louche dans ces attributs, c'est qu'il y a un problème éditorial.

SPIP le fait pour vous

Voyons maintenant comment mettre cela en œuvre dans SPIP. C'est très simple. Sachez d'abord que SPIP renseigne nativement ces attributs, lorsque c'est nécessaire et autant que possible. Vous n'avez donc pas grand chose à faire.

Si SPIP génère un « alt » vide sur les logos (via #LOGO...), ce n'est pas par négligence ni par erreur, mais bien exprès. En effet, ceux-ci sont souvent utilisés comme visuels complémentaires, à côté du titre de l'objet qu'ils désignent : renseigner l'alternative textuelle serait dans ce cas inutilement redondant, voire carrément saoulant en synthèse vocale, ce qui n'améliore pas l'accessibilité, au contraire. Il est donc normal qu'ils soient vides par défaut.

Les images et documents illustrant les articles, a priori informatives, sont naturellement pourvues par SPIP de ces attributs, renseignés avec le titre saisi par les rédacteurs. Si ceux-ci sont formés à la rédaction accessible, il est possible de faire mieux, plus finement, grâce au plugin Accessibilité.

Complétez dans vos squelettes

En réalité, il est rare d'avoir besoin de renseigner ces attributs à la fabrication d'un site SPIP. Vous pouvez l'oublier pour vous consacrer au reste. Mais ceci dit, vous avez peut-être besoin d'en ajouter quelques-uns dans vos squelettes ? Voici donc comment bien faire :

-
Remplir un attribut alt dans SPIP :

[ alt="(#TITRE|couper{60}|attribut_html)"]

et sur les images générées :

|inserer_attribut{alt,[(#TITRE|couper{60}|attribut_html)]}

-
Remplir un attribut title dans SPIP :

[ title="(#TITRE|couper{80}|attribut_html)"]

et sur les liens générés :

|inserer_attribut{title,[(#TITRE|couper{80}|attribut_html)]}

-
Exemple de syntaxe complète :

<a href="http://feeds.feedburner.com/romy#URL_DOCUMENT">[(#LOGO_DOCUMENT|inserer_attribut{alt,[(#TITRE|couper{60}|attribut_html)]})]</a>

-
Puisqu'il s'agit de remplir des attribut HTML, nous avons besoin du filtre |attribut_html qui se charge de mettre les données au bon format. Ecrire title='#TITRE' tout nu est un peu brutal : c'est un coup à péter la page (si, par exemple, le titre contient une balise).

-
Nous aurons éventuellement besoin du filtre |couper qui permet de tronquer un texte. Mieux vaut couper d'abord, avant de passer le filtre |attribut_html, qui s'appliquera alors aux caractères restants. L'habitude est prise de couper les alt à 60 caractères et les title à 80, ce qui s'effectuera respectivement ainsi dans SPIP par |couper{60} et |couper{80}.

Cette habitude, issue d'une recommandation AccessiWeb est ici appliquée de façon un peu stricte. Cette limite est liée aux plages braille qui affichent des lignes de 40 caractères : une ligne (40 caractères) est trop juste mais 2 lignes (80 caractères), ça commence à faire beaucoup. Limiter techniquement le contenu de ces attributs (en utilisant le filtre couper) est discutable. Utilisez donc ces filtres avec modération. Mais sur les sites dynamiques contributifs, ça permet d'éviter pire, en endiguant les ardeurs de certains rédacteurs qui, trop loquaces, collent des paragraphes entiers dans chaque title !

-
Le filtre |inserer_attribut sera utile pour, comme son nom l'indique, insérer l'un de ces attributs sur une balise générée par SPIP. Par exemple, pour renseigner exceptionnellement l'attribut alt, nativement vide, d'un logo : [(#LOGO_ARTICLE|inserer_attribut{alt,[(#TITRE|couper{60}|attribut_html)]})].

À l'inverse, pour supprimer un attribut intempestivement généré par SPIP, méfiez-vous du mal nommé filtre |vider_attribut{alt} qui ne fait pas que vider, mais supprime aussi l'attribut ! On n'utilisera donc jamais |vider_attribut{alt}, mais plutôt |inserer_attribut{alt,''}, car il faut toujours garder l'attribut alt.

À relire avant tout :


Retour à La Une de Logo Paperblog

A propos de l’auteur


Tetue 1200 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte

Dossier Paperblog