Accessibility: Jede Webseite profitiert von Barrierefreiheit

Eine Person benutzt eine Braille-Zeile

Das Internet ist ein Netzwerk der neuen Möglichkeiten. In Bruchteilen von Sekunden reisen die Benutzer um die Welt. Informationen zu allen erdenklichen Bereichen von Politik, Gesellschaft, Kultur und Wissenschaft sind zugänglich. Waren und Dienstleistungen können mit wenigen Klicks bestellt werden. Kurzum: Das Internet bietet unbegrenzte Möglichkeiten. Doch nicht für jeden! Viele Menschen sind von der Nutzung des Internets ausgeschlossen, weil körperliche und geistige Einschränkungen die Benutzung in weiten Teilen unmöglich machen.

Technische Hilfsmittel

Blinde Menschen können den Bildschirm nicht sehen. Sie sind auf technische Hilfsmittel angewiesen. Eine Braille-Zeile kann beispielsweise Texte der Internetseite in Blindenschrift übersetzen. Mit Screenreader kann der Text vorgelesen werden. Gehörlose oder stark hörgeschädigte Internetnutzer können Musik, Töne und Signale nicht wahrnehmen. Wichtige Signaltöne müssen durch technische Hilfsmittel in Lichtsignale verwandelt werden. Menschen mit Einschränkungen im Bewegungsapparat stoßen bei der Bedienung eines Computers mit Tastatur und Maus oftmals an ihre körperlichen Grenzen. Hier können spezielle Eingabegeräte wie D-Pads und Trackballs helfen.

Doch all diese technischen Hilfsmittel lassen sich nur dann wirkungsvoll einsetzen, wenn die Internetseite barrierefrei gestaltet ist. Damit ein Screenreader die Texte einer Webseite sinngemäss vorlesen kann, müssen die Inhalte in einem geeigneten Format verfasst sein. Ebenso sollte bei jedem Bild im img-Tag ein alternativer Text hinterlegt werden, der beschreibt, was zu sehen ist. Kommt ein Screenreader zum Einsatz, wird dem blinden Menschen dieser Alternativtext vorgelesen.

Das sollten Sie für ein barrierefreies Internet beachten!

Es gibt eine Fülle von Aspekten, die hinsichtlich der Barrierefreiheit von Webseiten beachtet werden sollten, um niemanden von der Nutzung auszuschließen.

  1. Grundsätzlich gilt: Alle Inhalte der Webseite müssen als Text verfügbar sein. Das gilt für die bereits erwähnte Bildbeschreibung ebenso wie für eine Beschreibung von Musik und Tönen, die auf der Webseite verwendet werden. Hörgeschädigte Nutzer wissen es zu schätzen, wenn ein Lied auf der Internetseite nicht nur angehört werden, sondern zugleich der Text verfügbar ist.
  2. Sehbehinderte Menschen kann die Reise ins Internet erheblich vereinfacht werden, wenn die Internetseite kontrastreich gestaltet ist. Doch Achtung: Die aktuell verbreitete Mode, helle Schrift auf dunklen Grund zu setzen, schafft zwar vergleichsweise große Kontraste, ist aber schwerer lesbar!
  3. Wer zittert und keine Maus bedienen kann, freut sich, wenn man mit Tastatur, D-Pad oder Trackball navigieren kann. Da die Bedienung mit diesen Hilfsmitteln oft sehr langsam erfolgt, sollte keine Internetseite Timer laufen lassen und den Benutzer zum schnellen Handeln zwingen.
  4. Ist man per Tabulator-Taste unterwegs, gibt es kein links uns kein rechts, nur ein vor und zurück. Dies nennt man lineare Navigation. Das bedeutet, dass man nur von Element zu Element navigieren kann, gemäss dem HTML Seitenaufbau.
  5. Eine logische Struktur und eine klare Übersicht, wo sich er Benutzer gerade befindet, erleichtern die Orientierung auf der Webseite enorm, sodass allein dadurch viele Barrieren von der Internetseite verschwinden.
  6. Oft ist es hilfreich, bei Eingaben eine Bestätigung zu verlangen, sodass die Nutzer die eingegebenen Daten noch einmal überprüfen können. So lassen sich Fehler und Ärgernisse vermeiden.
  7. Die wenigsten Webseiten richten sich ausschliesslich an Mediziner oder Anwälte: Behalten Sie daher die Leserlichkeit bzw. Schwierigkeit Ihres Textes im Auge, sodass möglichst alle etwas damit anfangen können.

Hier haben wir versucht, die Bedeutung der Navigation für SEO, Benutzerfreundlichkeit und Accessibility in einem Beitrag aufzugreifen.

Technische Umsetzung

Die Umsetzung einer barrierefreien Internetseite kann mittlerweile auf viele unterschiedliche technische Mittel bei der Programmierung zurückgreifen.

