Donnerstag, 13. März 2014

Image Alt-Text: So hinterlegen Sie einen Standardtext

Gerne vergessen Redakteure ihren Bildern alternative Texte (sog. Alt-Text des Bildes) zuzuweisen.
Aber gerade Bilder mit Alt-Text werden von Suchmaschinen besser gefunden und können somit von diesen in einen sinnvollen Kontext zu Ihren übrigen Inhalten gestellt werden. Auch die Barrierefreiheit spielt hier eine große Rolle, dient der Alt-Text vor allem Screenreadern als Quelle der Bildbeschreibung.
Damit Sie auch bei vergesslichen Redakteuren ein gutes "SEO-Gewissen" haben, können Sie jedem Bild zumindest den eigenen Dateinamen als Alt-Text übergeben. Natürlich macht das nur dann Sinn, wenn Sie die Dateien entsprechend sinnvoll benennen und nicht einfach von Ihrer Digitalkamera "rüberziehen".

Tragen Sie das folgende TypoScript einfach in das Setup Ihres Haupt-Templates ein. Damit erhält jedes Bild, welches über die Inhaltselemente "Bild" bzw. "Text mit Bild" eingebunden wurde, einen Standard Alt-Text, nämlich seinen Dateinamen in optimierter Form (also ohne Pfadangabe und Dateiendung).

(Getestet habe ich den Code in TYPO3 6.1.x Es sollte aber in allen Versionen mit Dateireferenzierung [FAL] und der TypoScript-"Funktion" replacement funktionieren - sprich ab Version 4.7)

//------------------------------

// Löscht die Standard-Konfiguration des Alt-Textes
tt_content.image.20.1.altText >
// Neuaufbau als TEXT-Objekt
tt_content.image.20.1.altText = TEXT
tt_content.image.20.1.altText {
  // zusätzliches Objekt zur Fallunterscheidung leer/befüllt
  // (zugegeben: erst nach längerem herumprobieren war das die finale Lösung)
  cObject = TEXT
  // Das Objekt erhält den Wert aus dem Feld "alternative Text",
  // den Sie direkt beim Bild eintragen können
  cObject.field = altText

  // Wenn kein Alt-Text hinterlegt wurde, wird ein TEXT-Objekt erzeugt
  ifEmpty.cObject = TEXT
  ifEmpty.cObject {
    // Ich ersetze nun Teile des Original-Dateinamens
    // Da ich es übersichtlich mag, teile ich mir meine Funktion ein wenig auf
    replacement {
      10 {
        // Sucht alle Werte zwischen "/" und entfernt diese
        search = /\/(.*)\//
        useRegExp = 1
        replace =
      }
      15 {
        // Danach entferne ich die Dateiendung
        // Somit steht nur noch der reine Name der Datei da
        search = /^(.*)\.(.*)/
        useRegExp = 1
        replace = $1
      }
      20 {
        // zuletzt lösche ich die voranstehenden Punkte, 
        // sollten diese von TYPO3 gesetzt worden sein
        search = ..
        replace =
      }
    }
    // Den Wert (hier der Dateiname plus Pfad) beziehe ich aus dem Feld "image" des Inhaltselements
    field = image
    // Da im Feld "image"  die Bilder durch Komma getrennt in der Datenbank abgespeichert werden,
    // führe ich einen Optionsplit mit Komma als Trennzeichen durch. Damit kann ich jedes einzelne Bild entsprechend bearbeiten.
    // Tun Sie dies nicht, haben aber mehrere Bilder, so würde der Alt-Text des letzten Bildes bei allen anderen angezeigt werden
    split.token.char = 44
    // Gibt je das aktuelle Bild zurück
    split.returnKey.data = register : IMAGE_NUM_CURRENT
  }
}
// Vererbung der neuen Alt-Text Definitionen auf das Inhaltselement "Text mit Bild"
tt_content.textpic.20.1.altText.ifEmpty.cObject < tt_content.image.20.1.altText.ifEmpty.cObject

//------------------------------

Vorteil: Wenn Sie innerhalb von "replacement" noch weitere Angaben hinzufügen, z.B. "_" und/oder eine Umlautumschreibung mit entsprechender Ersetzung, können Sie bequem sehr ansehnliche Alt-Texte generieren.

Nachteil: Bei mehrsprachigen Seiten müssten Sie für jede Sprache ein neues Bild zuordnen. Das erfordert viel Speicherplatz und ist deutlich umständlicher, als einfach nur einen anderen Alt-Text der Bildreferenz hinzuzufügen.

Obwohl diese Methode sehr bequem ist, sollten Sie dennoch die Mühe nicht scheuen und jedem Bild einen eigenen "sprechenden" Alt-Text zuweisen. Suchmaschinen und Menschen mit Handicap werden es Ihnen danken.

Viel Spaß beim Ausprobieren.

1 Kommentar:

  1. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Typo3, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on Typo3. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com


    AntwortenLöschen