Barrierefreiheit – 5 Dinge, die du beachten solltest

Vor wenigen Wochen ist der WordPress Accessibility Day zu Ende gegangen. Accessibility heißt übersetzt “Zugänglichkeit” oder, deutlich passender, “Barrierefreiheit”.
In diesem Artikel wollen wir klären, warum Barrierefreiheit bzw. Barrierearmut wichtig ist und wie die eigene Seite schnell geprüft werden kann.

Was ist Barrierefreiheit / Barrierearmut?

Die Begriffe Barrierefreiheit oder Accessibility umfassen die Aufbereitung der eigenen Webseite für körperlich eingeschränkte oder behinderte Menschen. Je mehr man dafür tut, die eigenen Seiten für diese Personengruppe aufzubereiten, desto mehr nähert man sich der Barrierefreiheit. Häufig kollidieren technische Umsetzung und vollständige Barrierefreiheit. Das Umsetzen der Möglichkeiten, bis einem die bestehende Technik Grenzen setzt, macht die Webseite immerhin barriereärmer als eine nicht optimierte Seite.

Arten der Einschränkungen

Screenshot der Wikipedia zum Thema Dyslexie. Alle Buchstaben sind versetzt und vermischt, sodass ein schnelles Lesen nicht mehr möglich ist.
Bei Klick auf dieses Bild erhältst du eine Animation, wie eine Lese-Rechtschreib-Schwäche für eine/n Betroffene/n wirken kann.

Laut dem statistischen Bundesamt lebten Ende 2019 in Deutschland 7,9 Millionen Schwerbehinderte. Dies entspricht 9,5% der Gesamtbevölkerung. Bei Menschen über dem Alter von 64 ist die Schwerbehindertenquote sogar bei 25,3%. Man kann also äußerst belastbar sagen, dass jeder Zehnte in Deutschland eine Schwerbehinderung hat. Diese sind häufig auf Unterstützung angewiesen – auch bzw. gerade auf Webseiten.
Hinzu kommen die Personen, die statistisch nicht erfasst werden, weil sie beispielsweise nur temporär eine Einschränkung haben: Gebrochene Arme sind der Einstieg. Motorische oder sensorische Störungen, die nach einem Unfall erst in der Reha wieder aufgearbeitet werden müssen, sind auch nicht zu verkennen.

Information

Jeder Zehnte in Deutschland hat eine Schwerbehinderung

Die Ausprägungen der Einschränkungen sind vielfältig. Die folgende Liste kann nur einen Überblick geben.

Warum Barrierefreiheit / Barrierearmut für die eigene Seite wichtig ist

Die oben stehenden Zahlen sollten allein schon für sich sprechen: Berücksichtigt man nicht, dass die eigene Webseite zugangsfreundlich ist, so schließt man eine erhebliche Menge an potentiellen Besuchern aus. Der vorgebliche Grund, dass man keine Behinderten oder Eingeschränkte als Besucher der eigenen Webseite hätte, ist auf Basis dieser Zahlen als faule Ausrede zu bezeichnen.

Information

Eine barrierefreie Webseite kann durch Suchmaschinen besser gelesen werden und sorgt so für ein besseres Ranking

Doch abseits des sozialen Gedankens gibt es einen weiteren Grund: Suchmaschinen lieben Barrierefreiheit.
Eine barrierefreie Webseite ist nach gewissen Strukturen aufgebaut: Sie enthält eine nachvollziehbare Dokumentenstruktur, sie stellt weiterführende Informationen über ein Bild oder Video hinaus zur Verfügung, sie nutzt Auszeichnungen im Dokument, die das Navigieren leichter machen. All das ist Gold für Suchmaschinen: Eine barrierefreie Webseite kann durch Suchmaschinen besser gelesen werden und sorgt so für ein besseres Ranking.

Eine Übersicht von verschiedenen Einschränkungen des Tastens, des Sehens, des Hörens und des Sprechens - jeweils unterteilt in "dauerhaft", "temporär" und "situationsbedingt"
Leider englischsprachig, aber Microsoft bietet mit ihrer Inclusive Design Offensive eine tolle Grafik über Einschränkungen

