# Barrierefreiheit

<span>Informationen zur Umsetzung von </span>**Barrierefreiheit**<span> in verschiedenen </span>**Content Management Systemen.**

# Barrierefreiheit in TYPO3

# Bilder für Screenreader lesbar machen

<p class="callout info">Das hier beschriebene Vorgehen bezieht sich ausschließlich auf die Alternativtexte von Grafiken in Inhaltselementen. Für die Anpassungen an fixen Grafiken im TYPO3 Theme ist ein Eingriff in den Code Ihrer TYPO3 Instanz notwendig. Die propeller GmbH kann diese Änderungen gerne für Sie vornehmen, sprechen Sie uns einfach darauf an.</p>

<span style="white-space: pre-wrap;">Für Elemente wie </span>**"Bild"**<span style="white-space: pre-wrap;">, </span>**"Text und Bilder" sowie**<span style="white-space: pre-wrap;"> </span>**"WS Slider Settings",**<span style="white-space: pre-wrap;"> kann der Alternativtext </span>**(*`<em class="editor-theme-code editor-theme-italic">alt</em>`*-Attribut)**<span style="white-space: pre-wrap;"> im TYPO3 Backend einfach gesetzt werden. Diese Elemente orientieren sich automatisch an dem Global für das Medium hinterlegten alt-Text, welcher über den Dateimanager gesetzt werden kann.</span>

<span style="white-space: pre-wrap;">Rufen Sie hierzu die "Dateiliste" </span>**("Filelist")**<span style="white-space: pre-wrap;"> in der linken Seitenleiste auf, und navigieren Sie zur gewünschten Grafik.</span>

[![image.png](https://wiki.propeller.de/uploads/images/gallery/2026-07/scaled-1680-/VL63r0ETgQbvKgxt-image.png)](https://wiki.propeller.de/uploads/images/gallery/2026-07/VL63r0ETgQbvKgxt-image.png)

<span style="white-space: pre-wrap;">Sobald Sie auf "editieren" </span>**(kleiner Stift)** klicken, öffnet sich der Eigenschaftsdialog der Mediendatei, in welchem Sie den Alternativtext festlegen können:

[![image.png](https://wiki.propeller.de/uploads/images/gallery/2026-07/scaled-1680-/wNdZhcDsYLw2UjcI-image.png)](https://wiki.propeller.de/uploads/images/gallery/2026-07/wNdZhcDsYLw2UjcI-image.png)

Dieser Text wird nun von allen unterstützten Inhaltselementen verwendet, um das Bild z.B. für Screenreader lesbar zu machen.

<p class="callout warning">Eventuell ist eine Anpassung an Ihrem TYPO3 Theme notwendig, damit der Alternativtext bei allen nötigen Elementen korrekt ausgegeben wird. Kontaktieren Sie hierzu einen Mitarbeiter der propeller GmbH um eine entsprechende Überprüfung anzustoßen.</p>

# Barrierefreiheit in WordPress

# Bilder für Screenreader lesbar machen

<p class="callout info">Das hier beschriebene Vorgehen bezieht sich ausschließlich auf die Alternativtexte von Grafiken in Gutenberg Blöcken. Für die Anpassungen an fixen Grafiken im WordPress Theme ist ein Eingriff in den Code desselbigen notwendig. Die propeller GmbH kann diese Änderungen gerne für Sie vornehmen, sprechen Sie uns einfach darauf an.</p>

<span style="white-space: pre-wrap;">Für alle Blöcke im "Gutenberg" Blockeditor, welche Bilder verarbeiten, kann der Alternativtext </span>**(*`<em class="editor-theme-code editor-theme-italic">alt</em>`*-Attribut)**<span style="white-space: pre-wrap;"> im WordPress-Backend einfach gesetzt werden. Diese Elemente orientieren sich automatisch an dem Global für das Medium hinterlegten alt-Text, welcher über den Dateimanager gesetzt werden kann.</span>

Rufen Sie hierzu den Punkt "Medien" in der linken Seitenleiste auf, und navigieren Sie zur gewünschten Grafik.

[![image.png](https://wiki.propeller.de/uploads/images/gallery/2026-07/scaled-1680-/3k34Wx1e0GOfjwju-image.png)](https://wiki.propeller.de/uploads/images/gallery/2026-07/3k34Wx1e0GOfjwju-image.png)

Sobald Sie die Grafik anklicken, öffnet sich der Eigenschaftsdialog der Mediendatei, in welchem Sie den Alternativtext festlegen können:

[![image.png](https://wiki.propeller.de/uploads/images/gallery/2026-07/scaled-1680-/n34Bd4zqbaZKVCo5-image.png)](https://wiki.propeller.de/uploads/images/gallery/2026-07/n34Bd4zqbaZKVCo5-image.png)

Dieser Text wird nun von allen unterstützten Gutenberg-Blöcken verwendet, um das Bild z.B. für Screenreader lesbar zu machen.

### Überschreiben des globalen Alternativtextes

Innerhalb der Blockeinstellungen eines Medienblock im Gutenbergeditor, kann der global hinterlegte Alternativtext optional auch überschrieben werden:

[![image.png](https://wiki.propeller.de/uploads/images/gallery/2026-07/scaled-1680-/WURUdp6u3RHlPq81-image.png)](https://wiki.propeller.de/uploads/images/gallery/2026-07/WURUdp6u3RHlPq81-image.png)

<p class="callout warning">Eventuell ist eine Anpassung an Ihrem WordPress Theme notwendig, damit der Alternativtext bei allen nötigen Elementen korrekt ausgegeben wird. Kontaktieren Sie hierzu einen Mitarbeiter der propeller GmbH um eine entsprechende Überprüfung anzustoßen.</p>