Kompatibilität:

WebSite X5 Evo und Pro from v.2025.1

Auf einer Webseite spielen Bilder eine wichtige Rolle: Sie können Inhalte vermitteln, helfen, den begleitenden Text zu erklären, oder einfach dazu dienen, eine angenehme und einladende Atmosphäre zu schaffen, indem sie Gefühle und Emotionen transportieren.


Aber was passiert, wenn ein Benutzer die Bilder nicht sehen kann, die wir auf unseren Seiten eingefügt haben? Dies kann entweder auf Sehbehinderungen oder auf technische Probleme beim Laden der Bilder zurückzuführen sein.


Um die Seiten deiner Website barrierefrei zu gestalten, solltest du sie mit einem Alternativtext (ALT-Text) versehen. Dieser kann von Screenreadern für sehbehinderte Nutzer vorgelesen oder vom Browser angezeigt werden, falls die Bilddatei nicht geladen werden kann.


Aus technischer Sicht ist das Einfügen eines Alternativtextes ganz einfach:

  • Öffne das Bild-Einstellungsfenster für das Bild, das du bearbeiten möchtest.
  • Im Bilddatei-Feld, das du für den Import der Grafikdatei verwendet hast, findest du die -Schaltfläche. Klicke darauf, um das Barrierefreiheitsfenster zu öffnen.
  • Wenn das Bild rein dekorativ ist, benötigt es keinen Alternativtext. Allerdings sollte es im HTML-Code korrekt als dekoratives Element gekennzeichnet und mit einem leeren ALT-Attribut versehen werden. Um dies zu erreichen, aktiviere die Option Dekoratives Element.
  • Falls das Bild eine funktionale Rolle auf der Seite spielt, die über reine Ästhetik hinausgeht, stelle sicher, dass die Option Dekoratives Element NICHT aktiviert ist und gib einen passenden Titel und Alternativtext in die entsprechenden Felder ein.


#tip - Um mehr über Barrierefreiheit zu erfahren, zu verstehen, wann ein Bild dekorativ ist, und zu lernen, wie man einen Alternativtext richtig verfasst, siehe Wie man Alternativtext für nicht-textuelle Inhalte auf Webseiten schreibt. 


Die Schaltfläche zum Öffnen des Barrierefreiheitsfensters im Bilddatei-Feld kann zwei verschiedene Zustände haben:

  •  - Dunkelgrau → Zeigt an, dass noch kein ALT-Text eingegeben wurde: Klicke auf die Schaltfläche, um ihn hinzuzufügen.
  •  - Blau → Zeigt an, dass bereits ein ALT-Text eingegeben wurde: Du kannst dennoch erneut auf die Schaltfläche klicken, um ihn zu bearbeiten.