Skip to main content

Barrierefrei im Internet: Worauf muss bei der Optimierung für Screenreader geachtet werden


PDF herunterladen

Internet für alle – Darauf müsst ihr bei der Optimierung für Screenreader achten

Mann mit Blindenstock auf der Straße
Auch im Internet ist Barrierefreiheit wichtig.

Barrierefrei. Inklusion. Leichte Sprache. All diese Begriffe gewannen während der letzten Jahre immer mehr Bedeutung und dank der gewissenhaften Aufklärungsarbeiten unzähliger Initiativen, Organisationen und der Betroffenen selbst wurde ein großer Schritt in Richtung barrierefreies Leben gemacht sowie eine breitere Teilhabe von Menschen mit Behinderungen geschaffen. Und dazu zählen nicht nur eine Rollstuhlrampe am Hauseingang, akustische Signale zur Orientierung oder Übersetzungen in Gebärdensprache während der Nachrichten.


Menschen mit Einschränkungen nutzen außerdem, genauso wie Menschen ohne Einschränkungen, das Internet. Der Begriff „barrierefreies Internet“ umfasst dabei eine Webseitengestaltung, die keine speziellen Versionen für Menschen mit Behinderungen aufweist, und dennoch solchen Menschen die Möglichkeit bietet, sich die Informationen ohne fremde Hilfe über jene Internetseite zu beschaffen.


Unternehmen, die auch online Barrierefreiheit durchsetzen, sprechen sich für soziale Inklusion aus und erweitern zugleich ihren Kundenkreis. Sie demonstrieren mit der Erfüllung eines hohen technischen Standards ihre eigene Online-Kompetenz sowie eine nachhaltige Browser- und Gerätekompatibilität – auch zum Vorteil der Suchmaschinenoptimierung.

Wie wird eine Webseite barrierefrei?

Damit eine Webseite als barrierefrei bezeichnet werden kann, sollte sie es Usern mit beeinträchtigter Seh- und Hörfähigkeit, körperlichen oder kognitiven Behinderungen ermöglichen, die Webseite so zu erleben, wie es vorgesehen ist und sich alle nötigen Informationen der Webseite selbstständig zu beschaffen.

Dazu zählen beispielsweise:

  • Lesen und Erkennen von Texten auf farbigen Hintergründen
  • Links ohne Mausklick auswählen
  • problemlose Navigieren auf einer Seite mit einem Screenreader

Außerdem sollen die Menschen in der Lage sein, selbstständig Formulare auszufüllen und sich Zugang zu Lerninhalten zu beschaffen.

Blinde oder sehbehinderte Menschen verwenden Screenreader

Viele Menschen mit einer Sehbehinderung verwenden zum Lesen einer Webseite sogenannte Screenreader, die ihnen die Texte vorlesen. Solche Funktionen sind äußerst sinnvoll, stoßen aber bei verschiedenen Elementen auf einer Webseite an ihre technischen Grenzen. So sind klickbare Grafiken wie Karten für blinde Menschen nicht zu bedienen und Filme benötigen eine eingebettete Tonspur, bestenfalls mit Kommentaren für Sehbehinderte.

Auch Abbildungen können Schwierigkeiten bereiten. Doch bei Abbildungen und Bildern kann mit Hilfe des „alt-Attributs“ Abhilfe geschaffen werden. Auch bekannt als Alternativtext beschreibt dieser Tag in Worten, was auf dem Bild oder der Abbildung zu sehen ist.

Captchas vermeiden

Captcha-Schriftzug auf einem Notebook Screen
Auch Captchas müssen barrierefrei gestaltet werden.

Zudem solltet ihr die Einbettung von Captchas – kleine Rätsel oder Codes, die vom User gelöst bzw. eingegeben werden müssen, um auf die Webseite zu gelangen – vermeiden. Diese Verfahren dienen dazu, echte Nutzerinnen und Nutzer von automatisierter Werbung zu unterscheiden. Eines der größten Probleme im Zusammenhang mit Barrierefreiheit ist, dass sich die meisten Captchas auf eine bestimmte Sinneswahrnehmung verlassen. User, die bezüglich eines Sinnes Einschränkungen haben, werden also von Captcha-geschützten Webseiten ausgeschlossen.

Lösungen für die barrierefreie Vermittlung visueller Informationen

Um visuelle Informationen, die mit Bildern oder Grafiken dargestellt werden, auch uneingeschränkt für Menschen mit Behinderungen zugänglich zu machen, muss eine Alternative geschaffen werden, die dem gleichen Zweck wie die Grafik oder das Bild dient: Informationen zu übermitteln.

