Web-Content: 3 Tipps für verbesserte Web Accessibility

Daumen-hoch Bild: sutadimages auf shutterstock.com
Barrierefreiheit für Content-Manager:
Was Sie bei Bilder und Videos beachten können.

30. Juli 2020 | 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.
  • 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.«
Ideale Länge des Alternativtextes: Kurz und knackig und damit max. 1-2 Sätze

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 >
Text auf einem Bild zur Illustration, wie es aus Barrierefreiheit-Sicht nicht gemacht werden sollte. So sollte das Bild für die Barrierefreiheit nicht aussehen. (Bild: StockSnap von Pixabay)

#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.>

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.



Frau blickt in die Kamera: Theresa Memelauer
Ü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.
Elisabeth Hammerschmid
Ü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.

What‘s new?

Marketing

Livechat vs. Chatbot

30. September 2020 |  Wir erklären die Unterschiede zwischen einem Live Chat und einem Chatbot und geben Ihnen Tipps, wie Sie diese auf Ihrer Webseite integrieren können.
Johannes Kerbl, Rechtsanwalt in Wien, blickt in die Kamera
Sicherheit

Urheberrecht und Bildrechte auf Websites

24. September 2020 | In Sachen Bildmaterial auf Websites gibt es einige rechtliche Aspekte zu beachten. Wir haben dazu mit Rechtswalt Johannes Kerbl einige Fragen besprochen, die im Agentur-Alltag immer wieder auftauchen.
Screenshot der WACA.at-Website mit den gelisteten Unternehmen/Organisationen
Agentur.Leben

Q2E auf waca.at in bester Gesellschaft

29. Juli 2020 | Als erste Digital-Agentur Österreichs sind wir jetzt auch offiziell auf waca.at gelistet und genießen hier beste Gesellschaft: REWE Group, ÖBB, WKO & Co.
Melanie Sauprigl lächelt in die Kamera.
Agentur.Leben

Wie Melanie als Q2E-Newbie unsere Arbeit wahrnimmt

10. Juli 2020 | Weil wir uns laufend verbessern möchten, hat sich Agentur-Geschäftsführer Josef »Joe« Hörersdorfer mit Q2E-Newbie Melanie unterhalten, wie sie unsere Entwickler-Arbeit wahrnimmt und was sie an der Agentur bisher am meisten schätzt.
Das gesamte Team rund um die Torte.
Agentur.Leben

We ❤ WACA

23. Juni 2020 | Als 1. Agentur Österreichs ließen wir unsere Website mit dem Prädikat SILBER zertifizieren: Ein Grund zum Feiern.
Katharina Holland
Marketing

XING und LinkedIn

17. Juni 2020 | XING und LinkedIn sind als weitverbreitete und bekannte Social Media-Plattformen heute kaum mehr wegzudenken. Nutzen Sie Xing und LinkedIn für die erfolgreiche Unternehmenspräsentation, um die Sichtbarkeit Ihres Unternehmens online zu erhöhen.