HTML 5 unterstützt mit einer klaren Gliederung, Bildbeschriftungen und vielen HTML-Attributen die Barrierefreiheit. Besonders wichtig sind in jüngster Zeit zudem die ARIA-Attribute geworden, die immer dann zum Einsatz kommen, wenn HTML und Co. keine passenden Lösungen von Hause aus anbieten.

Stellen Sie sämtlichen Inhalt auch als Text bereit, denn nur dieser Inhalt, kann wirklich allen verfügbar gemacht werden. Bei Bildern nutzen Sie natürlich das altbewährte Alt-Attribut, wohingegen das HTML 5 Track-Tag ein wahrer Alleskönner ist, wenn es um die Verschriftlichung von Video- oder Audio-Inhalten geht. ARIA-Label funktioniert wie das Alt-Attribut, kann aber prima für Buttons und Icons oder andere Illustrationen verwendet werden. Mit ARIA-Labelledby oder ARIA-Describedby machen Sie Screenreadern klar, wo Bezeichnung und Beschreibung zu einem Inhalt zu finden sind, sofern Sie diese als eigenständige Elemente auf Ihrer Seite haben. Bei graphischen Darstellungen eignet sich ein Verpacken in einem Figure-Tag, worin Sie mit Figcaption eine Beschreibung dazu auszeichnen können.

Stellen Sie unbedingt sicher, dass alle Inhalte per Tabulator-Taste erreichbar sind – wir empfehlen Ihnen, ein Screenreader Add-On für Ihren Browser zu installieren, damit Sie die Zugänglichkeit in dieser Hinsicht selbst überprüfen können.

Testen Sie Ihre Inhalte auf ihre Leserlichkeit und wägen Sie ab, ob der Schwierigkeitsgrad wirklich dem Zweck des Textes entspricht. Beachten Sie auch Kontraste zwischen Text und Hintergrund, beispielsweise mit diesem Tool.

Hier finden Sie eine sehr umfangreiche Liste zu nützlichen Browsererweiterungen, mit welchen Sie die Zugänglichkeit Ihrer Webseite prüfen können.

Barrierefreiheit verbessert das Ranking

Viele Webseitenbetreiber fragen sich, ob sie den erheblichen Aufwand für eine barrierefreie Webseite auf sich nehmen wollen. Oftmals werden die notwendigen Ausgaben mit der Zahl der Besucher mit Einschränkungen ins Verhältnis gesetzt – im Ergebnis wird nicht selten festgestellt, dass sich das nicht lohnt. Doch diese Rechnung ist zu einfach und entspricht nicht der Realität.

Auf wen passt diese Beschreibung? Steife Hände, Gedächtnisprobleme, Hörschwäche, verlangsamtes Reaktionsvermögen und Schwierigkeiten beim lesen. Genau: Seniorinnen und Senioren. Schlussendlich betrifft Zugänglichkeit also nicht nur eine stetig wachsende Bevölkerungsgruppe, sondern irgendwann uns alle. Einige aufgrund von Krankheiten oder Unfällen sogar schon früher als andere. Als Webseitenbetreiber steht man in der sozialen Verantwortung, möglichst allen Menschen Zugang ins World Wide Web zu ermöglichen. Davon profitieren aber auch Sie. Immerhin könnten sich auch blinde Musikliebhaber an Hightech Soundanlagen aus Ihrem Online-Shop erfreuen, genauso wie so manch eine betagte Seniorin mit Freuden Ihre Gartenpflege-Dienste in Anspruch nehmen könnte.

Schlussendlich aber kommt Barrierefreiheit allen Nutzern zu gute. Viele gesunde und junge Internetnutzer schätzen den Komfort, der dadurch entsteht, dass Barrieren abgebaut werden. Die Verweildauer nimmt deutlich zu, die Konversionsrate steigt. Denken Sie stets an die Bedeutung der Benutzerfreundlichkeit.

Google und Co. wissen, dass barrierefreie Seiten besucherfreundlicher sind. Darum bewerten die Algorithmen der Suchmaschinen barrierefrei gestaltete Internetseiten deutlich besser als Webseiten, die auf diese Gestaltungsmerkmale verzichten. Google selbst setzt sich immer mehr dafür ein, das Internet allen Menschen gleichermassen zugänglich zu machen. Vor diesem Hintergrund lohnt es sich gleich doppelt, in die Barrierefreiheit der Internetseite zu investieren.

Inhaltsverzeichnis und SEO

Collage verschiedener Inhaltsverzeichnisse

Was haben die Seiten von Google Support, Wikipedia, W3C und Mozilla Developer gemeinsam? Richtig: Das Inhaltsverzeichnis.

Warum ist das Inhaltsverzeichnis wichtig für die Suchmaschinenoptimierung? Usability, Accessibility & Rich Results!

