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

2 juin 2011,
par Romy Têtue

Mots-clefs associés à cet article :

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 naturel (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, autant que possible et seulement lorsque c’est nécessaire. Vous n’avez donc plus rien à 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 préférable 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 et rédactrices. Si celleux-ci sont formé·e·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é, lors de la fabrication d’un site SPIP, il est rare d’avoir à se préoccuper de renseigner ces attributs. Vous pouvez donc oublier cela pour consacrer votre attention 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="#URL_DOCUMENT"[ title="(#TITRE|couper{80}|attribut_html)"]>[(#LOGO_DOCUMENT|inserer_attribut{alt,[(#TITRE|couper{60}|attribut_html)]})]</a>

- Puisqu’il s’agit de remplir des attributs HTML, nous avons besoin du filtre |attribut_html qui se charge de formater les données correctement. Écrire title='#TITRE' tout nu est un peu brutal : c’est un coup à péter la page (si, par exemple, le titre contient une balise ou un guillemet).

- 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.

Bien que ce ne soit pas obligatoire, l’habitude est prise de tronquer 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 ancienne 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 ce filtre 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 attribut 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.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 10 novembre 2011 à 15:00, par Uxlco En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    Deux remarques :
    Attention à ne pas mettre d’image-lien sans le alt rempli (si absence de texte)
    Attention aussi aux inputs de type image, là aussi le alt doit être rempli et bien sûr pertinent.

    Cordialement.

  • Le 16 avril 2012 à 11:47, par ? En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    Bonjour,

    Comment faire pour « protéger » les guillemets, car le filtre attribut_html ne les prends pas en compte, donc la syntaxe de la balise alt="le descriptif "contextuel" de l'information" n’est pas correct.

  • Le 7 août 2012 à 23:58, par Marta En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    merci google de m’avoir amené ici ! :)

  • Le 9 septembre 2012 à 12:21, par YannX En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    Bonjour Romy

    Je relis ton article de conseils, avant de passer en pratique..

    Et j’ai envie de préciser une remarque sur SPIP, pour compléter les squelettes : la page d’accueil sommaire.html peut à mon avis etre utilement complétée avec des title sur les liens articles et rubriques.

    A mon avis, cela facilite l’information première de contenu du site, au nouveau visiteur, en particulier sur des articles de détails... et sans encombrer une page qui peut deja contenir beaucoup d’informations !

    Cdlt

  • Le 10 septembre 2012 à 16:38, par quote En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    La synthèse vocale Jaws ne lit pas, par défaut, l’attribut TITLE, nécessaire pour apporter des informations complémentaires aux kyrielles de liens non explicites et identiques disséminés sur le Web. En effet, Jaws ne propose la lecture de cet attribut qu’en option, ce qui ne permettra pas à un utilisateur non-voyant de comprendre un lien non explicite si JAWS est mal paramétré. Son mode de consultation est soit l’intitulé soit le TITLE soit le plus long des deux, contrairement à Window Eyes, qui propose une restitution à la volée. Très compliqué pour les utilisateurs de lecteur d’écran, la bonne règle est de ne pas l’utiliser.

  • Le 22 mars 2013 à 00:14, par peter bang En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    Bonjour Romy. Merci pour ces éclaircissements. Je m’y perds dans les accolades et les crochets, j’ai un logo et je veux lui donner à la fois une largeur et un attribut alt. A quel endroit de la synthaxe met-on la largeur du logo ?

  • Le 13 février 2014 à 17:42, par Marcus En réponse à : Remplir les attributs « alt » et « title » dans SPIP

    Bonjour Romy ,

    Merci pour votre article ; j’ai une question par rapport à ce que vous dites « n’en mettez pas partout, ce n’est pas de la poudre de perlimpinpin ! » .
    Selon mes peu de base en SEO , je pense que les attributs alt servent à Google dans l’identification d’images , et donc associer un mot clé à une image.
    Or si nous ne mettons pas d’alt sur toutes nos images comment Google identifie nos images ?
    Mon agence de référencement m’a fortement conseillé de mettre un attribut alt sur mes images , car je souhaite être présent sur google image.
    Comment interpréter les paroles de mon agence ?

    Merci .

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom