3 Tipps für barrierefreie Inhalte auf Websites
10.11.2021 • aktualisiert am 25.04.2022
Wird von Barrierefreiheit gesprochen, denken viele zunächst an die technische Dimension der Web Accessibility: Screenreader-Tauglichkeit, Kontrastumschaltung, Schriftgrößen-Änderungen und vieles mehr. Oft wird vergessen, dass Barrierefreiheit auch die inhaltliche Dimension – und damit den Content von Website/Webshop selbst – betrifft, also Bilder & Texte. Wir zeigen Ihnen 3 einfache Maßnahmen, die Sie – ganz ohne Programmierkenntnisse – im Handumdrehen erledigen und damit große Wirkung für die Zugänglichkeit Ihrer Website erzielen können.
#1 Bilder auf der Website: Alternativtexte für sehbeeinträchtigte Menschen
Machen Sie Bilder für blinde oder sehbeeinträchtigte Menschen wahrnehmbar.
Was ein Alternativtext ist: Kurze Beschreibung des Bildes, die vom Screenreader ausgelesen wird. Das rein optische Bild erhält mit dem Alternativtext eine auditive Dimension und wird damit auch sehbeeinträchtigten oder blinden Menschen zugänglich.
Wie erstelle ich einen Alternativtext? Überlegen Sie, was Sie auf dem Bild sehen. Versuchen Sie das Bild kurz zu beschreiben.
Benötigen alle Fotos Alternativtexte? Grundsätzlich, ja. Wenn Sie jedoch viele Layoutgrafiken (z.B. Stockfotos) als Image-Bereiche auf Ihrer Website einbinden, brauchen diese nicht alle zwingend einen Alternativtext. Alternativtexte sollten Sie bei Teambildern, Info-Grafiken oder ähnlichen Bildern hinterlegen.
Was ist der Unterschied zum Bilduntertitel? Eines vorweg: Alternativtexte sind nicht gleich Bilduntertitel. Bilduntertitel sind zusätzliche Informationen zum Bild, beispielsweise Personennamen. Alternativtexte beschreiben das Bild-Sujet selbst. Halten Sie sich das bitte immer vor Augen.
Was ein Alternativtext ist: Kurze Beschreibung des Bildes, die vom Screenreader ausgelesen wird. Das rein optische Bild erhält mit dem Alternativtext eine auditive Dimension und wird damit auch sehbeeinträchtigten oder blinden Menschen zugänglich.
Wie erstelle ich einen Alternativtext? Überlegen Sie, was Sie auf dem Bild sehen. Versuchen Sie das Bild kurz zu beschreiben.
- Beispiel: Wenn Sie eine Sommeransicht der Mostviertler Landschaft mit Birnbäumen sehen, könnten Sie schreiben: »Landschaft mit Obstbäumen im Mostviertel bei Sonnenschein.«
- Beispiel: Bei einem Referenzfoto eines geschmiedeten Metallzaunes im Garten, den sie in Handarbeit hergestellt haben, könnten Sie beispielsweise diesen Text wählen: »Ansicht eines Gartenzauns in Schmiedeeisen, handgefertigt.«
Benötigen alle Fotos Alternativtexte? Grundsätzlich, ja. Wenn Sie jedoch viele Layoutgrafiken (z.B. Stockfotos) als Image-Bereiche auf Ihrer Website einbinden, brauchen diese nicht alle zwingend einen Alternativtext. Alternativtexte sollten Sie bei Teambildern, Info-Grafiken oder ähnlichen Bildern hinterlegen.
Was ist der Unterschied zum Bilduntertitel? Eines vorweg: Alternativtexte sind nicht gleich Bilduntertitel. Bilduntertitel sind zusätzliche Informationen zum Bild, beispielsweise Personennamen. Alternativtexte beschreiben das Bild-Sujet selbst. Halten Sie sich das bitte immer vor Augen.
- Beispiel: Auf einem Bild vom Roten Kreuz sehen Sie 3 Team-Mitglieder vor einem Auto stehen.
Alternativtext: »3 Menschen stehen vor einem Rettungsauto.«
Bilduntertitel: »V.l.n.r.: Mag. Max Mustermann, Karl Huber, Klaus Müller«
#2 Bilder auf der Website: Sorgfältige Auswahl und Texte auf Bilder vermeiden
Wählen Sie Bilder für Ihre Website aus, die alle Menschen wahrnehmen können.
Screenreader leisten wertvolle Arbeit und machen Texte in vielen Fällen wahrnehmbar. Doch auch sie haben Grenzen. Was sie nämlich nicht können: Das Bildsujet selbst oder Texte auf einem Bild verstehen.
Wer schlecht sieht, kann sich auf Websites üblicherweise mit 2 Methoden helfen, um Website-Texte besser wahrnehmen zu können: mithilfe der 1) Schriftgrößen-Umschaltung oder per 2) Kontrastumschaltung.
Beide Möglichkeiten wirken jedoch leider nicht bei Bildern, die Text enthalten.
Wir haben also festgehalten, dass Text auf Bildern weder kontrastreicher noch größer angezeigt werden kann. »Normaler« Text auf einer Website kann jedoch für das sehbeeinträchtigte bzw. blinde Publikum durchs Vorlesen vom Screenreader wahrnehmbar gemacht werden.
Vor diesem Hintergrund wird verständlich, dass Sie Bilder, die Text enthalten, vermeiden sollten, wenn Ihnen Barrierefreiheit wichtig ist. Hier haben ein Beispiel für Sie, wie Sie es bitte nicht machen >
Screenreader leisten wertvolle Arbeit und machen Texte in vielen Fällen wahrnehmbar. Doch auch sie haben Grenzen. Was sie nämlich nicht können: Das Bildsujet selbst oder Texte auf einem Bild verstehen.
Wer schlecht sieht, kann sich auf Websites üblicherweise mit 2 Methoden helfen, um Website-Texte besser wahrnehmen zu können: mithilfe der 1) Schriftgrößen-Umschaltung oder per 2) Kontrastumschaltung.
Beide Möglichkeiten wirken jedoch leider nicht bei Bildern, die Text enthalten.
Wir haben also festgehalten, dass Text auf Bildern weder kontrastreicher noch größer angezeigt werden kann. »Normaler« Text auf einer Website kann jedoch für das sehbeeinträchtigte bzw. blinde Publikum durchs Vorlesen vom Screenreader wahrnehmbar gemacht werden.
Vor diesem Hintergrund wird verständlich, dass Sie Bilder, die Text enthalten, vermeiden sollten, wenn Ihnen Barrierefreiheit wichtig ist. Hier haben ein Beispiel für Sie, wie Sie es bitte nicht machen >
#3 Videos auf der Website: Bereitstellen der Inhalte als Text
Machen Sie Videos für blinde oder sehbeeinträchtigte Menschen wahrnehmbar.
Wenn Sie Videos barrierefrei bereitstellen möchten, benötigen Sie grundsätzlich 1) eine Audio-Description (vollumfängliche Beschreibung der Bildwelten und Video-Abläufe zum Lesen und Anhören) sowie 2) vollständige Untertitel (Gesprochenes wird als Text im Video bereitgestellt).
Haben Sie beides nicht zur Verfügung und möchten die Barrierefreiheit Ihrer Website dennoch verbessern, sollten Sie zumindest eine Zusammenfassung des Videos als Text bereitstellen, das auch das Gesprochene beinhaltet.
Videos an sich sind für Screenreader nicht auslesbar, »normaler« Text auf einer Website jedoch schon. Wenn Sie also eine Zusammenfassung des Videos bereitstellen – was relativ einfach für Sie ist – hat das große Wirkung: Denn es bedeutet, dass Ihre Videos mit wenig Aufwand für alle Menschen gleichermaßen zugänglich werden.
Fragen Sie sich folgendes: Ist die wichtigste Information als Text auf Ihrer Website zu finden, auch wenn das Video nicht verfügbar ist? ... Können Sie diese Frage mit »Ja« beantworten, ist Ihr Text ausreichend ...
Wie immer wünschen wir Ihnen viel Spaß & Erfolg und stehen bei Fragen bereit: <Diese E-Mail-Adresse ist gegen Spam Bots geschützt, zum Ansehen müssen Sie in Ihrem Browser JavaScript aktivieren.>
Wenn Sie Videos barrierefrei bereitstellen möchten, benötigen Sie grundsätzlich 1) eine Audio-Description (vollumfängliche Beschreibung der Bildwelten und Video-Abläufe zum Lesen und Anhören) sowie 2) vollständige Untertitel (Gesprochenes wird als Text im Video bereitgestellt).
Haben Sie beides nicht zur Verfügung und möchten die Barrierefreiheit Ihrer Website dennoch verbessern, sollten Sie zumindest eine Zusammenfassung des Videos als Text bereitstellen, das auch das Gesprochene beinhaltet.
Videos an sich sind für Screenreader nicht auslesbar, »normaler« Text auf einer Website jedoch schon. Wenn Sie also eine Zusammenfassung des Videos bereitstellen – was relativ einfach für Sie ist – hat das große Wirkung: Denn es bedeutet, dass Ihre Videos mit wenig Aufwand für alle Menschen gleichermaßen zugänglich werden.
Fragen Sie sich folgendes: Ist die wichtigste Information als Text auf Ihrer Website zu finden, auch wenn das Video nicht verfügbar ist? ... Können Sie diese Frage mit »Ja« beantworten, ist Ihr Text ausreichend ...
Wie immer wünschen wir Ihnen viel Spaß & Erfolg und stehen bei Fragen bereit: <Diese E-Mail-Adresse ist gegen Spam Bots geschützt, zum Ansehen müssen Sie in Ihrem Browser JavaScript aktivieren.>
Gibt’s dazu noch mehr zu erfahren? – Ja, klar!
Wir geben gerne unser Wissen und unsere Erfahrungen weiter. Maßgeschneiderte Empfehlungen und Lösungen für die individuelle Online-Strategie gibt′s natürlich für alle unsere KundInnen (und alle, die es noch werden wollen) im Rahmen einer persönlichen Beratung in St. Pölten und Amstetten.
Über die Autorin · Theresa Memelauer
Die Medientechnikerin (FH) und Frontend-Entwicklerin Theresa ist seit 2010 in der Agentur. Als »Certified WebAccessibility Expertin« beschäftigt sie sich damit, wie Websites bestmöglich nutzerfreundlich (User-Interface-Design) und im Sinne der Barrierefreiheit im Internet für alle zugänglich werden. Sie setzt Webprojekte mit dem hauseigenen CMS EDWIN gemäß den aktuellen Richtlinien nach WCAG um.
Theresa kennenlernen
Die Medientechnikerin (FH) und Frontend-Entwicklerin Theresa ist seit 2010 in der Agentur. Als »Certified WebAccessibility Expertin« beschäftigt sie sich damit, wie Websites bestmöglich nutzerfreundlich (User-Interface-Design) und im Sinne der Barrierefreiheit im Internet für alle zugänglich werden. Sie setzt Webprojekte mit dem hauseigenen CMS EDWIN gemäß den aktuellen Richtlinien nach WCAG um.
Theresa kennenlernen
Über die Autorin · Elisabeth Hammerschmid
Mit ihrem Studium an der AMU Wieselburg zum Thema Marketing-Forschung hat sie vielfältige Ausbildungsinhalte erworben und bildet sich seither intensiv in Sachen Content Marketing weiter. Als Agentur-Projektmanagerin (seit 2015) kann sie ihre vielfältigen Interessen und Liebe zur Abwechslung bei Kundenprojekten und in der Agentur-Kommunikation verwirklichen.
Elisabeth kennenlernen
Mit ihrem Studium an der AMU Wieselburg zum Thema Marketing-Forschung hat sie vielfältige Ausbildungsinhalte erworben und bildet sich seither intensiv in Sachen Content Marketing weiter. Als Agentur-Projektmanagerin (seit 2015) kann sie ihre vielfältigen Interessen und Liebe zur Abwechslung bei Kundenprojekten und in der Agentur-Kommunikation verwirklichen.
Elisabeth kennenlernen