Alt-Texte für TYPO3-Bilder automatisch befüllen
Im Content-Element "Bild" oder "Text mit Bild" gibt es das altText Feld.
Lässt man dieses bei den Bildern frei erscheint im img-Tag euerer Bilder logischerweise ein leeres alt-Attribut (alt="").
Damit man sich nicht die Mühe machen muss, jedes mal den alternativen Text einzugeben, kann man das ganze auch per TypoScript erledigen, bzw. ausfüllen lassen.
Ich hab mir gedacht es ist am besten, wenn der Name des Bildes dafür her genommen wird. Weil man die Dateiendung nicht braucht wird diese außerdem weg gelassen. Zu guter Letzt wird der Name des Bildes noch in einzelne Wörter aufgeteilt - und zwar an Hand des underscore-Zeichens (_).
Fazit: Wenn ihr also ein Bild habt, dass meinetwegen TypoScript_Sammlung.jpg heißt generiert euch TYPO3 mit dem folgenden Skript ein alt-Attribut namens "TypoScript Sammlung". Intelligente Menschen können sich mit einer geschickten Namensgebung ihrer Bilder also wieder mal etwas Arbeit sparen :)
So siehts aus:
tt_content.image.20.1.altText >
tt_content.image.20.1.altText = TEXT
tt_content.image.20.1.altText.field = image
tt_content.image.20.1.altText.split {
token.char = 95
cObjNum = 1 |*| 1 |*| 2
1.current = 1
1.noTrimWrap = || |
2.cObject = TEXT
2.cObject.current = 2
2.cObject.split {
token.char = 46
cObjNum = 1 |*| 2
1.current = 1
}
}
Tabellen, Links und Bilder beschriften
Es gibt drei Situationen, die regelmässig bei Webseiten auftreten und die meistens nicht so gelöst sind, dass eine barrierefreie Nutzung für die Besucher möglich ist. Das sind die Links, die Bilder und die Tabellen.
Fall 1: Alternativer Bildtext
Noch am ehesten wird bei den Bilder Rücksicht auf behinderte Menschen oder Benutzer, die mit mobilen Geräten die Seite aufsuchen, genommen. Doch auch hier mangelt es oft an den Details. Im Konkreten geht es darum, dass zusätzlich zur Angabe des gewünschten Bildes (Foto, Grafik) auch ein alternativer Text angeführt wird.
Durch den Zusatz alt="Text" erhalten sowohl Besucher, die mit einem reinen Textbrowser surfen, als auch behinderte Menschen Informationen über das Bild, das sie nicht sehen können. Hierbei ist es wichtig, dass der alternative Text auch Sinn macht. "Schönes Bild mit zwölf Farben" bringt gar nichts, da kann mans lassen auch gleich, hingegen "Logo von Firma xy" oder "Bürgermeister auf dem Motorrad" enthält eine Information, die wichtig sein kann.
Fall 2: Link-Titel
Links gibt es auf Webseiten wie Sand am Meer, aber zu selten wird auch der title-Tag zum Einsatz gebracht. Mit dieser Zusatzinformation kann dem Besucher vermittelt werden, was ihn unter dem Link erwartet. Wenn eine URL besonders kryptisch ist, kann man nicht wissen, ob es sich überhaupt lohnt, auf den Link zu klicken. Mit title="Webseite mit neuen Kinotrailern" erhält man hingegen eine Information, die bei der Entscheidung, ob der Link geklickt werden will oder nicht, sehr weiterhilft.
Fall 3: Tabellen
Die Tabellen sind das grösste Hindernis in puncto barrierefreier Webseiten. Ausgeschieden sind von Anfang an jene unzähligen Seiten, die mit Tabellenlayouts arbeiten. Denn mittlerweile lassen sich auch 3spaltige Layouts mit CSS und Div-Containers sehr elegant realisieren. Wählt man aber doch ein Tabellenlayout, so ist es absolute Pflicht, damit sparsam umzugehen und nicht auch noch künstliche Verschachtelungen einzubauen.
Neben den Layouttabellen, die man wirklich vermeiden sollte, gibt es auch viele Datentabellen, die sich schon nicht mehr so leicht vermeiden lassen, vor allem dann nicht, wenn Redakteure weiterarbeiten sollen. Entwickler können in den Quellcode gehen und diverse Divs ansprechen, aber da spielt nicht immer das CMS mit, wie die Praxis zeigt, damit die Redakteure ebenso arbeiten können.
Wie dem auch sei, es gibt einige Zusatzinfos, die es den Besuchern erleichtert, mit der Tabelle umzugehen bzw. sie leichter zu verstehen. Das ist für blinde Menschen sogar extrem wichtig.
Schon im table-Tag, der die Tabelle einleitet, ist mit dem zusätzlichen Attribut summary die Möglichkeit gegeben, eine Zusammenfassung der Tabelle anzubieten. Mit summary = "Tabelle über die Umsatzentwicklung der letzten 5 Jahre" ist den Besuchern bereits sehr geholfen. Des weiteren wäre eine Überschrift fein. Mit dem caption-Tag, der mit CSS auch schön formartiert werden kann, wird die Nutzung der Tabelle zusätzlich vereinfacht.
Besonders wichtig ist auch die Untergliederung. Das ist von Tabelle zu Tabelle natürlich unterschiedlich, aber die meisten Tabellen haben eine Kopfzeile und einen Hauptteil. Während die Kopfzeile mit dem thead-Tag umschlossen wird, gilt für den Hauptteil der tbody-Tag und - falls vorhanden - für den Abschluss der tfoot-Tag. Mit diesen Unterteilungen vereinfacht sich die Tabelle - ganz besonders für Menschen, die auf den Screenreader angewiesen sind.
Der thead-Kopfteil der Tabelle ist zudem durch den th-Tag, der alle in Frage kommenden Überschriftszellen (z.B. Datum für die Datumspalte, etc.) umschliesst und dem thead-Teil zugeordnet wird.