Doch bevor ihr solche „gleichwertigen Alternativen“ schafft, solltet ihr euch über folgende Dinge klar sein:

  1. Soll über das Bild oder die Grafik eine Information mitgeteilt werden?
  2. Schafft das Bild eine visuelle Erfahrung oder stellt es eine bestimmte Stimmung dar?
  3. Dient das Bild lediglich zur Dekorationszwecken und beinhaltet keinerlei Informationen?

Vermitteln die Bilder oder Grafiken wichtige Informationen, so sollten diese Informationen unbedingt in Worte gefasst werden. Dabei sollte darauf geachtet werden, dass sich die Verschriftlichung des Bildes auf 40 – 80 Zeichen beschränkt. Denn diese Zeichenanzahl bestimmt die Standardbreiten der kommerziell verfügbaren Braillezeilen. Beschränkt der Verfasser den Alternativtext auf diese 40 – 80 Zeichen, bleibt die Darstellung mit 1 – 2 Zeilen auch für blinde Menschen übersichtlich.

Kurzbeschreibung

Für diese „Kurzbeschreibung“ des Bildes wird in HTML beim Einfügen des Bildes das img-Element verwendet. Dabei muss die Kurzbeschreibung als Wert des alt-Attributs eingetragen werden:

<img src=“Bilddateil.jpg“ alt=“Dies ist eine Kurzbeschreibung“>

Wie ihr in diesem Beispiel seht, ersetzt das alt-Attribut das Bild bei allen Ausgaben, bei denen das Bild selbst nicht angezeigt werden kann.

Das müsst ihr beim Alternativtext beachten

Ein guter Alternativtext bildet die Grundlage einer guten Textalternative. Vor dem Erstellen einer Textalternative sollten jedoch die folgenden Fragen geklärt werden:

  1. Warum ist dieses Bild hier?
  2. Welche Informationen bietet es an?
  3. Welchen Zweck erfüllt es?
  4. Welche Worte sollten gewählt werden, um die gleichen Informationen zu vermitteln, wie sie auf dem Bild dargestellt sind?

Verschiedene Bildbeschreibungen für gleiche Bilder beachten

Beim Verfassen von Textalternativen für Bilder sollte außerdem stets die Webseite und somit auch der Kontext beachtet werden, in die das Bild oder die Grafik eingebettet ist.

Beispielsweise sollte das Bild eines Hauses in einem Fachmagazin für Architektur anders beschrieben werden als dasselbe Haus auf einer Webseite für Hochzeitslocations oder Urlaubswohnungen.

Daher ist es schwierig, Alternativtexte pauschal von einer Bildredaktion vergeben zu lassen, die die Bilder samt Alternativtext in einer Datenbank für die spätere Verwendung der unterschiedlichsten Kunden gespeichert hat.

Rein dekorative Bilder und Grafiken tragen keinerlei relevante Informationen für die Webseite und sind daher auch für Menschen mit Sehbehinderungen nicht notwendig. Screenreeder sollen diese dekorativen Elemente daher ebenfalls ignorieren, weswegen das Verfassen eines Alternativtexts überflüssig ist.

Diese Fehler gilt es zu vermeiden

Im Alternativtext gilt es, überflüssige Informationen wie „auf diesem Bild sehen Sie…“ oder „wenn Sie hier klicken, kommen Sie zurück zur Startseite“ zu vermeiden. Das „überflutet“ die Screenrederausgabe mit überflüssigen Inhalten. Außerdem dürfen bei Dekografiken die alt-Attribute nicht einfach weggelassen werden. Das alt-Attribut muss verwendet werden, jedoch bleibt es einfach leer.


Mit diesen einfachen Tricks verhelft ihr blinden und sehbehinderten Menschen schon zu mehr Teilhabe und zu einem selbstständigen Umgang mit dem Internet. Ihr habt Fragen bezüglich der alt-Attribute oder generell zum Thema Webseiten-Optimierung? Dann sprecht uns gerne an!

Titelbild © Halfpoint / stock.adobe.com

Beitragsbild © MclittleStock / stock.adobe.com

Kommentare

Finde ich enorm wichtig. Ich habe neulich einen Artikel zu SEO und Barrierefreiheit gelesen, seitdem beschäftige ich mich selbst mit Barrierefreiheit. https://www.netz-barrierefrei.de/wordpress/suchmaschinenoptimierung-was-seos-von-der-barrierefreiheit-lernen-koennen/
Der Autor ist glaube ich selber blind und das merkt man daran, wie engagiert er beim Thema ist