Google liebt strukturierte Daten und Inhalte, die dem Besucher den grösstmöglichen Nutzen bieten. Ein Text mit einem gut strukturierten Inhaltsverzeichnis tut das. Er ermöglicht dem Nutzer, die Inhalte eines Textes auf den ersten Blick zu überschauen und dessen Nutzen schnell einzuschätzen. Ausserdem muss der Nutzer nicht den ganzen Text lesen oder ewig scrollen, sondern kann gleich zu einer Stelle springen, die ihm besonders interessant erscheint. Denn im Gegensatz zu dem Inhaltsverzeichnis eines Buches, werden hier keine Seitenzahlen, sondern Sprungmarken, also Anker-Links, bereitgestellt, welche den User direkt zu den betreffenden Überschriften führen. Wenn man auf einen Ankerlink klickt, wird die URL oben im Browserfenster entsprechend um die Sprungmarke erweitert. Wenn diese URL dann geteilt oder gespeichert wird, landen die Besucher durch diese dann an exakt diesem Sprungziel.

Apropos strukturierte Daten: Google erkennt Inhaltsverzeichnisse als solche und kann daraus unter Umständen auch ein Rich Result generieren. Nachfolgend haben wir Ihnen gleich zwei Varianten herausgesucht:

(mehr …)

Mit Rich Results die Suchergebnisse aufpeppen

Flüge, Stellenanzeigen oder das Wetter: In immer mehr Bereichen beantwortet Google Suchanfragen direkt über Rich Results: User müssen nicht mehr auf eine bestimmte Seite klicken, sondern erhalten das gewünschte Ergebnis direkt in der Suchliste. Lesen Sie hier, wie Sie Ihre Inhalte mit höherer Wahrscheinlichkeit in die Rich Results katapultieren.

Voraussetzung für Rich Results: Strukturierte Daten

Es gibt kein Patentrezept, wie man es mit der eigenen Website in die Rich Results schafft. Eine Voraussetzung sind allerdings strukturierte Daten. Darunter versteht man HTML-Attribute im Quelltext, die bestimmte Elemente auszeichnen – zum Beispiel als Preis, Beschreibung, Autor etc. So kann die Suchmaschine die Informationen zuordnen und direkt in den SERPs ausspielen. Man nennt die HTML-Tags auch Mark ups. Die jeweiligen Tags finden Sie auf schema.org.

Tipp: Mit diesem Testtool können Sie prüfen, ob Sie Ihre strukturierten Daten korrekt ausgezeichnet haben.

Beispiele für Rich Results

Zur Veranschaulichung haben wir ein paar Beispiele von möglichen Rich Results zusammengestellt.

Rich Results für Produkte

Wenn Sie zum Beispiel einen Online-Shop betreiben, können Sie einzelne Produkte auszeichnen. So steigern Sie die Chance, dass diese in den Rich Results in den Google Shopping Ergebnissen ausgespielt werden. Folgende Properties können Sie unter anderem vergeben:

  • Preis
  • Beschreibung
  • Name
  • Verfügbarkeit

Rich Results für Bücher

Auch Google Books greift auf Mark ups zurück. Neben Eckdaten wie Titel, ISBN oder Seitenanzahl können Sie Zitate, Charaktere oder den Handlungsschauplatz auszeichnen. Zu den wichtigsten Tags zählen:

  • Autor
  • About (kurze Beschreibung des Themas)
  • Abstract/Klappentext
  • Genre
  • Verlag

Rich Results für Rezepte

Vom Pfannkuchenteig über eine vegane Bowl bis hin zum Sonntagsbraten gibt es auch Rich Results in der Kategorie Rezepte. Folgende Auszeichnungen sollten Sie nutzen:

  • Name des Gerichts
  • Zubereitungszeit
  • Sterne-Bewertung (falls vorhanden)
  • Zutaten
  • Schritt-für-Schritt-Anleitung
  • Nährwerte

Rich Results für Personen

Löst Google auch bald Facebook ab? Mit den Rich Results für Personen hat die Suchmaschine zumindest ein Personenverzeichnis geschaffen. Folgende Attribute sind unter anderem möglich:

  • Gender
  • Geburtstag
  • Geburtsort
  • Letzte Schule/Hochschule
  • Preise und Auszeichnungen
  • Adresse, E-Mail, Telefonnummer etc.

Rich Results für Orte

Die Auszeichnungen im Bereich Google Places ist vor allem für Geschäfte und Restaurants sinnvoll. Sie werden bei Google Maps ausgespielt und sind eine Art lokales Branchenverzeichnis. Nutzen Sie diese Properties:

  • Adresse
  • Öffnungszeichen
  • Branche
  • Events
  • Sterne-Bewertungen (falls vorhanden)
  • Telefonnummer, Website, etc.

Rich Results für Bewertungen

Die Anzahl der Sterne oder einzelne Reviews: Die Bewertungen in den Rich Results sind für viele User eine wichtige Orientierungshilfe. Zeichnen Sie diese deshalb über strukturierte Daten wie folgende aus:

  • Gegenstand der Bewertung
  • Bewertung selbst (ratingValue)
  • Anzahl der Bewertungen
  • Anzahl der Rezensionen
  • Beste Bewertung
  • Autor