Barrierefreie Websites pflegen: Tipps und Tools für Redakteure und Content Editoren

Im ersten Teil dieser Serie über Barrierefreiheit ging es um das Barrierefreiheitstärkungsgesetz (BFSG), der deutschen Umsetzung des European Accessibility Act (EAA). Doch nicht erst jetzt sollte man sich mit dem Thema beschäftigen. Jeder, egal ob Shopbetreiber, im Marketing tätig oder als Webentwicklerin unterwegs, braucht ein Bewusstsein für wirklich gute Websites und die Mechanismen, die dahinterstehen.

Ob das BFSG einen selbst betrifft und welche Pflichten daraus erwachsen, lässt sich im ersten Teil nachlesen.

Ersten Teil lesen: Das Barrierefreiheitsstärkungsgesetz BFSG im Web

Barrierefreies oder -armes Internet bezeichnet Websites, Apps und digitale Inhalte, die so gestaltet sind, dass sie für alle Menschen unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen zugänglich und nutzbar sind. Das Ziel ist, dass niemand aufgrund von Behinderungen oder Einschränkungen ausgeschlossen wird.

Die Grundlage für barrierefreies Internet bildet häufig der internationale Standard WCAG (Web Content Accessibility Guidelines), der Richtlinien zur Gestaltung barrierefreier Webinhalte liefert. Die Umsetzung ist nicht nur gesetzlich vorgeschrieben, sondern trägt auch zur Verbesserung der Nutzerfreundlichkeit für alle Menschen bei. Besonders der letzte Absatz ist entscheidend.

Das am häufigsten zu findende HTML-Element ist das <div>. Die Spezifikation dazu wird in etwa wie folgt beschrieben:

Das <div> HTML-Element ist der generische Container für Flussinhalt. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es in irgendeiner Weise mit CSS gestylt wird. Als "reiner" Container repräsentiert das <div>-Element von sich aus nichts.

 

Wenn wir uns den letzten Satz aus dem Zitat ansehen, finden wir die entscheidende Aussage. Ein div repräsentiert nichts, es hat keine bestimmte Bedeutung und damit keine Semantik. Doch Semantik ist ein wichtiger Bestandteil von Barrierearmut. Screenreader, Bots oder Suchmaschinen-Crawler analysieren über die Semantik den Inhalt einer Seite. Damit erfassen sie Menüs, Links, Bilder oder unterscheiden zwischen wichtigen und unwichtigen Texten.

Manche Websites sind jedoch regelrechte div-Wüsten. Es gibt keine Struktur, Überschriften sind nicht als solche gekennzeichnet, sogar Links oder Buttons werden als div missbraucht. Und das ist ein großes Problem!

Nach dem kleinen Rant schlagen wir aber wieder eine konstruktive Richtung ein und schauen uns an, was wir auch ohne Programmierkenntnisse selbst machen können. Wie bereits im ersten Artikel erwähnt, sind das einfache Maßnahmen, die softwareübergreifend möglich sind.

All diese Maßnahmen sollten sich mit den gängigsten Content Management System (CMS) oder Online-Shops umsetzen lassen, ohne einen Webdesigner zu beauftragen. Worauf wir dabei achten müssen, wird in den nächsten Abschnitten erklärt.

Ein Alternativtext für Bilder ist kein Nice to have, sondern eine Pflichtangabe im HTML-Standard. Dementsprechend groß sollte die Aufmerksamkeit darauf gelegt werden. Als Faustformel gilt, dass der Alt-Text die Grafik mit einfachen Worten wiedergibt. Handelt es sich z.B. um Cat Content, so sollte das Wort Katze auftauchen.

Es gibt leider den Trend, den Alternativtext für SEO zu missbrauchen - also alles andere dort reinzuschreiben als eine Erklärung des Bildinhaltes. Wer dennoch darauf Wert legt, sollte dafür den Titel als zweite Möglichkeit nehmen. Alt-Text und Titel ergänzen sich dadurch und sorgen für eine bessere Verwertung durch Suchmaschinen.

In Designs für Websites und Apps sind Eingabefelder in Feldern häufig ohne Label, dafür aber mit Texten in den Feldern zu sehen - sogenannte Placeholder. Bei der Umsetzung des Designs werden dann gerne die Label weggelassen, weil ja bereits der Platzhalter zu sehen ist.

Auch hier ist wieder Vorsicht geboten. Erst ein Label gibt dem Formularfeld eine Bezeichnung. Das Feld wird fokusiert, wenn ein Benutzer darauf klickt. Darüber hinaus liest der Screenreader die Beschriftung vor, wenn das Input fokussiert ist.

Der Platzhalter dagegen ist eine Ergänzung zum Label, um z.B. eine weitere Erklärung oder Formatierung vorzugeben.

Früher nutzte man dieses Hilfsmittel, um Texte in bestimmten Schriften darzustellen. Dabei gibt es gleich mehrere Nachteile dieser Methode:

1. Der Text kann nicht markiert und kopiert werden.
2. Screenreader können den Text nicht ohne Weiteres erfassen und vorlesen. Es muss ein Umweg über eine OCR-Software gegangen werden.
3. Die Texte in den Bildern sind nur bedingt responsiv. Schauen wir uns eine solche Grafik auf unterschiedlichen Geräten an oder verändern das Browserfenster, so skaliert das Bild in den meisten Fällen und der Text wird schlecht lesbar.
4. Wird das Bild nicht geladen, kann der Text nicht gelesen werden.

Gerade wenn wichtige Informationen angezeigt werden sollen, ist diese Methode ein No Go! Viele Editoren in den gängigen Content Management Systemen bieten verschiedene Schriften an. Sinnvoll ist es aber, wenn eine Auswahl an Schriften durch die Elemente des Designs vorgegeben werden.

All diese Maßnahmen nützen nichts, wenn man die fehlerhaften Stellen nicht auch findet.

Wie barrierearm ist meine Website oder mein Shop im Moment? Vor dem Hintergrund der genannten Maßnahmen können wir uns jetzt die Frage stellen, wie wir den eigenen Auftritt auf Barrierefreiheit testen können. Ein erster möglicher Anlaufpunkt ist der Check der wichtigsten Seiten

Mit Validatoren auf HTML-Fehler oder Online-Checks für Barrierfreiheit lassen sich die eigenen Angebote kostenfrei überprüfen. Weitere Tools, die auch kostenpflichtig sein können, gibt es im deutschsprachigen Raum. In der folgende Übersicht sind einige nützliche Dienste zu finden: