Adding alt and title attributes 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:

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.