Gruß Felix

Lars Stetten von RundumSichtbar

Sehr schöner Artikel. Als blinder SEO Berater bin ich sehr froh, daß dank der Content Management Systeme eine gewisse Basis-Barrierrefreiheit meist vorhanden ist. Noch ein kleiner Hack für Webseitennutzer, schaltet mal JavaScript ab und schaut, ob euer Menü noch vollständig nutzbar ist. Häufig sind Unterpunkte in Menüs nur schwer oder garnicht zugänglich.


Hast du eine Frage oder Meinung zum Artikel? Schreib uns gerne etwas in die Kommentare.

Ihre E-Mail Adresse wird nicht veröffentlicht

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Beiträge

BVDW Zertifikat SEO-Küche

Die SEO-Küche erhält das BVDW-Qualitätszertifikat SEO

  • oliver lindner
  • von Oliver Lindner
  • 27.06.2022

Suchmaschinenoptimierung ausgezeichnet mit dem BVDW-Zertifikat Das ist ein Grund zum Feiern: Die SEO-Küche wurde vom Bundesverband Digitale Wirtschaft e.V. (BVDW) mit dem SEO-Qualitätszertifikat ausgezeichnet. Nach einer ausführlichen und unabhängigen Prüfung, bei der eine Jury die Qualität unserer Arbeit nach verschiedenen Kriterien bewertet hat, haben wir das begehrte Zertifikat erhalten. Im […]

OMT Agency Day 2022

OMT Agency Day 2022 – Recap mit allen wichtigen Kernaussagen

  • rainer winkler
  • von Rainer
  • 25.06.2022

Am 24.06.2022 war es wieder soweit: pünktlich um 09:45 startete der Gastgeber Mario Jung mit der Begrüßung zum diesjährigen OMT-Agency Day in der Pyramide-Mainz Eventlocation.  Der Agency-Day wurde ins Leben gerufen, um Herausforderungen innerhalb der Online-Marketing-Branche zu besprechen und voneinander zu lernen. Wir waren für euch vor Ort und haben […]

nexus recap 2022 händlerbund

NEXUS Leipzig 2022 – Recap / Nachbericht mit allen wichtigen Infos

  • Jascha
  • von Jascha Ebert
  • 18.06.2022

Sommer, Sonne, NEXUS! Am Samstag, dem 18.06.2022 lud der Händlerbund Mitglieder, Interessierte und Aussteller zur Nexus-E-Commerce-Messe nach Leipzig. Neben zahlreichen Ständen konnten die Besucher zudem viele interessante Vorträge rund um das Thema E-Commerce besuchen. Unsere Kollegen von der SEO-Küche waren selbst als Aussteller dabei und haben euch die Eindrücke vor […]

Wird auch oft gesucht Google Funktion

Die Funktion „Wird auch oft gesucht“ bei Google

  • Narin
  • von Narin Ciftci
  • 16.06.2022

So funktioniert Google Autocomplete Das Feature „Wird auch oft gesucht“ von Google ist unter verschiedenen Begriffen wie ,,Google Suggest“ oder auch „Google Autocomplete“ bekannt. In den USA wurde sie 2008 und im darauf folgenden Jahr in Deutschland eingeführt. Es handelt sich um eine Funktion, mit welcher bereits bei der Worteingabe […]

Quelltext anzeigen Stage

Quelltext einer Webseite anzeigen lassen

  • Manuel Grosser
  • von Manuel Grosser
  • 08.06.2022

Quelltext anzeigen: So geht es in Firefox, Chrome, Edge und Opera Für die meisten von uns bietet eine Webseiten-Oberfläche alles, was man benötigt. Die Texte und Inhalte sind gut lesbar und meist auch gut einsehbar. Doch was, wenn die Inhalte mal nicht so angezeigt werden wie man sich das erhofft? […]

Ticket Rabatt Nexus 2022

Die SEO-Küche auf der NEXUS 2022 in Leipzig

  • christoph pawletko
  • von Christoph
  • 31.05.2022

Das 360°-E-Commerce Event für Online-Händler und Partner Die NEXUS 2022 steht unter dem Motto *Community Edition*. Teilnehmer können am 18.06.2022 vor Ort in Leipzig oder digital vor dem Bildschirm dabei sein. Mit 5 Bühnen und 4 Themenwelten gibt es einen Tag volles E-Commerce-Programm in einer einzigartigen Atmosphäre. Interesse? Wir bieten […]