Barrierefreier Online-Auftritt

Die Webseite einer Organisation ist oft der erste Kontaktpunkt für Kund*innen und somit vielfach Aushängeschild. Wie ein Geschäftslokal, sollte auch der digitale Auftritt möglichst barrierefrei gestaltet sein. Je einfacher sich Personen auf einer Webseite zurechtfinden, umso eher werden sie die Informationen finden, die sie suchen.

Menschen mit verschiedenen BehinderungenSo unterschiedlich Menschen mit Behinderungen sind, so verschieden sind auch die Ansprüche an digitale Formate.

Barrierefrei programmierte Webseiten sollen allen Menschen das gleiche User-Erlebnis ermöglichen.

Für einen barrierefreien Online-Auftritt gibt es daher eine Reihe an Punkten, die zu beachten sind. Einige Wichtige sind hier aufgelistet.


Website

Die barrierefreie Umsetzung einer Website ist für die „User Experience“ von Bedeutung. So können möglichst alle Menschen (mit unterschiedlichen Behinderungen) gleichermaßen von Online-Angeboten profitieren.

INFO: Eine Evaluierung anhand WCAG Kriterien bezieht sich darauf, wie eine Webseite für User*innen wahrnehmbar, bedienbar, verständlich und robust (programmiert) ist. Danach werden drei Kategorien unterschieden: WCAG 2.1. Level A, Level AA oder Level AAA. Für Details zur WCAG Einteilung fragen Sie Expert*innen zu digitaler Barrierefreiheit: Barrierefreiheit, Websites, Übersetzung (oeziv.org)

Der aktuelle Status der Webseite in Bezug auf Barrierefreiheit.

  • Die Webseite ist barrierefrei programmiert, entspricht Level AA
  • Es wurde eine Evaluierung durchgeführt und die Seite verfügt über ein WCAG 2.1. Klassifizierung.
  • Nicht bekannt/nicht vorhanden

Folgende Maßnahmen machen es für User einfacher, eine Webseite zu bedienen oder sich auf einer Webseite zu orientieren. Das kann sowohl Menschen mit Sehbehinderungen aber auch mit motorischen oder Sinnesbehinderungen betreffen.

  • Die Webseite hat eine klare Struktur und verfügt über eine konsistente Überschriftenstruktur
  • Die Webseite ist mit der Tastatur bedienbar. [1]
  • Die Inhalte der Website sind mit einem „Screenreader“ auslesbar.[2]
  • Beim Einsatz von Farben und Kontrasten wird auf Menschen mit Seheinschränkungen geachtet. [3]
  • Bei der Wahl der Schrift wurde auf eine gut lesbare Schriftart geachtet.[4]
  • Auf der Webseite wurde ein „responsive“ Web-Design umgesetzt. [5]
  • Formulare, die auf der Webseite zur Verfügung gestellt werden, funktionieren nach dem 2-Sinne-Prinzip.

Dokumente auf der Webseite

Sind Dokumente, die zur Verfügung gestellt werden (z.B. zum Download) barrierefrei gestaltet? Das betrifft z.B. Personen, die Dokumente mit einem Screenreader lesen.

  • Dokumente werden mit Hilfe von Formatvorlagen (Überschriften Struktur) erstellt.[6]
  • Bilder im Dokument verfügen über Alternativ Texte[7].
  • Eigenschaften des Dokuments wurden eingestellt.
  • Beim Umwandeln in ein PDF-Dokument wurde auf Barrierefreiheit geachtet.

Multimedia Inhalte

Bei Bild- und Toninhalten wird darauf geachtet, dass Inhalte von allen Personen wahrgenommen werden können.

  • Bilder und Grafiken verfügen über Alternativ Texte.
  • Audio- oder Videoinhalte verfügen über alternative Darstellungen. [8]
  • Bilder und Animationen starten nicht automatisch und lassen sich ein- bzw. ausschalten.[9]

Sprache

  • Auf der Webseite werden Informationen in verständlicher Sprache dargestellt.[10]

 


 

[1] Um auf der Seite navigieren zu können, benötigen User*innen nicht zwingend eine Maus als Eingabegerät. Sämtliche Funktionen sind auch mit der Tastatur zu bedienen.

[2] Ein Screenreader ist ein Programm, das den Inhalt einer Seite vorliest. Es dient blinden Personen oder Personen mit Sehbehinderungen als Alternative zu visuellen Nutzeroberflächen.

[3] Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1. Ausgenommen davon ist Text mit einer Schriftgröße von 18pt oder 14pt bei Fettdruck. Die Überprüfung des Kontrastverhältnisses kann mit einfachen Softwarelösungen bestimmt werden. Beispiel: Schwarzer Text auf weißem Hintergrund hat ein sehr gutes Kontrastverhältnis, hellgrauer Text auf weißem Hintergrund ein schlechtes Kontrastverhältnis.

[4] Schriften ohne Serifen sind besser lesbar.

[5] Die Seite passt sich selbständig der verfügbaren Umgebung an. Inhalte sind auf allen Endgeräten, wie Smartphones oder Tablets gleich. Die Darstellung kann in Größe und Aufteilung etwas variieren. Es muss aber beispielsweise keine eigene mobile Seite programmiert werden.

[6] Formatvorlagen sind voreingestellte Überschriften und Segmente. Sie geben einem Dokument eine bessere Struktur, ein einheitliches Aussehen. Durch Formatvorlagen können z.B. Inhaltsverzeichnisse leicht erstellt werden.

[7] Ein Alternativtext beschreibt die sichtbaren Elemente eines Bildes bzw. einer Grafik. Er sollte Inhalt oder Funktion eines Bildes beschreiben.

[8] Alternative Darstellungen von Medien können in Form von Untertiteln und/oder Audiodeskriptionen umgesetzt werden. Auch eine Version in Gebärdensprache stellt eine solche Alternative dar.

[9] Das betrifft z.B. Slider (Diashow), die einen automatischen Bildwechsel durchführen. Auch können schnell blinkende Animationen irritieren und auch epileptische Anfälle auslösen.

[10] Manche Webseiten bieten Versionen in Einfacher Sprache oder in Leichter Sprache an.

 

Link zum WAVE-Test (Dieser Test dient als Einstieg ins Thema, ersetzt aber eine Überprüfung durch Expert*innen nicht.)