5 Tipps, wie Barrierearmut ohne Programmierkenntnisse einfach umgesetzt werden kann

Um eine vollständig barrierefreie Webseite zu erhalten, sollte der Gedanke der Accessibility von Anfang an in der Entwicklung berücksichtigt werden. Eine bestehende Seite nachträglich komplett barrierefrei zu gestalten, ist sehr aufwändig.
Es ist jedoch gar nicht so schwer, die eigene Seite barrierearm zu gestalten. Das Abbauen von Hürden, und sei es nur teilweise, ist mehr, als wenn die Webseite mit den gleichen Hürden betrieben werden würde.

Nutze ein Theme, das barrierearm ist

Ein Screenshot aus dem WordPress Theme Verzeichnis. Er weist darauf hin, dass man zuerst auf den Button "Feature Filter" und anschließend auf "Accessibility Ready" klicken soll, um einen Filter für barrierearme Themes zu aktivieren.
Mit Klick auf “Feature Filter” und anschließend “Accessibility Ready” kann man den Filter anwenden.

Ein großer Teil von Barrierearmut findet im Quellcode der Webseite statt. Entsprechend muss das Theme auf der Code-Basis schon Barrierefreiheit integriert haben. Im offiziellen WordPress-Theme-Verzeichnis kann man die Themes nach Features filtern. Hier gibt es auch den Filter accessibility-ready.
Filterst du nach dieser Eigenschaft, werden entsprechende Themes ausgegeben. Da es einen eigenen Zulassungsprozess für Themes im WordPress-Verzeichnis gibt, kannst du dich sicher fühlen, dass gewisse Qualitätsstandards eingehalten werden.

Sollte ein Theme außerhalb des Verzeichnisses im Einsatz sein, sind Stichworte wie “barrierefrei”, “accessible” bzw. “accessibility” oder auch “WCAG” hilfreich. “WCAG” steht für Web Content Accessibility Guidelines und bezeichnet Leitlinien, wie Webseiten möglichst barrierearm aufgebaut sein können. Berücksichtigt ein Theme diese Leitlinien, ist das schon ein großer Fortschritt.

Nutze Überschriften

WordPress und viele andere Systeme bieten die Möglichkeit, Inhalte als Überschrift auszuwählen. Dies hat nicht nur den Zweck, dass man einfacher gewisse Formatierungen erreichen kann. Insbesondere sorgt dies dafür, dass ein Text auch tatsächlich in dem Quelltext als Überschrift erkennbar ist.

Überschriften sind im Quelltext einer Webseite als <h1> bis <h6> ausgezeichnet. Das “h” steht für Heading (Überschrift). Während h1 die höchste Überschrift ist und quasi die gesamte Seite beschreibt, sind h2-6 Zwischenüberschriften mit immer geringerer Wertigkeit.

Ein Screenshot aus WordPress, in dem der Guttenberg-Editor anzeigt, dass der markierte Text eine Überschrift der Ebene 2 ist.
Dieser Text ist als eine Überschrift der zweiten Ebene (H2) ausgezeichnet.

Überschriften strukturieren eine Webseite und bieten so nicht nur dem uneingeschränkten Leser Orientierung. Insbesondere eingeschränkte Besucher können mit Hilfe von Programmen die Seitenstruktur erfassen, schnell auf der Seite navigieren und so den für sie interessanten Inhalt aufrufen.

Schreibe lesbare Inhalte

Helle Schrift auf hellem Hintergrund ist schwer zu lesen. Hellgrau auf weiß ist nicht gut. Gleiches gilt für Komplementärfarben wie rote Schrift auf grünem Hintergrund.

Tipp

Aus dem Blickwinkel der Barrierearmut ist ein Schwarz-Weiß-Kontrast eine gute Entscheidung

