Redaktion, Agentur · 1 Min.

TYPO3-Mediathek: Alternativtexte, Titel und Beschreibungen nach Prüfung

Bilder ohne Alternativtext lassen Screenreader-Nutzer mit einem Dateinamen allein, und leere Titel und Beschreibungen lassen die Redaktion raten, was eine Datei zeigt. In TYPO3 heißt das: drei Felder pro Bild, einmal pro Sprache. Mit TYPO3 MCP findet Ihr KI-Assistent die Lücken, entwirft alle drei Felder aus dem Foto und speichert sie, sobald Sie sie gelesen haben.

Die Prompts

  • Welchen Bildern auf unserer Website Stadtwerke Musterstadt fehlen noch Alternativtext, Titel oder Beschreibung?
    Liest nur; ändert nichts
  • Rufen Sie die drei Fotos und Wasserhahn_alt.jpg über ihre öffentlichen Links ab und schlagen Sie für jedes Alternativtext, einen kurzen Titel und eine Beschreibung in einem Satz vor, auf Englisch und Deutsch. Speichern Sie noch nichts.
    Nur Entwürfe; Sie prüfen sie im Chat
  • Gut. Streichen Sie "south-facing", nennen Sie den Bus einen MVB-Stadtbus und geben Sie dem Wasserhahn den Titel "Drinking water from the tap" (deutsch "Trinkwasser aus der Leitung"). Markieren Sie das Favicon als dekorativ. Dann speichern Sie alle vier auf Englisch und Deutsch, in der deutschen Sprache der Stadtwerke-Website.
    Schreibt nach Ihrer Prüfung; keine Batch-ID

Was macht der Assistent?

  1. Fragen Sie, welche Bilder keinen Alternativtext, Titel oder keine Beschreibung haben. Auf unserer Demo nennt der Assistent drei Fotos der Stadtwerke, ein Favicon und ein weiteres Foto in einem gemeinsamen Ordner.
  2. Bitten Sie nur um Vorschläge. Der Assistent lädt jedes Foto herunter und entwirft Alternativtext, Titel und Beschreibung auf Englisch und Deutsch; noch wird nichts gespeichert.
  3. Prüfen Sie im Chat. Streichen Sie, was das Foto nicht zeigen kann, hier eine vermutete Dachrichtung, ergänzen Sie Namen wie MVB, legen Sie den gewünschten Titel fest und markieren Sie das Favicon als dekorativ.
  4. Bitten Sie ums Speichern in der deutschen Sprache der richtigen Website. Er schreibt acht Feldsätze mit dem MCP-Tool von AI Accessibility und markiert das Favicon.
  5. Prüfen Sie die Metadaten der Datei im Backend und das Bild auf der englischen und der deutschen Seite.

Gezeigt in Claude; andere MCP-Assistenten funktionieren auch.

Wie prüfe ich das und nehme es zurück?

Öffnen Sie die Datei im Backend: Die englische und die deutsche Zeile haben jeweils Alternativtext, Titel und Beschreibung, und die deutsche Zeile zeigt das englische Original als Referenz. Das Tool gibt keine Batch-ID zurück, records_undo kann es also nicht zurücknehmen. Bitten Sie den Assistenten, vorher die alten Werte zu notieren, und schreiben Sie sie zurück, wenn Sie es sich anders überlegen. Auf unserer Demo haben wir die Felder danach wieder geleert.

Was brauche ich?

AI Foundation mit eingeschaltetem MCP-Server, ein MCP-fähiger Assistent, der Bilder ansehen kann, und AI Accessibility für die Tools für Bild-Metadaten; AI Foundation ist kostenlos, AI Accessibility ist lizenzpflichtig.

Was kann der Assistent nicht für Sie tun?

  • Die Tools für Metadaten geben keine Batch-ID zurück: records_undo kann sie nicht zurücknehmen, bitten Sie den Assistenten deshalb, vorher die alten Werte zu notieren.
  • Datei-Metadaten wirken sofort live: Ein Entwurfs-Workspace hält sie nicht zur Prüfung zurück.
  • Sprach-IDs gehören zur jeweiligen Website: Auf unserer Demo ist Deutsch bei den Stadtwerken Musterstadt die Sprache 1 und bei Mustermann Outdoor die Sprache 2. Nennen Sie die Website, sonst landet der deutsche Text in einer Zeile, die ihre Seiten nie lesen.
  • Die Liste der Bilder ohne Alternativtext umfasst alle Websites und prüft nur den Alternativtext: Der Assistent ordnet Dateien nach Ordner und Namen zu, und ein Bild mit Alternativtext, aber ohne Titel erscheint nicht.
  • Um ein Foto zu beschreiben, lädt Ihr Assistent es über seine öffentliche Adresse herunter und sendet es an seinen Anbieter, wie bei jedem Chat.

Fragen zu dieser Folge

Was zeigt dieses Video?

Drei Anfragen in Claude auf unserer Demo-Installation: welche Bilder der Stadtwerke Musterstadt keinen Alternativtext, Titel oder keine Beschreibung haben, Vorschläge für vier Fotos auf Englisch und Deutsch und das Speichern nach einer Prüfung, mit dem Favicon als dekorativ markiert. Danach die Metadaten des Wasserhahn-Fotos im TYPO3-Backend, Englisch und Deutsch, und die Seite Wasser auf der Website in beiden Sprachen.

Wie sieht der Assistent die Fotos?

Das Tool von AI Accessibility gibt die öffentliche Adresse jedes Bildes zurück. Der Assistent lädt das Bild mit seinen eigenen Werkzeugen herunter und beschreibt, was er sieht; das Bild geht also an den Anbieter des Assistenten, wie bei jedem Chat.

Warum das Favicon als dekorativ markieren, statt es zu beschreiben?

Ein Favicon oder eine Verzierung trägt für Screenreader-Nutzer keine Information. Als dekorativ markiert bleibt der Alternativtext absichtlich leer, und das Bild wird nicht vorgelesen.

In diesem Video
Transkript des Videos
  1. 0:00MCP in der Praxis für TYPO3 · Folge 16: TYPO3-Mediathek: Alternativtexte, Titel und Beschreibungen nach Prüfung
  2. 0:02Erste Anfrage: Welche Bilder der Stadtwerke haben keinen Alternativtext, Titel oder Beschreibung?
  3. 0:04Drei Fotos und ein Favicon im Ordner der Website, ein weiteres Foto in einem gemeinsamen Ordner. Nichts wird geändert.
  4. 0:05Zweite Anfrage: die vier Fotos abrufen und alle drei Felder vorschlagen, Englisch und Deutsch.
  5. 0:07Claude sieht sich jedes Foto an und entwirft beide Sprachen. Noch ist nichts gespeichert.
  6. 0:08Es markiert die eigene Vermutung: Die Ausrichtung des Dachs ist auf dem Foto nicht zu sehen.
  7. 0:09Dritte Anfrage, nach der Prüfung: Formulierung korrigieren, Favicon als dekorativ markieren, dann speichern.
  8. 0:11Vier Bilder mit Alternativtext, Titel und Beschreibung gespeichert; das Favicon ist als dekorativ markiert.
  9. 0:12Die deutschen Texte landen in der deutschen Sprache der Stadtwerke-Website.
  10. 0:14Jetzt in TYPO3 prüfen.
  11. 0:15Metadaten von water_tap_final_v2.jpg: Alternativtext, Beschreibung und der Titel aus der Prüfung.
  12. 0:28Die deutsche Zeile hat die deutschen Texte, mit dem englischen Original als Referenz.
  13. 0:40Auf der Website trägt die englische Seite Wasser den neuen Alternativtext und Titel.
  14. 0:45Die deutsche Seite trägt die deutschen.
  15. 0:50Alternativtext, Titel und Beschreibung, nach Ihrer Prüfung, statt drei Felder pro Bild von Hand.
  16. 0:52Alle Folgen: t3planet.de/blog/typo3-mcp-in-der-praxis/

Alle Folgen