TYPO3

Adding alt and title attributes to images

deutsch Hier klicken, um diese Seite auf Deutsch zu lesen: 'alt' und 'title' Attribute setzen

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:

TypoScript: 'alt' and 'title' for images

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

Comments for Adding alt and title attributes to images

Add a comment


(will not be displayed)


(Fields marked with a * are mandatory)
Please note that your comment will be checked before it gets published.
Latest TYPO3 tutorial
How to define special links with custom tags

How to define special links with custom tags

September 2010 – How you can define your own tags for specific links in TYPO3. We show tags for nofollow links, links to other languages and links to tt_news records. more »

Latest TypoScript snippet
Automated backlink to parent page

Automated backlink to parent page

December 2009 – How to automatically generate a back link to a page one level above the current page. more »

Latest glossary entry
File browsers in TYPO3

File browsers in TYPO3

March 2010 – What are file browsers in TYPO3 and how can they be used? more »