Adding alt and title attributes to images

This TypoScript code shows you how you can add an alternative text (alt attribute in img src tag) to images.

It's always a good idea to add an alternative text to an image that is displayed on a web page. Users with screen readers (keyword "accessibility") need this textual information and some users configured their browsers to not show any images (e.g. mobile devices). Besides, most of the major search engines use the alternative text of images as additional information when indexing a page.

To provide a description for an image, the attributes "alt" and "title" of the <img src> tag need to be used. When an image is inserted into a page via TypoScript's IMAGE content type, these attributes are not set by default.

By using the following TypoScript code, you can set both the 'alt' and the 'title' attributes:

alt and title for images TypoScript, SETUP section

	temp.image_with_alttext = IMAGE
temp.image_with_alttext {
  file = fileadmin/images/picture-with-alt-and-title.jpg
  altText = ... text for 'alt' attribute ...
  titleText = ... text for 'title' attribute ...
}

If the titleText option is omitted, the content of altText will be used as the title attribute as well.

Deutsche Version