CObject IMAGE : Gestion alt et title

Un article de Typo3 CMS / Documentation Typo3 / Support Typo3.

Lorsqu'on utilise un cObject IMAGE en TypoScript, si on renseigne la propriété "altText" et qu'on ne renseigne pas la propriété "titleText", par défaut lors du rendu HTML Typo3 génère un attribut title reprenant le contenu du alt.

Si on veut éviter cette redondance (non recommandée pour l'accessibilité) on dispose d'un paramètre supplémentaire : emptyTitleHandling.

Ces paramètres sont décrits dans le Constant Editor, dans le combo CONTENT au niveau Content: Image :

Images, empty title handling	[styles.content.imgtext.emptyTitleHandling]
How will the 'title' attribute be handled if no title is given for an image.
Possible choices: "keepEmpty", "useAlt" or "removeAttr".
Recommended for accessibility is "removeAttr".
For correct tooltips on IE, use "keepEmpty". For previous TYPO3 behaviour, use "useAlt".
Default: removeAttr

Etudions la façon dont ce paramètre est utilisé dans styles.content :

TypoScript Object Browser

Si on regarde les paramètres de IMGTEXT dans TSRef (http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/8/16/), on s'aperçoit que le paramètre emptyTitleHandling est appliqué directement au cObject IMAGE dans les contenus du type "Image" et "Texte et image".

TS Ref IMGTEXT

Cette configuration ne concerne donc que les contenus préféfinis de Typo3.

Pour l'utiliser en dehors de ces cas de figures, voir l'exemple ci -dessous.

Voici un exemple d'utilisation (picto Imprimer la page, 23x23px) :

[modifier] Utilisation via TypoScript

TypoScript

lib.pictoPrint = IMAGE
lib.pictoPrint {
 file=fileadmin/templates/img/pictoPrint.gif
 altText=Imprimer la page
 wrap=<a href="javascript:window.print();">|</a>
 emptyTitleHandling=removeAttr
}

Sortie HTML

<a href="javascript:window.print();"><img src="fileadmin/templates/img/pictoPrint.gif" width="23" height="23" border="0" alt="Imprimer la page" /></a>

Le but recherché est donc atteint : pas de title redondant dans la balise img.

[modifier] Utilisation via une extension ou un un PHP_SCRIPT

Dans une extension on peut utiliser ce code pour la génération d'une image :

<?php
$html = $this->cObj->cImage($img['file'], $conf);
?>

Si on reprend l'exemple donné plus haut, cela donne :

<?php
$img['file']='fileadmin/templates/img/pictoPrint.gif';
$conf['altText'] = 'Imprimer la page';
$conf['wrap'] = '<a href="javascript:window.print();">|</a>';
$conf['emptyTitleHandling'] = 'removeAttr';
 
$html = $this->cObj->cImage($img['file'], $conf);
?>

En sortie, $html renvoie le même code que dans le 1er exemple.

N.B. : Accessibilité et JavaScript window.print()

Dans cet exemple, l'alternative au JavaScript n'est pas dans le code de la page, mais dans le menu du navigateur (Fichier - Imprimer) ou son équivalent clavier.