Was wir schon für uneingeschränkte Besucher berücksichtigen, sollten wir auch für die Eingeschränkten berücksichtigen. Je stärker der Kontrast zwischen zwei Farben, desto besser. Es mag elegant und modern wirken, keinen Schwarz-Weiß-Kontrast für bspw. Texte zu nutzen (auch wir machen das nicht). Aus dem Blickwinkel der Barrierearmut ist das aber eine gute Entscheidung. Sollte man sich doch dagegen entscheiden, sollte die Entscheidung zumindest bewusst getroffen werden.

Nutze auch eine ausreichende Anzahl von Absätzen. Umfangreiche Inhalte ohne Absatz erscheinen bereits für uneingeschränkte Personen wie ein erschlagender Block. Für Personen, die Schwierigkeiten haben, lange Texte zu erfassen, können umfangreiche Textblöcke zur Überforderung führen.
Also lieber einen Absatz mehr als einen zu wenig: Es ist barrierearm und zudem noch dem Lesefluss zuträglich.

Vergib Alternativtexte bei Bildern (Alt-Tag)

Bilder können durch Sehbehinderte nicht gut verarbeitet werden. Tritt eine starke Sehbehinderung ein, werden sogenannte Screenreader genutzt. Sie lesen dem Besucher die Webseite vor. Bilder können auch von Screenreadern verarbeitet werden – hierfür sind die Alternativtexte gedacht. Diese werden direkt im Quellcode mit ausgegeben und können von den Screenreadern interpretiert werden.

<img alt="Ein Screenshot aus WordPress, in dem der Gutenberg-Editor anzeigt, dass der markierte Text eine Überschrift der Ebene 2 ist." width="481" height="113" src="https://www.webfalken.de/wp-content/uploads/2020/10/auszeichnung-h2-ueberschrift.png" />

Lädt man ein Bild in die Mediathek, so kann man neben dem Titel auch einen Alternativtext angeben. Diese Chance sollte man sich nicht entgehen lassen – auch aus der Sicht der Suchmaschinenoptimierung: Da auch ein Suchmaschinen-Bot keine Bilder “erkennen” kann, liest auch dieser die Alternativtexte und indiziert sie.
So wie normale Texte auch können Alternativtexte also hilfreich sein, deine Themen zu präsentieren.

Vermeide jedoch Alternativtexte, wenn die Bilder lediglich zur Dekoration dienen. So wird ein Unterschied geschaffen zwischen wichtigen und unwichtigen Bildern.

Stelle wichtige Inhalte immer in mehreren Medienarten bereit

Das Internet besteht nicht nur aus Text, sondern aus multimedialen Inhalten wie Bildern, Videos oder Audio wie Podcasts. Doch bei jedem Medium können Eingeschränkte ausgegrenzt werden: Eine blinde Person kann keine Bilder oder Videos erkennen. Eine Person, die gehörlos ist, kann keinen Podcast hören. Natürlich treffen die Einschränkungen auch auf Personen zu, die lediglich eine Hör- oder Sehschwäche haben: Auch diese freuen sich über ein Entgegenkommen durch alternative Medienarten.

In Kapitel 4 sprachen wir schon von sprechenden Alternativtexten bei Bildern. Eine Bildunterschrift hilft auch häufig, die Bildinhalte mit weiterem Text anzureichern. Podcasts können transkribiert werden – dies ist meist aufwändig, aber neben der Unterstützung für Eingeschränkte ermöglicht man auch so Suchmaschinen, den Audioinhalt zu verstehen. Videos oder Videoanleitungen sollten auch zusätzlich in Textform beschrieben werden, wenn sie wichtige Inhalte haben.

Fazit

Es ist nicht schwer, die eigene Webseite und die dazugehörigen Inhalte barriereärmer zu gestalten. Wenn man sich erst einmal in die Perspektive einer eingeschränkten Personen versetzt hat, berücksichtigt man die Hilfen später wie selbstverständlich. Zudem sind viele Unterstützungsangebote zugleich perfektes Futter für Suchmaschinen, sodass es kaum Gründe gibt, Barrierefreiheit mit auf den Plan für einen guten Artikel zu nehmen.

Schreibe einen Kommentar